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>
效果,如下所示: