Vue复习之Vue2
技术简介
MVVM模型
使用方式
指令 （重点）
Vue生命周期
综合案例
1 技术简介
(1)渐进式JavaScript 框架
框架：一套现成的解决方案
规则：遵循一定的规范->代码规范
优势：代码量减少
(2)往页面填充：
数据
(3)渐进式：
自底向上：简单使用(xx.js文件) 复杂使用(引入相关的文件) 灵活
(4)特性：
单向数据绑定：
JS->页面
JS中数据改变->页面数据随之改变
双向数据绑定：
JS->页面
JS中数据改变->页面数据随之改变
页面->JS form
页面数据随之改变 用户操作表单元素->JS中数据改变
(5)声明式编码
指令(重点)
2 MVVM模型（重点）
(1)M：
Model，模型 数据源
(2)V：
View，视图 页面
(3)VM：
ViewModel：视图模型 Vue实例
中介
思想：
是单向数据绑定和双向数据绑定特性的基础
3 Vue使用步骤
3.1 基础介绍
(1)引入vue.js文件
本地文件->相对路径 根路径
非本地文件->绝对路径
Vue构造函数
(2)创建Vue实例：
new Vue({
el:'#id属性值',
data:{
id:1,
name:'tom',
...
}
})
(3)创建div元素：
设置id属性
使用Vue：
不用再手动操作DOM，只需保证对应关系即可
3.2 案例
3.2.1 案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用步骤</title>
<!--
1.引入vue.js文件：
vue.js vue.min.js
推荐使用vue.js->明确的报错和警告信息
-->
<script src="js/vue.js"></script>
</head>
<body>
<!--
3.创建根标签： View
div
页面呈现所有内容
设置属性->id
代码格式：
HTML代码
Vue代码
-->
<div id="root">
<p>{{name}}</p>
</div>
</body>
<script>
/*
2.创建Vue实例： ViewModel
el：
监控页面哪个元素，对应于根标签 属性值：CSS选择器的字符串表示形式
data：
页面呈现数据 Model
*/
var vm = new Vue({
el: '#root',
data: {
name: 'jack'
}
});
// Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
console.log(vm);
// jack ->不推荐使用
console.log(vm.$data.name);
// jack ->推荐使用
console.log(vm.name);
</script>
</html>
3.2.2 案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- View -->
<div id="root">
</div>
</body>
<script>
var vm = new Vue({ // ViewModel
// el: '#root',
// 对象式
/* data: { // Model
id: 1
} */
// 函数式
data() {
return {
id: 1
}
}
})
// el的另外一种写法
vm.$mount('#root');
console.log(vm.id);
</script>
</html>
4 Vue指令（重点）
4.1 基础介绍
(1)渲染页面数据
(2)指令分类：
内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令
4.2 详细介绍
4.2.1 内容渲染指令
4.2.1.1 基础介绍
(1)v-text
渲染文本内容 覆盖原先内容
(2){{}}
插值语法 设置标签体文本内容 **** 不能解析HTML标签
(3)v-html
解析HTML标签
4.2.1.2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
内容渲染指令：
(1)v-text
渲染文本内容 覆盖原先内容
(2){{}}
插值语法 设置标签体文本内容 **** 不能解析HTML标签
(3)v-html
解析HTML标签
-->
<!-- v-text：渲染文本内容 覆盖原先内容 -->
<p v-text='name'></p>
<!-- {{}}：插值语法 设置标签体文本内容 **** 不能解析HTML标签 -->
<div>名称：{{name}}</div>
<!-- v-html：解析HTML标签 -->
<div v-html='address'></div>
</div>
</body>
<script>
new Vue({
el: '#root',
data: {
name: '尚马教育',
address: '<p>河南郑州</p>',
addresss: '<p>河南郑州2</p>',
}
})
</script>
</html>
4.2.2 属性绑定指令
4.2.2.1 基础介绍
(1)动态设置元素的样式属性
(2)属性：
value
placeholder
class
disabled
src
href
......
(3)写法：
完整写法：
v-bind:xx
简化写法：
:xx
4.2.2.2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<style>
.divCls {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: pink;
}
</style>
</head>
<body>
<div id="root">
<!--
属性绑定指令：
完整写法：
v-bind:xx
比如：
value
placeholder
class
src
href
disabled
简化写法：***
:xx
-->
<!-- 设置value属性值 -->
<!-- <input type="text" v-bind:value='textVal' > -->
<!-- 设置提示信息 -->
<input type="text" :placeholder='msg'>
<br>
<br>
<!-- 设置样式 -->
<div v-bind:class='divStyle'>
</div>
<br>
<!-- src -->
<!-- <img v-bind:src='imgSrc'> -->
<!-- href -->
<a v-bind:href='hrefPath'>百度</a>
<br>
<input type="button" value='普通按钮' v-bind:disabled='btnStatus'>
</div>
</body>
<script>
new Vue({
el: '#root',
data: {
textVal: '今天天气比较凉爽',
msg: '请输入内容',
divStyle: 'divCls',
imgSrc: 'http://p0.qhimg.com/sdm/242_150_/t0148a5d81610984048.jpg?&w=96&h=54&rs=2&qlt=100',
hrefPath: 'http://www.baidu.com',
btnStatus: false
}
})
</script>
</html>
4.2.3 事件绑定指令 （重点）
4.2.3.1 基础介绍
(1)给元素绑定事件
(2)事件绑定指令：
完整写法：
v-on:xx='函数名()'
函数名:function() {}
简化写法：***
@xx='函数名()'
函数名(){}
4.2.3.2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
事件绑定指令：
完整写法：
v-on:xx='函数名()'
函数名:function() {}
简化写法：***
@xx='函数名()'
函数名(){}
-->
<input type="text" :value='textVal'>
<!-- <input type="button" value="按钮" v-on:click='getTextVal()' /> -->
<input type="button" value="按钮" @click='getTextVal()' />
</div>
</body>
<script>
var vm = new Vue({
el: '#root',
data: {
textVal: '月入过万',
},
methods: {
/* getTextVal: function() {
// 输出文本框的value属性值
console.log(vm.textVal);
} */
// 简化写法
getTextVal() {
// console.log(vm.textVal);
// Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
console.log(this);
console.log(this.textVal);
}
}
})
</script>
</html>
4.2.4 双向绑定指令 （重点）
4.2.4.1 基础介绍
(1)常用于表单元素
(2)语法：
v-model
4.2.4.2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<style>
.red {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
}
.yellow {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: yellow;
}
.green {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: green;
}
</style>
</head>
<body>
<div id="root">
<!--
双向绑定指令：****
v-model
JS->页面
页面->JS
表单元素
-->
<input type="text" v-model='textVal'>
<input type="button" value="按钮" @click='getTextVal()' />
<br>
<input type="radio" v-model='sex' value="0" />男
<input type="radio" v-model='sex' value="1" />女
{{sex}}
<br>
<input type="checkbox" v-model='weather' value="cloudy" />多云
<input type="checkbox" v-model='weather' value="rain" />下雨
<input type="checkbox" v-model='weather' value="sunny" />晴天
{{weather}}
<br>
<!-- 颜色下拉选 -->
<select v-model='colorVal' @change='getColorVal()'>
<option value="" disabled selected>请选择</option>
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
</select>
<!-- 案例->利用选中的颜色，给div设置样式 -->
<div :class='divStyle'>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#root',
data: {
textVal: '月入过万',
sex: '1',
weather: ['rain', 'sunny'],
colorVal: '',
divStyle: ''
},
methods: {
// 函数
getTextVal() {
console.log(this.textVal);
},
getColorVal() {
// 选中的颜色
console.log(this.colorVal);
this.divStyle = this.colorVal;
}
}
})
</script>
</html>
4.2.5 条件渲染指令
4.2.5.1 基础介绍
(1)控制元素是否存在
(2)语法：
核心指令：
v-if
辅助指令：
v-else-if
v-else
4.2.5.2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
条件渲染指令：
核心指令：
v-if
辅助指令：
v-else-if
v-else
控制元素是否存在
-->
<div v-if='divVal==1'>div1</div>
<!-- <div v-else-if='divVal==2'>div2</div>
<div v-else='divVal'>div3</div> -->
<div v-if='divVal==2'>div2</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#root',
data: {
divVal: '20'
},
methods: {
}
})
</script>
</html>
4.2.6 列表渲染指令 （重点）
4.2.6.1 基础介绍
(1)遍历数据
(2)语法：
v-for='item in items'
item：遍历到的每一项数据
items：要遍历的数据
4.2.6.2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="root">
<!--
列表渲染指令：
v-for='item in items'
item：遍历到的每一项数据
items：要遍历的数据
-->
<!-- 无序列表 -->
<ul>
<!-- 标签体内容：使用{{}} -->
<li v-for='subject in subjectList'>{{subject.name}}</li>
</ul>
<!-- select -->
<select v-model='proVal'>
<option value="">请选择</option>
<!--
标签体内容：
属性： 属性绑定
-->
<option :value="pro.code" v-for="pro in proList">{{pro.name}}</option>
</select>
{{proVal}}
<hr>
<!-- table -->
<input type="button" value="操作" @click='showData()' />
<br>
<br>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr v-for='emp in empList'>
<td>{{emp.no}}</td>
<td>{{emp.name}}</td>
<td>{{emp.sex}}</td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el: '#root',
data: {
// 课程 利用无序列表呈现
subjectList: [{
"name": "Java"
}, {
"name": "Web"
}, {
"name": "Python"
}],
// 省份 利用下拉选呈现 jsoncn
proList: [{
"code": 1,
"name": "河南省"
}, {
"code": 2,
"name": "湖北省"
}, {
"code": 3,
"name": "四川省"
}],
proVal: '',
// 员工 利用表格呈现
empList: [
/* {
"no": 1,
"name": "lucy",
"sex": "男"
}, {
"no": 2,
"name": "jack",
"sex": "男"
}, {
"no": 3,
"name": "tom",
"sex": "女"
} */
],
},
methods: {
showData() {
// 使用特定技术向后端发请求，获取数据，呈现数据
// 模拟：假设数据empData是服务端返回的
var empData = [{
"no": 1,
"name": "lucy",
"sex": "男"
}, {
"no": 2,
"name": "jack",
"sex": "男"
}, {
"no": 3,
"name": "tom",
"sex": "女"
}];
this.empList = empData;
}
}
})
</script>
</html>
5 Vue生命周期
(1)生命周期指的是从创建->运行->销毁的整个阶段
(2)若程序员希望在特定的时间点去执行一些代码，可利用Vue的生命周期函数
(3)这些时间点会伴随Vue的生命周期函数自动执行
(4)分类如下：
beforeCreate
created
beforeMount
mounted ***
beforeUpdate
updated
beforeDestroy
destroyed
6 省市区综合案例 （重点）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/addr.js"></script>
</head>
<body>
<div id="root">
<!-- 双向绑定指令 -->
<select v-model='proVal' @change='getCityVal()'>
<option value="" disabled>请选择</option>
<!-- v-for指令 -->
<option :value="pro.code" v-for="pro in proList">{{pro.label}}</option>
</select>省
<select v-model='cityVal' @change='getCounVal()'>
<option value="" disabled>请选择</option>
<option :value="city.code" v-for="city in cityList">{{city.label}}</option>
</select>市
<select v-model="counVal">
<option value="" disabled>请选择</option>
<option :value="coun.code" v-for="coun in counList">{{coun.label}}</option>
</select>区县
</div>
</body>
<script>
var vm = new Vue({
el: '#root',
data: {
// 省数据
proVal: '',
proList: [],
// 市数据
cityVal: '',
cityList: [],
// 区县数据
counVal: '',
counList: []
},
methods: {
// 加载市数据
getCityVal() {
// 将市数据恢复成请选择
this.cityVal = '';
// 将区县数据恢复成请选择
this.counVal = '';
this.counList = [];
// 当前选中省
var proCode = this.proVal;
console.log(proCode);
// 遍历
/* temp.forEach(function(pro, idx) {
// 遍历到的每一项省数据
// console.log(data);
if (pro.code == proCode) {
// console.log(111);
// 给市数据赋值
// this.cityList = pro.children;
// console.log(pro.children);
// this不再指向Vue
// Window {window: Window, self: Window, document: document, name: '', location: Location, …}
console.log(this);
}
}) */
// 箭头函数
temp.forEach(pro => {
// 匹配省数据
if (pro.code == proCode) {
//给市数据赋值
this.cityList = pro.children;
// console.log(this.cityList);
}
});
},
// 加载区县数据
getCounVal() {
// 将区县数据恢复成请选择
this.counVal = '';
// 当前选中市
var cityCode = this.cityVal;
// console.log(cityCode);
this.cityList.forEach(city => {
// 匹配市数据
if (city.code == cityCode) {
// 给区县数据赋值
this.counList = city.children;
// console.log(this.counList);
}
});
}
},
// 钩子函数
mounted() {
// 加载省数据
this.proList = temp;
// console.log(this.proList);
}
})
</script>
</html>
