1、Vue常用特性，常用特性概览。
1）、表单操作，表单主要做用户交互，基于Vue的表单操作，如下所示。
a）、Input单行文本。
b）、textarea多行文本。
c）、select下拉多选。
d）、radio单选框。
e）、checkbox多选框。
2）、表单域修饰符，表单默认是字符串的。
a）、number，转化为数值，如<input type="text" v-model.number="name" />。
b）、trim，去掉开始和结尾的空格，如<input type="text" v-model.trim="name" />。
c）、lazy，将Input事件切换为change事件，如<input type="text" v-model.lazy="name" />。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 <style>
7 from div{
8 height: 40px;
9 line-height: 40px;
10 }
11 from div:nth-child(5){
12 height: auto;
13 }
14 from div span:first-child{
15 display: inline-block;
16 width: 100px;;
17 }
18 </style>
19 </head>
20 <body>
21
22 <div id="app">
23 <form>
24 <div>
25 <span>姓名：</span>
26 <span>
27 <!-- v-model实现双向绑定 -->
28 <!-- input事件每次输入内容都会被触发，change事件失去焦点才会触发。 -->
29 <input type="text" v-model.lazy="name" />
30 <!-- input事件，每次输入内容都会被触发，v-model默认使用的是input事件，Input事件会监控输入域的内容变化，发生变化就出触发 -->
31 <!-- change事件，失去焦点才触发。 -->
32 <span>{{name}}</span>
33 </span>
34 </div>
35 <br />
36 <div>
37 <span>性别：</span>
38 <span>
39 <!-- value值用于区分是那一个 -->
40 <input type="radio" id="male" value="1" v-model="gender" />
41 <label for="male">男</label>
42 <input type="radio" id="female" value="2" v-model="gender" />
43 <label for="female">女</label>
44 </span>
45 </div>
46 <br />
47 <div>
48 <span>爱好：</span>
49 <!-- value值用于区分是那一个 -->
50 <input type="checkbox" id="ball" value="1" v-model="hobby" />
51 <label for="ball">篮球</label>
52 <input type="checkbox" id="sing" value="2" v-model="hobby" />
53 <label for="sing">唱歌</label>
54 <input type="checkbox" id="dance" value="3" v-model="hobby" />
55 <label for="dance">跳舞</label>
56 <input type="checkbox" id="code" value="4" v-model="hobby" />
57 <label for="code">编程</label>
58 </div>
59 <br />
60 <div>
61 <span>职业：</span>
62 <select v-model="work">
63 <option value="0">请选择职业...</option>
64 <option value="1">教师</option>
65 <option value="2">程序员</option>
66 <option value="3">软件工程师</option>
67 <option value="4">律师</option>
68 </select>
69 </div>
70 <br />
71 <div>
72 <span>喜好：</span>
73 <select v-model="drink" multiple="true">
74 <option value="0">请选择喜好...</option>
75 <option value="1">奶茶</option>
76 <option value="2">红茶</option>
77 <option value="3">可乐</option>
78 <option value="4">雪碧</option>
79 </select>
80 </div>
81 <br />
82 <div>
83 <span>年龄：</span>
84 <span>
85 <!-- v-model实现双向绑定，v-model.number可以实现将字符串转换为数字 -->
86 <input type="text" v-model.number="age" />
87 </span>
88 </div>
89 <br />
90 <div>
91 <span>个人简介：</span>
92 <!-- v-model.trim可以将前后空格去掉 -->
93 <textarea v-model.trim="desc"></textarea>
94 </div>
95 <br />
96 <div>
97 <button @click.prevent="submit">提交</button>
98 <!-- v-on:click.prevent，其中.prevent阻止默认行为 -->
99 <input type="submit" value="提交" v-on:click.prevent="submit" />
100 </div>
101 </form>
102 </div>
103
104 <script src="vue.js" type="text/javascript"></script>
105 <script type="text/javascript">
106 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
107 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
108 // Vue所做的工作也就是把数据填充把页面的标签里面。
109 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
110 var vm = new Vue({
111 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
112 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
113 // data模型数据，值是一个对象。
114 data: { // 用于提供数据
115 name: '张三三',
116 gender: 1,
117 hobby: ['1'], // hobby是数组模式的
118 work: 0,
119 drink: ['1', '2', '3'], // 下拉框也可以选择多个值
120 desc: 'hello!',
121 age: '',
122 },
123 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
124 submit: function() {
125 console.log(this.name, this.gender, this.hobby.toString(), this.work, this.drink, this.desc.length);
126 console.log(this.age + 1);
127 }
128 }
129
130 });
131 </script>
132 </body>
133 </html>
效果，如下所示：
2、Vue常用特性，自定义指令。
1）、为何需要自定义指令？答：因为内置指令不满足需求。
2）、自定义指令的语法规则（获取元素焦点）、自定义指令用法。
3）、带参数的自定义指令（改变元素背景颜色）、指定的用法。
4）、局部指令。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <!-- 1、自定义指令的语法规则（获取元素焦点）。 -->
11 <!-- 定义的时候，不用加v-，使用的时候直接使用v-focus就可以使用自定义指令了 -->
12 <!-- 对比定位，只能作用到一个上面 -->
13 <input type="text" name="" id="" />
14 <br /><br />
15 <!-- 自定义指令用法。 -->
16 <input type="text" name="" id="" v-focus />
17 <br /><br />
18 <!-- 2、带参数的自定义指令（改变元素背景颜色） -->
19 <input type="text" v-color="msg" v-focus />
20 </div>
21
22 <script src="vue.js" type="text/javascript"></script>
23 <script type="text/javascript">
24 // 自定义指令的语法规则（获取元素焦点）。
25 // Vue自定义指令，参数一是指令的名称，自定义的。参数二用来实现自定义指令的业务逻辑
26 // Vue.directive('focus', {
27 // // inserted被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
28 // // 固定的inserted名称，属于Vue Api的一部分。
29 // // 参数一是element的简写，el标识指令所绑定的元素
30 // inserted: function(el) {
31 // // 定义到这个元素
32 // el.focus();
33 // }
34 // });
35
36 // 带参数的自定义指令（改变元素背景颜色）。
37 // Vue.directive('color', {
38 // // bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
39 // // el指令所绑定的元素，可以用来直接操作 DOM。
40 // // binding：一个对象，包含以下属性：name、value、oldValue、expression、arg、modifiers。
41 // bind: function(el, binding) {
42 // console.log(binding);
43 // console.log(binding.value.color);
44 // // 根据指令的参数设置背景颜色
45 // el.style.backgroundColor = binding.value.color;
46 // }
47 // });
48
49
50 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
51 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
52 // Vue所做的工作也就是把数据填充把页面的标签里面。
53 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
54 var vm = new Vue({
55 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
56 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
57 // data模型数据，值是一个对象。
58 data: { // 用于提供数据
59 msg: {
60 color: 'pink',
61 }
62 },
63 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
64
65 },
66 // 局部指令，在Vue实例参数里面添加一个额外的属性directives，属性里面的对象用于存储局部指令。
67 // 如果想注册局部指令，组件中也接受一个 directives 的选项。局部指令只能在本组件使用。
68 directives: {
69 // focus值是一个对象，对象里面存储的是具体的指令。
70 color: {
71 bind: function(el, binding) {
72 console.log(binding);
73 console.log(binding.value.color);
74 // 根据指令的参数设置背景颜色
75 el.style.backgroundColor = binding.value.color;
76 }
77 },
78 focus: {
79 inserted: function(el) {
80 // 定义到这个元素
81 el.focus();
82 }
83 }
84 }
85 });
86 </script>
87 </body>
88 </html>
3、Vue常用特性，计算属性。
1）、为何需要计算属性？
答：表达式的计算逻辑可能比较复杂，使用计算属性可以使模板内容更加简洁。
2）、计算属性和方法的区别。
a）、计算属性是基于它们的依赖进行缓存的，只计算一次。
b）、方法不进行缓存。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8 <div id="app">
9 <div>{{msg}}</div>
10 <div>{{msg.split('').reverse().join('')}}</div>
11 <!-- 模板内容，计算属性可以让模板内容变得简单。计算属性是基于Data中的数据做处理的，如果数据发生变化，计算结果也是发生变化的 -->
12 <div>{{reverseString}}</div>
13 </div>
14
15 <script src="vue.js" type="text/javascript"></script>
16 <script type="text/javascript">
17 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
18 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
19 // Vue所做的工作也就是把数据填充把页面的标签里面。
20 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
21 var vm = new Vue({
22 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
23 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
24 // data模型数据，值是一个对象。
25 data: { // 用于提供数据
26 msg: 'hello',
27 },
28 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
29
30 },
31 // 计算属性
32 computed: {
33 reverseString: function() {
34 return this.msg.split('').reverse('').join('');
35 }
36 }
37
38 });
39 </script>
40 </body>
41 </html>
4、Vue常用特性，侦听器。
答：计算属性是依赖于Data中数据的，如果数据发生变化，计算的数据就发生变化。
1）、侦听器，用于监听数据的变化，数据发生变化就会触发侦听器所绑定的方法，数据一旦发生变化就通知侦听器所绑定方法，方法业务可以做一些特殊的业务。
2）、侦听器的应用场景，数据变化的时候执行异步或者开销较大的操作。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8 <div id="app">
9 <div>
10 <span>名：</span>
11 <span>
12 <input type="text" v-model="firstName" />
13 </span>
14 </div>
15 <div>
16 <span>姓：</span>
17 <span>
18 <input type="text" v-model="lastName" />
19 </span>
20 </div>
21 <div v-text="fullName"></div>
22 </div>
23
24 <script src="vue.js" type="text/javascript"></script>
25 <script type="text/javascript">
26 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
27 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
28 // Vue所做的工作也就是把数据填充把页面的标签里面。
29 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
30 var vm = new Vue({
31 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
32 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
33 // data模型数据，值是一个对象。
34 data: { // 用于提供数据
35 firstName: '',
36 lastName: '',
37 //fullName: '',
38 },
39 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
40
41 },
42 // 计算属性，实现方案一
43 computed: {
44 fullName: function() {
45 return this.firstName + ' ' + this.lastName;
46 }
47 }
48 // 侦听属性，实现方案二
49 // watch: {
50 // // firstName函数的名字必须和属性的名字一致，函数参数val，表示的是firstName的最新值
51 // firstName: function(val) {
52 // this.fullName = val + ' ' + this.lastName;
53 // },
54 // lastName: function(val) {
55 // this.fullName = this.firstName + ' ' + val;
56 // }
57 // }
58 });
59 </script>
60 </body>
61 </html>
使用Vue的侦听器实现，验证账号是否重复的功能。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8 <div id="app">
9 <!--
10 1）、通过v-model实现数据绑定。
11 2）、需要提供提示信息。
12 3）、需要侦听器监听输入信息的变化。
13 4）、需要修改触发的事件。
14 -->
15
16 <div>
17 <span>账号：</span>
18 <span>
19 <input type="text" v-model.lazy="name" />
20 </span>
21 <!-- 验证账号可用的提示信息 -->
22 <span v-text="tip"></span>
23 </div>
24 </div>
25
26 <script src="vue.js" type="text/javascript"></script>
27 <script type="text/javascript">
28 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
29 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
30 // Vue所做的工作也就是把数据填充把页面的标签里面。
31 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
32 var vm = new Vue({
33 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
34 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
35 // data模型数据，值是一个对象。
36 data: { // 用于提供数据
37 name: '',
38 tip: '',
39 },
40 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
41 // 单独封装的异步操作
42 checkName: function(name) {
43 // 此处缓存this
44 var that = this;
45 // 调用接口，但是可以使用定时任务的方式模拟接口调用。
46 setTimeout(function() { // setTimeout的this是window
47 if (name == 'admin') {
48 //如果账号存在，修改提示信息
49 that.tip = '账号已经存在，请更换一个。';
50 } else {
51 that.tip = '账号可以使用。';
52 }
53 }, 2000); // 延迟2秒
54 }
55 },
56 // 侦听属性
57 watch: {
58 /**
59 * 1、侦听器的步骤。
60 * 第一步、采用侦听器监听账号的变化。
61 * 第二步、调用后台接口进行验证。
62 * 第三步、根据验证的结果调整提示信息。
63 */
64 name: function(val) { // val的值就是输入的账号信息
65 console.log(val);
66 // 调用后台接口验证用户名称的合法性。可以进行单独封装。
67 this.checkName(val); // 将最新的账号传递给checkName方法。
68 // 验证的时候进行提示，修改提示信息。
69 this.tip = '正在验证......';
70 }
71 }
72 });
73 </script>
74 </body>
75 </html>
5、Vue常用特性，过滤器。
1）、过滤器的作用是什么呢?
答：格式化数据，比如将字符串格式化为首字母大写，将日志格式化为指定的格式等等。
2）、可以使用全局过滤器或者局部过滤器的。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8 <div id="app">
9 <!--
10 1）、自定义过滤器。
11 2）、过滤器的使用。
12 3）、局部过滤器。
13 -->
14
15 <input type="text" v-model="msg" />
16 <!-- 使用过滤器的方法，如果是插值表达式，使用|中划线和过滤器名称隔离开即可。过滤器支持同时使用多个，将前一个处理的结果作为下一个的输入值再进行处理 -->
17 <div>{{msg | upper}}</div>
18 <div>{{msg | upper | lower}}</div>
19 <div :name='msg | upper'>哈哈哈</div>
20
21 <!-- 局部过滤器 -->
22 </div>
23
24 <script src="vue.js" type="text/javascript"></script>
25 <script type="text/javascript">
26 // 自定义过滤器，参数一是自定义过滤器名称，参数二是过滤器函数，用于实现过滤器的业务逻辑
27 // 使用方式，第一种插值表达式，第二种是属性绑定的值。
28 // Vue.filter('upper', function(val) { // val参数就是要处理的数据，过滤器在那里使用就可以获取到那里的数据。
29 // // 过滤器最终也要返回处理结果
30 // return val.charAt(0).toUpperCase() + val.slice(1); // slice(1);是从第二个字符到最后一个字符，将第一个转为大写的字符和后面所有字符拼接。
31 // });
32 Vue.filter('lower', function(val) { // val参数就是要处理的数据，过滤器在那里使用就可以获取到那里的数据。
33 // 过滤器最终也要返回处理结果
34 return val.charAt(0).toLowerCase() + val.slice(1); // slice(1);是从第二个字符到最后一个字符，将第一个转为小写的字符和后面所有字符拼接。
35 });
36
37 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
38 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
39 // Vue所做的工作也就是把数据填充把页面的标签里面。
40 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
41 var vm = new Vue({
42 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
43 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
44 // data模型数据，值是一个对象。
45 data: { // 用于提供数据
46 msg: '',
47 },
48 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
49
50 },
51 // Vue的局部过滤器的使用。局部过滤器只能在本组件中可以使用。全局过滤器可以在任意地方使用。
52 filters: {
53 // 过滤器的名称
54 upper: function(val) {
55 //
56 return val.charAt(0).toUpperCase() + val.slice(1);
57 }
58 }
59 });
60 </script>
61 </body>
62 </html>
3）、带参数的过滤器。value就是过滤器传递过来的参数，第一个参数就是要处理的数据，第二个以及后面的参数表示的是使用过滤器后面可以传参，调用的时候，通过括号携带过来，但是这个参数是从第二个参数开始接收的，第一个参数是传递的要处理的数据。也可以直接传入时间和自定义时间格式化实现此功能，不过需要自己找工具类。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8 <div id="app">
9 <div>{{date | format('yyyy-MM-dd HH:mm:ss.SS')}}</div>
10 </div>
11
12 <script src="vue.js" type="text/javascript"></script>
13 <script type="text/javascript">
14 // 全局过滤器，传递的参数是从第二个参数arg开始的。
15 Vue.filter('format', function(value, arg) {
16 console.log(arg);
17 if (arg == 'yyyy-MM-dd HH:mm:ss.SS') {
18 var ret = '';
19 // value.getMonth()返回的值是0-11
20 ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' ' + value.getHours() + ':' +
21 value.getMinutes() + ':' + value.getSeconds();
22 }
23 return ret;
24 });
25
26 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
27 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
28 // Vue所做的工作也就是把数据填充把页面的标签里面。
29 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
30 var vm = new Vue({
31 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
32 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
33 // data模型数据，值是一个对象。
34 data: { // 用于提供数据
35 date: new Date(),
36 },
37 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
38
39 },
40 });
41 </script>
42 </body>
43 </html>
6、Vue常用特性，Vue的生命周期。
1）、挂载（初始化相关属性）。
a、beforeCreate。在实例初始化之后，数据观测和事件配置之前被调用。
b、created。在实例创建完成后被立即调用。
c、beforeMount。在挂载开始之前被调用。
d、mounted。el被新创建的VM.$el替换，并挂载到实例上去之后调用该钩子。
2）、更新（dom元素组件的变更操作）。
a、beforeUpdate。数据更新时候调用，发生在虚拟DOM打补丁之前。
b、updated。由于数据更改导致的的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
3）、销毁（销毁相关属性，用于释放资源）。
a）、beforeDestroy。实例销毁之前调用。
b）、destroyed。实例销毁后调用。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8 <div id="app">
9 <div>{{msg}}</div>
10 <button @click="update">更新</button>
11 <button @click="destroy">销毁</button>
12 </div>
13
14 <script src="vue.js" type="text/javascript"></script>
15 <script type="text/javascript">
16 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
17 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
18 // Vue所做的工作也就是把数据填充把页面的标签里面。
19 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
20 var vm = new Vue({
21 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
22 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
23 // data模型数据，值是一个对象。
24 data: { // 用于提供数据
25 msg: 'Vue的生命周期',
26 },
27 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
28 update: function() {
29 this.msg = 'hello world!';
30 },
31 destroy: function() {
32 // 销毁资源
33 this.$destroy();
34 }
35 },
36 // 阶段一，挂载（初始化相关属性）。
37 beforeCreate: function() {
38 console.log('阶段一，beforeCreate');
39 },
40 created: function() {
41 console.log('阶段一，created');
42 },
43 beforeMount: function() {
44 console.log('阶段一，beforeMount');
45 },
46 mounted: function() {
47 console.log('阶段一，mounted');
48 },
49
50 // 阶段二，更新（dom元素组件的变更操作）。
51 beforeUpdate: function() {
52 console.log('阶段二，beforeUpdate');
53 },
54 updated: function() {
55 console.log('阶段二，updated');
56 },
57
58 // 阶段三，销毁（销毁相关属性，用于释放资源）。
59 beforeDestroy: function() {
60 console.log('阶段三，beforeDestroy');
61 },
62 destroyed: function() {
63 console.log('阶段三，destroyed');
64 },
65
66 });
67 </script>
68 </body>
69 </html>
7、Vue的数组，Vue对数组的处理是响应式的。
1）、变异方法（修改原有数据）。push()添加元素、pop()去除元素、shift()、unshift()、splice()删除指定的元素、sort()排序操作、reverse()数组元素的反转。
2）、替换数组（生成新的数组）。filter()、concat()、slice()用来截取数组。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8 <div id="app">
9 <!-- 响应式的效果，数据的变化为直接影响页面内容的变化 -->
10 <input type="text" v-model="fname" />
11 <button @click="add">添加</button>
12 <button @click="del">删除</button>
13 <button v-on:click="change">替换</button>
14 <ul>
15 <li :key='index' v-for="(item,index) in list">{{item}}</li>
16 </ul>
17 </div>
18
19 <script src="vue.js" type="text/javascript"></script>
20 <script type="text/javascript">
21 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
22 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
23 // Vue所做的工作也就是把数据填充把页面的标签里面。
24 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
25 var vm = new Vue({
26 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
27 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
28 // data模型数据，值是一个对象。
29 data: { // 用于提供数据
30 fname: '',
31 list: ['apple', 'banana', 'orange', 'pean'],
32 },
33 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
34 add: function() {
35 // push用来新增元素
36 this.list.push(this.fname);
37 },
38 del: function() {
39 // pop用来删除元素
40 this.list.pop();
41 },
42 change: function() {
43 // slice用来截取数组
44 this.list = this.list.slice(0, 2);
45 }
46 },
47 });
48 </script>
49 </body>
50 </html>
3）、数组的操作可以通过索引直接操作对应的数据，通过索引操作并不是响应式的，数组的响应式变化，可以通过如下两种方式。
a）、Vue.set(vm.items, indexOfItem, newValue);参数一表示要处理的数组名称，参数二表示要处理的数组的索引，参数三表示要处理的数组的值。
b）、vm.$set(vm.items, indexOfItem, newValue);通过Vue的实例对象来调用，记得加上$符号。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6 </head>
7 <body>
8 <div id="app">
9 <ul>
10 <li :key='index' v-for="(item,index) in list">{{item}}</li>
11 </ul>
12 <ul>
13 <li>{{info.name}}</li>
14 <li>{{info.age}}</li>
15 <li>{{info.address}}</li>
16 </ul>
17 </div>
18
19 <script src="vue.js" type="text/javascript"></script>
20 <script type="text/javascript">
21 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
22 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
23 // Vue所做的工作也就是把数据填充把页面的标签里面。
24 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
25 var vm = new Vue({
26 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
27 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
28 // data模型数据，值是一个对象。
29 data: { // 用于提供数据
30 fname: '',
31 list: ['apple', 'banana', 'orange', 'pean'],
32 info: {
33 name: '张三三',
34 age: 25,
35 }
36 },
37 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
38 },
39 });
40 // 如果直接使用索引方法修改数组不是相应式的，可以使用如下模式进行操作，使数组做到响应式。
41 // 参数一表示要处理的数组名称，参数二表示要处理的数组的索引，参数三表示要处理的数组的值。
42 Vue.set(vm.list, 1, 'lemon');
43 vm.$set(vm.list, 2, '我爱吃🍌');
44
45 // 也可以对对象进行响应式操作
46 //vm.info.address = '北京市西城区';// 这种操作不是响应式的
47 vm.$set(vm.info, 'address', '北京市昌平区');
48 </script>
49 </body>
50 </html>
8、基于Vue实现的简易个人管理系统，如下所示：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>hello world</title>
6
7 <!-- Bootstrap -->
8 <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
9 <style type="text/css">
10 .centerClass {
11 text-align: center;
12 }
13
14 .rightClass {
15 text-align: right;
16 }
17
18 .leftClass {
19 text-align: left;
20 padding-right: 200px;
21 }
22
23 tr th {
24 text-align: center;
25 }
26
27 tr td {
28 text-align: center;
29 }
30 </style>
31 </head>
32 <body>
33 <div id="app">
34 <h1 v-bind:class="[centerClass]">你好，世界！</h1>
35 <br />
36 <hr />
37 <br />
38 <div class="row">
39 <div class="col-md-2"></div>
40 <div class="col-md-8">
41 <div v-bind:class="[rightClass]">
42 <span v-bind:class="leftClass">图书总数：<span v-text="total">{</span></span>
43 <label for="id">编号</label>
44 <input type="text" id="id" v-model="id" v-bind:disabled="flag" v-focus />
45 <label for="name">姓名</label>
46 <input type="text" id="name" v-model="name" />
47 <label for="age">年龄</label>
48 <input type="text" id="age" v-model="age" />
49 <button @click="handle" v-bind:disabled="submitFlag">提交</button>
50 </div>
51 <br />
52 <table class="table table-striped table-bordered table-hover table-condensed">
53 <thead>
54 <tr>
55 <th class="active">编号</th>
56 <th class="success">名称</th>
57 <th class="info">年龄</th>
58 <th class="warning">时间</th>
59 <th class="danger">操作</th>
60 </tr>
61 </thead>
62 <tbody>
63 <tr :key='item.id' v-for="item in persons">
64 <td v-text="item.id"></td>
65 <td v-text="item.name"></td>
66 <td v-text="item.age"></td>
67 <!-- 使用插值表达式使用过滤器 -->
68 <td v-text="item.date">{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
69 <td>
70 <!-- 禁止超链接跳转 -->
71 <a href="" @click.prevent='toEdit(item.id)'>修改</a>
72 <span>|</span>
73 <a href="" v-on:click.prevent='del(item.id)'>删除</a>
74 </td>
75 </tr>
76 </tbody>
77 </table>
78 </div>
79 </div>
80
81 </div>
82
83 <script src="vue.js" type="text/javascript"></script>
84 <script type="text/javascript">
85 // 自定义指令，这里主要是焦点得获取。Vue自定义属性的使用。
86 Vue.directive('focus', {
87 inserted: function(el) {
88 el.focus();
89 }
90 });
91
92 // Vue的全局过滤器，Vue过滤器的使用。
93 Vue.filter('format', function(value, arg) {
94 function dateFormat(date, format) {
95 if (typeof date === "string") {
96 var mts = date.match(/(\/Date\((\d+)\)\/)/);
97 if (mts && mts.length >= 3) {
98 date = parseInt(mts[2]);
99 }
100 }
101 date = new Date(date);
102 if (!date || date.toUTCString() == "Invalid Date") {
103 return "";
104 }
105 var map = {
106 "M": date.getMonth() + 1, //月份
107 "d": date.getDate(), //日
108 "h": date.getHours(), //小时
109 "m": date.getMinutes(), //分
110 "s": date.getSeconds(), //秒
111 "q": Math.floor((date.getMonth() + 3) / 3), //季度
112 "S": date.getMilliseconds() //毫秒
113 };
114 format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
115 var v = map[t];
116 if (v !== undefined) {
117 if (all.length > 1) {
118 v = '0' + v;
119 v = v.substr(v.length - 2);
120 }
121 return v;
122 } else if (t === 'y') {
123 return (date.getFullYear() + '').substr(4 - all.length);
124 }
125 return all;
126 });
127 return format;
128 }
129 return dateFormat(value, arg);
130 })
131
132 // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
133 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
134 // Vue所做的工作也就是把数据填充把页面的标签里面。
135 // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
136 var vm = new Vue({
137 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
138 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
139 // data模型数据，值是一个对象。
140 data: { // 用于提供数据
141 centerClass: 'centerClass', // 样式居中
142 rightClass: 'rightClass', // 样式居右
143 leftClass: 'leftClass', // 样式居左
144 id: '', // id双向数组绑定。
145 name: '', // name双向数组绑定。
146 age: '', // age双向数据绑定。
147 flag: false, // 绑定的是表单是否禁用。
148 submitFlag: false, // 提交按钮，默认是不禁用的。使用监听器，如果名称相同就将提交按钮禁用掉。
149 persons: [
150 /* {
151 id: 1,
152 name: '张三三',
153 age: '25',
154 date: '2020-04-17 15:06:31'
155 }, {
156 id: 2,
157 name: '李四四',
158 age: '21',
159 date: '2020-04-17 15:06:32'
160 }, {
161 id: 3,
162 name: '王五五',
163 age: '27',
164 date: '2020-04-17 15:06:33'
165 }, {
166 id: 4,
167 name: '赵六六',
168 age: '22',
169 date: '2020-04-17 15:06:34'
170 }, */
171 ]
172 },
173 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
174 // 新增操作
175 handle: function() {
176 if (this.flag) {
177 // 编辑操作，就是根据当前的id更新数组中对应的数据。
178 // 参数item表示其中一项数据。
179 this.persons.some((item) => {
180 // item的id和当前的id进行对比。当前的id就是this的id，如果使用的是普通的方法function(item)，那么this指的是window
181 // 的this，所以使用箭头函数可以解决这个问题。箭头函数的this指的是定义这个函数的父级作用域中的this，
182 // 这个父级作用域其实是handle: function()作用域，这个作用域其实就是Vue实例本身。通过Vue实例就可以获取到表单中的id
183 if (item.id == this.id) {
184 item.name = this.name;
185 item.age = this.age;
186 // item.date = new Date();
187 // 完成更新操作之后，需要终止循环。
188 return true; // 返回true终止循环。
189 }
190 });
191 // 将禁止表单放开
192 this.flag = false;
193 this.clearData(); // 清空表单。
194 } else {
195 // 新增账号信息，获取表单的信息，放到一个对象里面，然后再添加到上面的数组里面。
196 var person = {};
197 person.id = this.id;
198 person.name = this.name;
199 person.age = this.age;
200 // person.date = '';
201 person.date = new Date();
202 // 将对象放入到数组里面
203 this.persons.push(person);
204 // 清空表单方法。
205 this.clearData();
206 }
207 },
208 // 清空表单
209 clearData: function() {
210 this.id = '';
211 this.name = '';
212 this.age = '';
213 },
214 // 修改操作
215 toEdit: function(id) {
216 // 禁止修改id的值
217 this.flag = true;
218 // 获取到要修改的id的值。
219 console.log(id);
220 // 根据id的值查询出要编辑的数据，可以使用数组循环遍历来实现。
221 // 这里使用数组的过滤操作，过滤出需要的数据，参数表示其中一项数据。
222 var person = this.persons.filter(function(item) {
223 // 直接将查询过滤出的id值返回
224 return item.id == id;
225 });
226 // 此时就已经获取到了想要的对象
227 console.log(person);
228 // 此时将获取到的信息填充到表单里面。
229 // 使用的是双向数据绑定
230 this.id = person[0].id;
231 this.name = person[0].name;
232 this.age = person[0].age;
233 // 此时完成了表单的填充工作。修改操作，编号禁止修改。
234 },
235 del: function(id) {
236 // // 方案一，删除数组元素
237 // // 删除个人信息，先根据id找到要删除的那个数据的索引，然后根据索引删除数组中的一个元素。
238 // // 函数的参数是其中一项数据
239 // var index = this.persons.findIndex(function(item) {
240 // // 参数id和其中一项数据进行对比，找到这个数据的数组索引。
241 // return item.id = id;
242 // });
243 // // 根据索引删除数组元素。
244 // this.persons.splice(index, 1); // 参数1是删除元素的索引，参数2是删除几个元素
245
246
247 // 方案二，删除数组元素，filter是生成新的数组。
248 this.persons = this.persons.filter(function(item) {
249 // 要删除的id排除掉，剩下的就是删除之后的内容。
250 return item.id != id; // 不等于就是删除完剩下的内容。
251 });
252 }
253 },
254 // 计算属性
255 computed: {
256 total: function() {
257 // 计算属性。
258 return this.persons.length; // 直接返回个人信息的长度即可。
259 }
260 },
261 // 监听器，侦听器可以一直监听数据的变化，一旦变化就触发绑定的函数，在函数当中可以做一些特殊的处理。主要是一些异步的处理逻辑。
262 watch: {
263 // 参数val就是你输入的最新的名称
264 name: function(val) {
265 // 验证姓名是否已经存在，判断数组中是否包含这个数组，submitFlag
266 // some()方法是判断数组中是否有满足条件的数据，有一个的话就返回true。item表示其中一项数组
267 var flag = this.persons.some(function(item) {
268 return item.name = val;
269 });
270 // 判断flag的真假即可
271 if (flag) {
272 // 用户姓名存在
273 this.submitFlag = true;
274 } else {
275 // 用户姓名不存在
276 this.submitFlag = false;
277 }
278 }
279 },
280 // 生命周期，可以在特定阶段做特殊的事情，可以用于处理数据。
281 mounted: function() {
282 // 该声明周期钩子函数被触发的时候，默认已经可以使用了，此时就可以将数据放入进去了。
283 // 一般此时用于获取后台数据，然后把数据填充到模板中，进行模板的渲染。
284 var data = [{
285 id: 1,
286 name: '张三三',
287 age: '25',
288 date: '2020-04-17 15:06:31'
289 },
290 {
291 id: 2,
292 name: '李四四',
293 age: '21',
294 date: '2020-04-17 15:06:32'
295 },
296 {
297 id: 3,
298 name: '王五五',
299 age: '27',
300 date: '2020-04-17 15:06:33'
301 },
302 {
303 id: 4,
304 name: '赵六六',
305 age: '22',
306 date: '2020-04-17 15:06:34'
307 },
308 ];
309 // 将从后台获取得到的数据赋值给变量。
310 this.persons = data;
311 }
312 });
313 </script>
314
315 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
316 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
317 <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
318 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
319 </body>
320 </html>
效果，如下所示：
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
