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