专栏首页别先生Vue常用特性

Vue常用特性

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>

效果,如下所示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue模板语法

      渐进式的含义理解,从左到右递进关系,声明式渲染(最简单的模式)->组件系统(组件化)->客户端路由(局部更新,浏览器的历史回退功能)->集中式状态管理(Vu...

    别先生
  • vue入门案例

    1、技术在迭代,有时候你为了生活没有办法,必须掌握一些新的技术,可能你不会或者没有时间造轮子,那么就先把利用轮子吧。

    别先生
  • 17/11/24 05:08:44 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform

    2017-11-24 21:20:25 1:什么叫失望,什么叫绝望。总之是一脸懵逼的继续...... 之前部署的hadoop都是hadoop-2.4.1.ta...

    别先生
  • 2019年 Vue.js 报告中的亮点 [每日前端夜话0x3B]

    最新版的 State of Vue.js 报告是现场直播,它为 Vue 生态系统的状态以及团队未来的储备提供了一些有价值的见解。让我们仔细看看。

    疯狂的技术宅
  • 为什么现在的开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较?

    Vue.js 是一个用来构建 web UI 的 JavaScript 库,基于 MIT 开源协议。Vue.js 于 2013 年首次分布,但是在接下来的两年内,...

    疯狂的技术宅
  • Vue3 对 Web 应用性能的改进[每日前端夜话0xE1]

    有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非...

    疯狂的技术宅
  • Vue 3 最值得期待的五项重大更新

    Vue 团队非常擅长改进框架 API。Evan You 总结了 Vue 3 的几大改进目标:

    奋斗蒙
  • 【Vuejs】397- Vue 3最值得期待的五项重大更新

    我非常重视性能,所以在探索具体的 API 之前我想谈一谈 Vue 3 的性能。可讲的东西是很多的!几乎每个角落都能找到明显的改进!

    pingan8787
  • 01Vue.js快速入门(一)Vue概念及Helloworld

    Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue...

    老马
  • 2019 Vue开发指南:你都需要学点啥?

    如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。

    Javanx

扫码关注云+社区

领取腾讯云代金券