Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
前言
上篇文章对Vue.js有了初步理解，接下来我们把Vue.js基础语法快速的过一遍，先混个脸熟留个印象就好。Vue.js基础主要包括，生命周期，数据绑定，过滤器，方法，计算属性，内置指令，组件，自定义指令，Render函数。
Vue实例与数据绑定
通过构造函数Vue就可以创建一个Vue的根实例，el挂载DOM对象，data绑定数据，页面文本中通过插值显示data数据，插值方式为{{}}双大括号，如<div>{{ name }}</div>。Vue实例中data数据就是Model它默认就是双向绑定的，我们通过维护data数据来可以实时改变视图展示内容。注意：如果有些数据改变不影响视图的变量，尽量不要在data中定义它，因为这样会增加效率问题。
var app = new Vue({ el: '#app', //el指定一个页面中已存在的DOM元素来挂载VUE实例 data() { return { name: '' }; } })
Vue.js生命周期
每个框架都有它的生命周期，每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在适合的时机执行我们的业务逻辑。
- created：实例创建完成后调用，但尚未挂载，$el还不可用。
- mounted：el挂载到实例上后调用，一般第一个业务逻辑在这里开始。
- beforeDestroy：实例销毁之前调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>{{ date }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { date: new Date() }; }, created: function () { //实例创建完成后调用，但尚未挂载，$el还不可用。 console.log(this.$el) //undefined }, mounted: function () { //el挂载到实例上后调用，一般第一个业务逻辑在这里开始。 var e = this; this.timer = setInterval(() => { e.date = new Date(); }, 1000); }, beforeDestroy: function () { //实例销毁之前调用。 this.timer && clearInterval(this.timer); } }) </script> </body> </html>
生命周期图示：（官方提供）
过滤器
Vue.js 支持在{{ }}插值的尾部添加一个管道符“|”，对数据进行过滤，经常用于格式化文本，例如对时间进行格式化处理。过滤器可以串联多个，而且还可以接收参数，默认第一个参数为数据本身。过滤器适用于简单的文本转换，如果要实现复杂的数据变换，应该使用计算属性去处理，计算属性在后面介绍它的用法。
- filters：过滤器选项中创建每个过滤器，过滤规则是自定义的，例：filterA: function(value){}。
- 管道符：管道符“|”出现在文本插值后面，进行过滤前面数据，例：{{ data | filterA }}。
- 串联：过滤器也可以串联，数据后面设定多个过滤器，例：{{ message | filterA | filterB }}。
- 多个参数：每个过滤器可以设定多个参数，例：{{ message | filterA('arg1', 'arg2') }}，arg1为过滤器第2个参数，arg2为过滤器第3个参数，因为默认第一个参数为数据本身。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>{{ date | filterA }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { date: new Date() }; }, filters: { filterA: (value) => { let date = new Date(value), y = date.getFullYear(), m = date.getMonth() + 1, d = date.getDate(), hh = date.getHours(), mm = date.getMinutes(), ss = date.getSeconds(); var dt = y + '-' + (m > 9 ? m : '0' + m) + '-' + (d > 9 ? d : '0' + d) + ' ' + (hh > 9 ? hh : '0' + hh) + ':' + (mm > 9 ? mm : '0' + mm) + ':' + (ss > 9 ? ss : '0' + ss); return dt; } } }) </script> </body> </html>
方法
methods 声明所有绑定事件监听器实现的方法，每个方法以函数形式声明，实例方法内可以直接使用this获取或修改数据，也可以调用其他申明的方法，外部也可以通过实例去调用。下面实例中用到了v-if="show"，这是内置指令后面会详细介绍，@click="hide" 这也是内置指令v-on它是用来绑定事件监听器，@是语法糖，这里主要说明一下方法hide()调用的时候（）可以省略。关于箭头函数，作用域不同，根据实际需求选择使用它。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="点击隐藏1" @click="hide"> <input type="button" value="点击隐藏2" @click="hide2"> <h1 v-if="show">{{ message }}</h1> <h1 v-if="show">{{ getmessage() }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { show: true, message: 'HelloWord!' }; }, methods: { hide: function(){ //console.log(this.show); this.show = false; }, hide2: ()=>{ //箭头函数作用域不一样，通过this无法改变数据。 console.log(this.show); // undefined this.show = false; //app.show =false; //通过实例调用来完成修改数据 }, getmessage: function(){ return this.message; //带返回值方法，可以在插值中输出 } } }) </script> </body> </html>
计算属性
computde计算属性，模板内的表达式仅用于简单的运算，复杂的逻辑都可以通过计算属性代替，计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化时，它才会重新取值。计算属性还可以返回多个Vue实例的数据，其中一个数据变化，计算属性会重新被执行。
- computde：计算属性选项。
- 用法：计算属性包含get和set函数，默认不写只触发getter函数来读取。
- 缓存：计算属性与方法不一样地方，它是依赖数据发生变化时才会重新计算，高效率。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="点击" @click="onmode"> <h1>{{ count }} </h1> <h1>{{ cpdate }} </h1> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { count: 0, date: '', message: 'Hello' }; }, methods: { onmode: function () { this.count++; } }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') }, cpdate: function () { //var d = this.count; //当计算属性中依赖属性发生变化时，会被重新计算。 this.date = new Date(); return this.date; } } }) </script> </body> </html>
内置指令
指令 (Directives) 是带有 v- 前缀的特殊属性，指令是Vue模板中最常用的一项功能，它带有前缀v-，主要职责就是当其表达式的值改变时，将某些行为应用到DOM上。
- v-if：条件渲染指令，动态在DOM内添加或删除DOM元素。
- v-else：条件渲染指令，必须跟v-if成对使用。
- v-else-if：判断多层条件，必须跟v-if成对使用。
- v-show：条件渲染指令，为DOM设置css的style属性，v-show不能在<template>上使用，频繁切换场景中适合使用。
- v-text：更新元素的textContent；例如：<span v-text="msg"></span> 等同于 < span>{{msg}} </ span>。
- v-html：更新元素的innerHTML；会把标签名也带上。
- v-for：循环指令；<li v-for="book in books">{ { book.name } }</li>
- v-for：表达式遍历数组时支持一个可选参数作为当前项的索引；<li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>
- v-for：表达式遍历对象属性时，有两个可选参数，分别是键名和索引；<li v-for="(value , key , index) in user ">{ { index } } - { { key } } : { { value } }</li>
- v-cloak：不需要表达式，这个指令保持在元素上直到关联实例结束编译； v-cloak 是一个解决初始化慢导致页面闪动的最佳实践。
- v-once：也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。
- v-pre：不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度。
- v-bind：响应并更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等。语法糖："v-bind:” 可以用"："代替。
- v-on：用于监听DOM事件； 例如：v-on:click v-on:keyup。语法糖：“v-on:”可以用“@”代替。
- v-model：数据双向绑定；用于表单输入等；例如：< input v-model= "message">。v-model也是一个特殊的语法糖，使用@input来替代v-model。
方法与事件：
Vue 提供了一个特殊变量$event ，用于访问原生DOM 事件，可以阻止事件冒泡或者阻止链接打开。
写一个阻止冒泡的例子：
<div @click="stopClick1('stop1',$event)"> <div @click="stopClick2('stop2',$event)"> <div @click="stopClick3('stop3',$event)">阻止冒泡</div> </div> </div> methods:{ stopClick3: function(message, event){ console.log(message); event.stopPropagation(); //阻止冒泡 }, stopClick2: function(message, event){ console.log(message); }, stopClick1: function(message, event){ console.log(message); } }
修饰符：
在＠绑定的事件后加小圆点“．”，再跟一个后缀来使用修饰符。
上面的阻止冒泡事件，可以直接用户修饰符的方式写为：
<div @click.stop="stopClick3('stop3')">阻止冒泡</div> //不用通过$event事件再来写了
常用的一些修饰符有：.stop、.prevent、.capture、.self、once，修饰符可以串联使用。
<!--阻止单击事件冒泡--> <a @click.stop="handle"></a> <!--修饰符可以串联--> <a @click.stop.prevent="handle"></a> <!--添加事件侦听器时使用事件捕获模式--> <div @click.capture="handle"> ... </div> <!--只当事件在该元素本身（而不是子元素） 触发时触发回调--> <div @click.self="handle"> ... </div> <!--只触发一次，组件同样适用--> <div @click.once="handle"> ... </div>
数组更新：
当我们修改数组时， Vue 会检测到数据变化，所以用v-for 渲染的视图也会立即更新。
- push()
- pop()
- shift()
- unshit()
- splice()
- sort()
- reverse()
以上方法会改变被这些方法调用的原始数组，也有些方法不会改变原数组，它们返回的是一个新数组，在使用这些非变异的方法时，可以用新数组来替换原数组，相同的元素不会重新渲染。
例如：
- filter()
- concat()
- slice()
app.books = app.books.filter(function(item){
return item.name.match(/JavaScript/);
});
过滤与排序：
当你不想改变原数组，想通过一个数组的副本来做过滤或排序显示时，可以使用计算属性来返回过滤或排序后的数组。
表单与v-model
表单控件在实际业务中较为常见，比如单选、多选、下拉选项、输入框等，用它们可以完成数据的录入、校验、提交等，上面内置指令中提到了v-model指令，用于在表单类元素上双向绑定数据，可以将输入的内容实时映射到绑定的数据上。
备注：v-model 也有修饰符，用于控制数据同步的时机，如：使用修饰符.lazy 会转变为在change事件中同步；使用修饰符.number 可以将输入转换为Number类型；使用修饰符.trim 可以自动过滤输入的首尾空格。
输入框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="message" placeholder="输入..."> <p>输入的内容是：{{ message }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: '' } }) </script> </body> </html>
在输入框输入的同时，{{ message }} 也会实时将内容渲染在视图中。
单选按钮：
单选按钮在单独使用时，不需要 v-model，直接使用 v-bind 绑定一个布尔值类型的值，为真时选中，为否时不选。
<div id="app"> <input type="radio" :checked="picked"> <label>单选按钮</label> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { picked: true } }) </script>
如果是组合使用来实现互斥选择的效果，就需要 v-model 配合 value 来使用。
<div id="app"> <input type="radio" v-model="picked" value="html" id="html"><label for="html">HTML</label> <input type="radio" v-model="picked" value="js" id="js"><label for="js">JavaScript</label> <input type="radio" v-model="picked" value="css" id="css"><label for="css">CSS</label> <br> <p>选择的项是：{{ picked }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { picked: 'js' } }) </script>
复选框：
复选框也是分单独使用和组合使用，不过用法稍与单选不同，复选框单独使用时也是用 v-model 来绑定一个布尔值。
<div id="app"> <input type="checkbox" v-model="checked" id="checked"> <label for="checked">选择状态：{{ checked }}</label> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { checked: false } }) </script>
组合使用时，也是 v-model 与 value 一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选择这一项。
<div id="app"> <input type="checkbox" v-model="checked" value="html" id="html"><label for="html">HTML</label> <br> <input type="checkbox" v-model="checked" value="js" id="js"><label for="js">JavaScript</label> <br> <input type="checkbox" v-model="checked" value="css" id="css"><label for="css">CSS</label> <br> <p>选择的项是：{{ checked }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { checked: ['html','css'] } }) </script>
选择列表：
选择列表就是下拉选择器，同样也是分为单选和多选方式。
<div id="app"> <select v-model="selected"> <option>HTML</option> <option value="js">JavaScript</option> <option>CSS</option> </select> <p>选择的项是：{{ selected }}</p> <select v-model="selected2" multiple> <option value="html">HTML</option> <option value="js">JavaScript</option> <option value="css">CSS</option> </select> <p>选择的项是：{{ selected2 }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { selected: 'HTML', selected2: ['html','js'] } }) </script>
Class 与 Style 绑定
对于数据绑定，一个常见的需求是操作元素的class样式列表和它的内联样式。我们可以用v-bind绑定元素属性，表达式的结果类型可以是字符串，也可以是对象或数组，v-bind:class 指令也可以与普通的 class 属性共存。
表达式为对象时：
<div id='example' class="h12" :class="{'active':isActive,'error':isError}"></div> var vm = new Vue({ el: '#example', data: { isActive: true, isError: false } })
渲染为：
<div id='example' class="h12 active"></div>
以上例子普通class绑定h12样式，通过v-bind:class绑定的表达式为对象，渲染结果中h12样式永远存在，当数据isActive和isError变化时，为true的对应的class样式被添加到class列表中。
我们也可以直接绑定数据中的一个对象，代码示例如下：
<div id='example' class="h12" :class="container"></div> var vm = new Vue({ el: '#example', data: { container：{ 'active': true, 'error': false } } })
当然除了绑定数据外，我们也可以直接绑定计算属性使用，处理更复杂的业务逻辑，不过在项目中很少用到。
表达式为数组时：
<div id='example' :class="[active, error]"></div> var vm = new Vue({ el: '#example', data: { active: 'active', error: 'error',
isError: true } })
渲染为：
<div id='example' class="active error"></div>
如果想根据条件切换列表中的class，则可以用三元表达式，代码示例如下：
<div id='example' :class="[active, isError ? error : '']"></div>
绑定内联样式：
v-bind:style的表达式可以绑定对象，也可以是数组，CSS属性名可以用驼峰命名式(camelCase)或短横分隔命名式(kebab-case)，代码示例如下：
<div id='example' :style="{'color':color,'fontSize':fontSize+'px'}">样式</div> var vm = new Vue({ el: '#example', data: { color: 'orange', fontSize: 13 } })
渲染为：
<div style="color: orange; font-size: 13px;">样式</div>
通常直接绑定到一个样式对象更好，让模板更清晰，代码示例如下：
<div id='example' :style="ddfe">样式</div> var vm = new Vue({ el: '#example', data: { ddfe: { color: 'orange', fontSize: 13 } } })
v-bind:style 的数组语法可以将多个样式对象应用到一个元素上，代码示例如下：
<div id='example' :style="[ddfe, ddcolor]">样式</div>
目录导航
- Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
- Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）
- Vue.js+vue-element搭建属于自己的后台管理模板：创建一个项目（四）
参考资料
Vue.js
