文章目录
一、概述
1、什么是Vue
Vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他的大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层。不仅易于上手，还便于与第三方库或者项目整合
2、什么是MVVM
3、为什么要使用MVVM
MVVM模式和MVC模式是一样的，主要目的是用来分离视图(View)和模型(Model)，有以下几大好处
-
低耦合：视图(View) 可以独立于Model变化和修改，一个viewModel可以绑定到不同的View上，当view变化时，model可以不变，当model变化时，view也可以不变
-
可复用：可以把一些逻辑视图放在一个viewModel里面，让更多的View重用这段视图逻辑
-
独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面的设计
-
可测试：页面素来是比较难于测试的，而现在可以针对viewModel来写
二、第一个Vue程序
1、idea安装vue插件
2、页面导入js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
3、编写测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{
{message}}
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm=new Vue({
el: "#app" ,
data: {
message: "hello,vue"
}
});
</script>
</body>
</html>
4、页面效果
三、Vue基础
1、Vue基本语法
v-bind标签
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟后查看此处动态绑定的提示信息
</span>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm=new Vue({
el: "#app" ,
data: {
message: "hello,vue"
}
});
</script>
</body>
</html>
v-if
v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm=new Vue({
el: "#app" ,
data: {
ok: true
}
});
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="item in items">
{
{item.message}}
</li>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm=new Vue({
el: "#app" ,
data: {
items:[
{
message: "xiongda"},
{
message: "xionger"}
]
}
});
</script>
</body>
</html>
2、绑定事件
v-on绑定事件
v-on:click
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">click me</button>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm=new Vue({
el: "#app" ,
data: {
message: "xuzhi"
},
methods: {
sayHi: function () {
alert(this.message)
}
}
});
</script>
</body>
</html>
3、Vue的双向绑定
v-model
文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
输入的文本：<input type="text" v-model="message"/>{
{message}}
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm=new Vue({
el: "#app" ,
data: {
message: "123"
}
});
</script>
</body>
</html>
单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
性别：
<input type="radio" name="sex" value="男" v-model="aa">男2
<input type="radio" name="sex" value="女" v-model="aa"> 女
选中了谁{
{aa}}
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm=new Vue({
el: "#app" ,
data: {
aa: ""
}
});
</script>
</body>
</html>
下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
下拉框：
<select v-model="selected">
<option value="" disabled>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>{
{selected}}</span>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm=new Vue({
el: "#app" ,
data: {
selected: ""
}
});
</script>
</body>
</html>
4、Vue组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<xuzhi v-for="item in items" v-bind:item="item"></xuzhi>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component("xuzhi",{
props: ['item'],
template: ' <li>{
{item}}</li>'
});
var vm=new Vue({
el: "#app" ,
data: {
items:["java","linux","ccc"]
}
});
</script>
</body>
</html>
5、Axios异步通信
准备一个json数据
{
"name":"狂神说java",
"url": "http://baidu.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>{
{info.name}}</div>
<div>{
{info.address.street}}</div>
<a v-bind:href="info.url">点我</a>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript"></script>
<script>
var vm=new Vue({
el: "#app" ,
data() {
return {
info: {
name: null,
address: {
country: null,
city: null,
street: null
},
url: null
}
}
},
mounted() {
//钩子函数
axios.get('../data.json')
.then(response => (this.info=response.data))
}
});
</script>
</body>
</html>
6、计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>currentTime={
{currentTime()}}</p>
<p>currentTime1={
{currentTime1}}</p>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello,xuzhi"
},
methods: {
currentTime: function () {
return Date.now(); //返回时间戳
}
},
computed: {
//计算属性
currentTime1: function () {
return Date.now(); //返回时间戳
}
}
});
</script>
</body>
</html>
7、插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items solt="todo-items" v-for="item in todoItems" v-bind:item="item" :key="item.id"></todo-items>
</todo>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component("todo", {
template: '<div>\n' +
' <slot name="todo-title"></slot>\n' +
' <ul>\n' +
' <slot name="todo-items"></slot>\n' +
' </ul>\n' +
' </div>'
});
Vue.component("todo-title", {
props: ['title'],
template: ' <div>{
{title}}</div>'
});
Vue.component("todo-items", {
props: ['item'],
template: '<li>{
{item}}</li>'
});
var vm = new Vue({
el: "#app",
data: {
title: "babendan列表",
todoItems: ['java', 'linux', '前端']
}
});
</script>
</body>
</html>
8、
四、第一个vue-cli项目
vue-cli是官方提供的一个脚手架，生成一个vue项目模板
1、安装vue-cli
npm install vue-cli -g
2、查看是否安装成功
vue list
3、使用webpack创建一个项目
vue init webpack myvue
5、进入myvue文件夹
6、安装依赖
npm install
7、运行
npm run dev
五、webpack打包使用
安装webpack
npm install webpack -g
npm install webpack-cli -g
创建项目
hello.js
//暴露一个方法
exports.sayHi=function () {
document.write("<h1>哈哈啊哈</h1>")
}
main.js 入口
var hello = require("./hello");
hello.sayHi();
配合webpack.config.js
module.exports = {
entry: './modules/main.js',
output: {
filename: './js/bundle.js'
}
}
运行打包命令。webpack
生成bundle.js
编写测试页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
六、路由
1、vue-router路由
2、element-ui
1、创建一个名为hello-vue的工程vue init webpack hello-vue
2、安装依赖
# 进入工程目录
cd hello-vue
#安装vue-router
npm install vue-router --save-dev
#安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装SASS加载器
npm install sass-loader node-sass --save-dev
#启动测试
npm run dev