跟着艾文一起学前端-第22篇 - Vue -介绍
背景介绍
Vue.js是目前最火的一个前端框架
React是目前最流行的一个前端框架，除了可以开发网站，还可以用来开发APP
Vue.js介绍
Vue.js是一套构建用户界面的框架，只关注视图层
特点：
- 易上手
- 便于与第三方库或既有项目整合（Vue有配套的第三方库，可以整合起来做大型项目的开发）
为什么要学习流行框架
-
企业：使用这些框架，对于企业来说可以提高开发效率，提升开发效率的发展历程： 原生的JavaScript由于兼容性问题比较麻烦于是就产生了一些库 - > jQuery 之类的类库 但是渲染页面不是很方便，于是就出现了一些模板引擎 - > 前端模板引擎 主要解决了DOM的操作-> Angular.js/ Vue.js/ React.js 这些框架解决了DOM的一些不必要操作，比如重复渲染，提升了性能与效率;
-
个人： 提升自身能力，从而提升市场竞争力。
双向数据绑定的概念
出发点：通过框架提供的指令，前端程序员只需要关心数据的业务逻辑，不在关心DOM是如何渲染的了。
框架和库的区别
框架
是一套完整的解决方案，对项目的侵入性交大，项目如果需要更换框架，则需要重新架构整个项目。
库（插件）
提供一个小的功能，对项目的侵入性比较小，如果某个库无法完成某些需求，可以很容易切换到其他库，比如：
- 从jQuery切换到Zepto
- 从EJS 切换到 art-template
MVC 和MVVM
MVC
MVC是后端的分层开发概念
M - model 处理数据CRUD
V - view 视图层
C - controller 控制层，处理业务逻辑
以Node.js为例：
app.js 是项目的入口模块，一切的请求入口，无路由分发的功能需要调用router.js模块进行路由的分发处理；
controller层：
-
router.js 是路由分发处理模块，只负责路由分发不处理业务逻辑，业务逻辑需要调用controller模块进行处理；
-
Controller 业务逻辑处理层，该模块封装了一些具体业务逻辑处理的操作，只负责处理业务，不处理数据的CRUD，对数据的CRUD需要调用Model层
Model层： 只负责操作数据库，执行sql语句，进行数据的CRUD(create read update delete)
View视图层： 用户界面
MVVM
MVVM是前端视图层的概念，主要是吧每个页面都分成了 M、 V 、VM，VM 是V和M之间的调度者。
M - - 保存的是每个页面中单独的数据（如：ajax访问接口返回的数据）；
V - - 就是每个页面的HTML代码；
VM - - 分割了M 和 V ，V层获取和保存数据都要通过VM层做中间处理
MVVM提供了数据的双向绑定，数据的双向绑定是由VM提供的。
Vue的使用方法
-
下载Vue.js 并引入
<script scr="vue-x.x.x.js">script> -
创建页面中需要Vue控制的区域，然后创建Vue实例
<body> <div id="app"> <p> { {msg}} p> div> <script> //这里的vm就是MVVM 中的VM调度者 上面的区域就是 V var vm = new Vue({ el: '#app',//el 是element 当前Vue实例要控制页面上的区域 id data: { // 存放的是 el中需要要用到的数据 这里 的data 就是当前页面的数据 (M) msg: 'hello Vue' // 通过Vue提供的指令，就能渲染到页面上，不再手动操作DOM元素了,只需要在上面的p标签中写{ {msg}}就可以了 }) script> body>
1.v-cloak
v-cloak 主要是解决插值表达式的闪烁问题（网速比较慢时上面代码{ {msg}}会出现在页面上，只有网络请求完成时才会消失，也就是插值表达式占位问题）注：这条学习视频是2017年10月的，现在是2020年5月试了一下不加v-cloak也不会出现闪烁，不知道是不是最新版的vue.js解决了该问题
使用方法：
<style>
[v-cloak] {
/*在此处设置display 设置为none*/
display: none;
}
style>
<body>
<p v-cloak>
{
{msg}}
p>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello Arvin"
}
});
script>
body>
2.v-text
v-text 和 { {}} 插值表达式展示效果一样，只是v-text是作为元素的属性使用，且v-text不会出现闪烁（上述占位）的问题
<p v-text="msg">
p>
但是v-text会覆盖掉元素标签包裹的内容，比如：
<p v-text="msg">
sdgasdgadsgasdgads
p>
<p>
sdgasdga{
{msg}}sdgasdg
p>
v-text和插值表达式 渲染时，只会按照字符串的方式原样渲染，比如说数据为"
hello h1
",渲染时并不是一级标题，页面展示还是"
hello h1
"
3.v-html
有上述的v-text和插值表达式不能渲染html标签元素，所以如果想渲染html元素的话，就需要使用v-html属性，比如：
<div v-html="msg2">
div>
vue 实例的data中有如下一个字段：
msg2: "<h1>Hello h1h1>"
此时页面渲染展示的是一级标题Hello h1
v-html和v-text一样也会覆盖掉当前元素包裹的文字信息
4.v-bind Vue提供的属性绑定机制，缩写为":"
v-bind是Vue中提供的用于绑定属性的指令，它后面跟的内容可以是一个合法的js表达式。比如给一个按钮设置title值，button的title属性是鼠标悬停在按钮上的提示语内容：
<input type="button" value="按钮" v-bind:title="mytitle"/>
<script>
var vm = new Vue({
el: "#app",
data: {
mytitle: "我是自定title"
}
});
script>
通过给input标签的title属性前加上 v-bind: 后就实现了 title属性跟 mytitle变量值之间的一个绑定，会把等号后面的内容当做一个js表达式来执行的，比如 v-bind:title = “mytitle+‘Hello’”。鼠标悬停的时候会出现提示“我是自定titleHello”
上面的书写方式可以简写，简写方式：v-bind:title 可以写为 :title , 因此‘’v-bind:属性名称‘’只需要一个冒号紧跟着需要绑定的属性名称就搞定了。
5.v-on 事件绑定 vue提供的事件绑定机制，缩写为 “@”
Vue中使用v-on实现事件的绑定机制，后面跟的是你需要调用的方法的方法名称，一点击事件click为例
<input type="button" value="按钮" v-on:click="show">
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: 'sdgasd'
},
methods: {
//Vue 对象中的methods属性中定义了Vue实例所有可以调用的方法
show:function(){
alert("Hello myshow")
}
}
});
script>
当然还可以添加其他的常用事件如mouseover等等。v-on:可以缩写为@ 比如 v-on:click 缩写为@click
事件修饰符
- .stop 阻止冒泡 使用方式 ，例如点击事件 @click.stop 这样就阻止了事件冒泡
- .prevent 阻止默认事件 比如阻止a标签的跳转行为，只触发点击事件不跳转，可以设置 @click.prevent=“linkClick”
- .capture 添加事件侦听器时使用事件捕获模式 ,作用是从外向内捕获，比如点击外层div想触发内部按钮的点击事件，只需要将div的点击事件设置为 @click.capture 这样，div点击事件触发后，也会触发其包裹的按钮的事件了。
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 ，作用是只有触发了自己的事件才会执行，不管冒泡和捕获都不执行， 比如给div加了@click.self 这时点击没有做阻止冒泡修饰的按钮时，不会发生div的事件被触发的事情，也就是说，该修饰符，实现了对当前元素阻止冒泡和阻止捕获的行为。
- .once 事件只触发一次 使用该修饰符，只会触发一次事件处理函数，事件修饰符是可以串联的，比如上面的a标签可以设置只有一次触发事件函数时是阻止默认事件的@click.prevent.once，这样第一次点击时触发事件处理函数且不跳转，再点击时就不触发事件处理函数，且跳转到指定链接了。
6.vue 示例中的属性和方法调用
如果想在vue示例中获取data的数据或者methos中的方法，必须通过this.属性名或方法名才能访问到，这里的this就是new出来的Vue实例对象。
vm实例会见厅自己的data中所有数据的改变，如果数据发生改变就会自动把最新的数据同步到页面中去，无需考虑手动dom操作来渲染页面。
<div id="app">
<input type="button" value="开始" @click="start">
<input type="button" value="停止">
<h4>{
{msg}}h4>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '跑马灯效果的文字。。。！',
intervalId: null//在data中定义定时器的id
},
methods: {
start() {
if (this.intervalId != null) {
return;
}
this.intervalId = setInterval(() => {
//箭头函数可以改变this的指向，让内部的函数的this指向外部的this
var sta = this.msg.substring(0, 1);
var end = this.msg.substring(1);
this.msg = end + sta;
}, 400);
},
stop() {
if (this.intervalId != null)
clearInterval(this.intervalId);
this.intervalId = null;
}
}
});
script>
Vue指令之v-model 双向数据绑定
v-bind 只能实现数据的单向绑定，v-bind:value=“msg” ,从M自动绑定到V ，无法实现数据的双向绑定
只需要将表单元素中设置v-model=“msg” 不要写成：v-model:value="msg"这样就实现了数据的双向绑定，表单元素内容被修改后
所以，通过v-model可以实现表单元素和Model中数据的双向数据绑定。即View中的数据改变会自动改变Model的数据，然而Model的数据会自动更改View中的数据。
注意：v-model智能运用在表单元素中（input(radio,text,address,email…) / select / checkbox / textarea）
在Vue中使用样式
1.使用v-bind对class属性进行绑定
- 数组 ：数组中元素是类名，必须要用双引号包裹数组，数组元素是类名，类名要用单引号
<h1 :class="['red','thin']">H1h1>
- 数组中使用三元表达式：
<h1 :class="['red',falg?'active':'']">h1> 判断flag为true的时候使用active样式，false的时候不用,是空
- 数组中嵌套对象代替三元表达式，增强可读性
上面的三元表达式方式还可以写成对象的方式，如下面的方式：
在数组中使用对象来代替三元表达式：
<h1 :class="['red',{
'active':flag}]">h1>判断flag为true的时候使用active样式
- 直接使用对象
<h1 :class="{red:true,italic:true,active:true,thin:true}">h1>
使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号可不带引号，所以这里就没写引号。属性的值是一个标识符
或者可以写成如下的方式：
<h1 :class="classObject">h1>
<script>
vue 实例中的data中的数据：
data:{
classObject = {
red:true,italic:true,active:true,thin:true}
}
script>
2.使用内联样式
- 直接在元素上通过:style(即v-bind:style) 的形式属性样式对象，注意如果属性名称里有短横线，该属性一定要加单引号，为了防止出错，就都加单引号就好了。
<h1 :style="{
'color':'red','font-size':'24px','font-weight':'200'}">
This H1
h1>
- 将样式队形，定义到data中直接使用:style进行应用即可：
-
在data中定义样式对象
data: {
styleObj: {
{
'color':'red','font-size':'24px','font-weight':'200'}}
}
-
在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="styleObj">Hello H1h1>
- 在 :style 中通过数组引用多个data上的样式对象：
-
在data中定义样式：
data: {
styleObj: {
'color':'red','font-size':'24px','font-weight':'200'},
styleObj2: {
'font-style':'italic'}
}
-
在元素中通过属性绑定的形式引用：
<h1 :style="[styleObj, styleObj2]"> Hello H1h1>
v-for指令
1.v-for 遍历普通数组
<p v-for="item in list">
{
{item}}
p>
<script>
data:{
list:[1,2,3,4]
}
script>
2.v-for可以遍历对象数组：
<p v-for="(item , i) in list">
姓名： {
{item.name}} ， 索引 ： {
{i}}
p>
<script>
data:{
list : [
{
name:'sagda',age:16},{
...}
]
}
script>
3.v-for 可以遍历对象：
<p v-for="(val,key) in user">
键：{
{key}} ---- 值： {
{val}}
p>
<script>
data: {
user: {
id: 1,
name: 'Hesa',
gender: 'man'
}
}
script>
4.v-for 迭代数字
从上面我们看v-for中的in后面可以是普通数组，对象数组，对象，它后面还可以直接跟数字，表示循环的次数,默认循环开始值为1，不是0：
<p v-for="count in 10">
这是第{
{count}} 次循环
p>
5.v-for 总key使用的注意事项
在2.2.0+ 的版本，当在组件中使用v-for时，key是必须的,主要是为了实现列表项的唯一性标识。
1.v-for 循环的时候，key属性只能使用number 或 string；
2.key在使用的时候必须使用v-bind: 属性绑定 即:key=""
如下：
<p v-for="item in list" :key="item.id">
<input type="checkbox">{
{item.id}} ---- {item.name}
p>
加上key主要是为了标识列表项的唯一性，比如说多选框错位问题。
v-if 和 v-show
<input type="button" value="显示/隐藏" @click="flag=!flag">
<h3 v-if="flag">v-if H3h3>
<h3 v-show="flag">v-show H3h3>
<script>
data: {
flag:true
}
script>
- v-if 每次都会重新删除/创建元素 , 切换性能消耗高，如果元素涉及到频繁的切换，最好不用v-if
- v-show 不会进行dom的删除和创建操作，只是切换了元素的display:none样式， 有较高的初始渲染消耗。
1.列表的增删例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="lib/vue.js">script>
<link rel="stylesheet" href="lib/bootstrap.css">
head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"> 添加品牌h3>
div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" name="" class="form-control" v-model="id">
label>
<label>
Name:
<input type="text" name="" class="form-control" v-model="name">
label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
div>
div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Idth>
<th>Nameth>
<th>Ctimeth>
<th>Operationth>
tr>
thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{
{item.id}}td>
<td v-text="item.name">td>
<td>{
{item.ctime}}td>
<td><a href="" @click.prevent="del(item.id)">删除a>td>
tr>
tbody>
table>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{
id: 1, name: '奥迪', ctime: new Date() },
{
id: 2, name: '比亚迪', ctime: new Date() },
{
id: 3, name: '宝马', ctime: new Date() },
{
id: 4, name: '奔驰', ctime: new Date() },
{
id: 5, name: '哈弗', ctime: new Date() },
{
id: 6, name: '奇瑞', ctime: new Date() },
{
id: 7, name: 'Jeep', ctime: new Date() },
]
},
methods: {
add() {
//添加功能
this.list.push({
id: this.id, name: this.name, ctime: new Date() });
this.name = this.id = '';
},
del(id) {
//通过id删除数据
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1);//数组的i位置删除一个元素
return true;//在数组的some方法如果return true ，就会终止循环， 这里一旦找到，就终止循环
}
});
//还可以通过 数组的findIndex 来查找索引
/*
var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
});
console.log(index);
*/
}
}
});
script>
body>
html>
forEach 、 some 、 filter 、findIndex 这些都属于数组的新方法，都会对数组中的每一项进行遍历，执行相关的操作。
2.过滤器-列表例子完善
2.1过滤器定义
过滤器可被用作一些常见的文本格式化，Vue.js允许自定义过滤器，过滤器只可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部。
语法：
//过滤器调用 对那个变量格式化，变量名称 | 过滤器名称
{
{
paramName | 过滤器名称}}// 竖线也叫管道符号 ，可以添加多个过滤器，以管道符隔开 如 {
{pName | filter1 | filter2 | ...}},执行顺序从左到右依次执行
//定义过滤器的语法调用vue的filter方法，传入，过滤器名称，以及要处理数据的函数，函数中的第一个参数，是过利器管道符前面的数据
Vue.filter('过滤器名称'，function(data){
return data+'sdgsdgssd';
})
//比如对上述案例的日期格式化
{
{
item.ctime | timeFormate}}//过滤器名称其实就是一个函数，可以传参的， timeFormate('paa','sdgas')
Vue.filter('timeFormate',function(ctime){
//function(ctime,arg1,arg2,...)//除了第一个参数是固定的，后续可以自定义个数
});
2.2实现时间格式化：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="lib/vue.js">script>
<link rel="stylesheet" href="lib/bootstrap.css">
head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"> 添加品牌h3>
div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" name="" class="form-control" v-model="id">
label>
<label>
Name:
<input type="text" name="" class="form-control" v-model="name" @keyup.enter="add">
label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label for="">
搜索名称：
<input type="text" name="" id="" class="form-control" v-model="keywords">
label>
div>
div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Idth>
<th>Nameth>
<th>Ctimeth>
<th>Operationth>
tr>
thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{
{item.id}}td>
<td v-text="item.name">td>
<td>{
{item.ctime | dateFormat}}td>
<td><a href="" @click.prevent="del(item.id)">删除a>td>
tr>
tbody>
table>
div>
<script>
Vue.filter('dateFormat', function (dateStr) {
var dt = new Date(dateStr);
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
// return y + '-' + m + '-' + d;
return `${
y}-${
m}-${
d}`;//模板字符串， tab键上方的键输入的两撇
});
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',
list: [
{
id: 1, name: '奥迪', ctime: new Date() },
{
id: 2, name: '比亚迪', ctime: new Date() },
{
id: 3, name: '宝马', ctime: new Date() },
{
id: 4, name: '奔驰', ctime: new Date() },
{
id: 5, name: '哈弗', ctime: new Date() },
{
id: 6, name: '奇瑞', ctime: new Date() },
{
id: 7, name: 'Jeep', ctime: new Date() },
]
},
methods: {
add() {
//添加功能
this.list.push({
id: this.id, name: this.name, ctime: new Date() });
this.name = this.id = '';
},
del(id) {
//通过id删除数据
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1);//数组的i位置删除一个元素
return true;//在数组的some方法如果return true ，就会终止循环， 这里一旦找到，就终止循环
}
});
//还可以通过 数组的findIndex 来查找索引
/*
var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
});
console.log(index);
*/
},
search(keywords) {
/*
var newList = [];
this.list.forEach(element => {
if (element.name.indexOf(keywords) != -1) {
newList.push(element);
}
});
return newList;
*/
return this.list.filter(item => {
if (item.name.includes(keywords)) {
//ES6 中，字符串新方法： String.prototype.includes('包含的字符串')， true包含，false不包含 jquery 中提供的是contains方法
return item;
}
});
}
}
});
script>
body>
html>
2.3自定义局部过滤器
上述过滤器是全局的，也就是说不只是一个vue实例可以使用，其他的vue实例也可以使用，当然如果想让某个vue实例才能使用的话，就需要自定义一个局部的过滤器
var vm = new Vue({
el:'#app',
data: {
dt: new Date()
},
methods: {
},
filters: {
//这就是局部过滤器，或者叫该vue实例私有的过滤器
//过滤器有两个条件 [过滤器名称 和 处理函数]
dateFormat: function(dateStr,param1){
//处理函数的内容同上
}
}
});
过滤器调用的时候如果有两个同名的过滤器，一个是私有的一个是全局的，那么它会调用自己私有的，不会调用全局的。
2.4字符串填充 ES6
使用ES6中的字符串新方法String.prototype.padStart(maxLength,fillString=’’) 头部填充或 String.prototype.padEnd(maxLength,fillString=’’) 尾部填充来填充字符串。
var m = (dt.getMonth() + 1).toString().padStart(2,'0');//这样就实现了月份是两位数字了
var d = dt.getDate().toString().padStart(2,'0');//小于10的日期天也被填充成两位数字了
3.按键码 按键修饰符
keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
除了用上述Vue给的这些按键修饰符，我们还可以自定义全局按键修饰符。
Vue.config.keyCodes.f2 = 113;//此时就可以使用
//html中使用：
Name:
<input type="text" name="" class="form-control" v-model="name" @keyup.f2="add">
4.自定义指令
比如说现在要自定义一个v-focus 指令，来让某个input自动获取焦点，比如定义全局的指令v-focus，其中第一个参数是指令的名称，且不需要在指令的名称前面加“v-” 前缀，在调用的时候，必须在指令名称前加上“v-”前缀。第二个参数是一个对象，这个对象有一些质量相关的函数，这些函数可以在指定的阶段执行相关的操作。
<script>
Vue.directive('focus',{
bind: function(el) {
//el是绑定到的元素，在这些函数（当前以及下面的函数）中，第一个参数，都是el，表示被绑定了指令的元素，它是一个原生的jsDOM对象。
//当指令绑定到元素上时，执行，只执行一次
//el.focus();//但是当前方法调用后没有任何作用，原因是，在元素刚绑定指令时，还没有插入到内存中的DOM树中去，所以没反应。只有当元素插入DOM之后才能获取焦点。
},
inserted: function(el) {
//当元素插入到DOM重视会执行，只执行一次,
el.focus();//此时元素已经插入到DOM中，所以可以看到效果。
},
updated: function(el) {
}//当VNode更新时，会执行，可执行多次
});//定义全局的指令
script>
//调用
<label for="">
搜索名称：
<input type="text" name="" id="" class="form-control" v-model="keywords" v-focus>
label>
4.1钩子函数：
4.1.1指定定义函数提供了几个钩子函数（可选）：
- bind： 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作；和样式相关的操作可以在bind中执行，因为浏览器的渲染引擎会解析样式渲染到该元素。
- inserted：被绑定元素插入父节点时调用（附加点存在即可调用，不必存在于document中）； 和js行为有关的操作最好在inserted中执行，防止效果不生效。
- update：所在组件的VNode更新时调用，但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
- componentUpdated： 所在组件的VNode及其孩子的VNode全部更新时调用。
- unbind： 只调用一次，指令与元素解绑时调用。
4.1.2钩子函数的参数
- el : 指令所绑定的元素，可以用来直接操作DOM；
- binding ： 一个对象，包含如下属性：
- name：指令名，不包括 v-前缀；
- value ： 指令的绑定值，例如： v-my-directive=“1+1” ， value 的值是2；
- oldValue： 指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
- expression：绑定值的字符串形式。例如 v-my-directive=“1+1” ，expression的值是“1+1”。
- arg：传给指令的参数。例如：v-my-directive:foo，arg的值是“foo”。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar，修饰符对象modifiers的值是(foo:true,bar:true)。
- vnode：Vue编译生成的虚拟节点，查阅VNode API可以了解更多详情。
- oldVode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
html 元素中使用 v-color="'blue'"
--------------------------------
Vue.directive('color',{
bind:function(el,binding){
console.log(binding.value);// 表达式的计算结果 -- blue
console.log(binding.expression);// 表达式 -- 'blue'
console.log(binding.name);// 名称 -- color
el.style.color = binding.value;//设置样式颜色
}
})
4.2 私有的自定义指令
var vm = new Vue({
el:'#app',
data: {
dt: new Date()
},
methods: {
},
filters: {
//这就是局部过滤器，或者叫该vue实例私有的过滤器
//过滤器有两个条件 [过滤器名称 和 处理函数]
dateFormat: function(dateStr,param1){
//处理函数的内容同上
}
},
directives: {
//自定义私有指令 [指令名称 对象（包含了函数）]
'fontweight': {
bind:function(el,binding){
el.style.fontWeight = binding.value;
}
}
}
});
//----------------------
html元素中使用时：
v-fontweight="900"
4.3 函数简写
大多数情况下，我们可能想在bind和update钩子上做重复动作，并且不希望关心其他的钩子函数，可以写成如下方式:
Vue.directive('color-swatch',function(el, binding){
el.style.backgroundColor = binding.value;
});
//私有：
directives: {
//自定义私有指令 [指令名称 对象（包含了函数）]
'fontweight': {
bind:function(el,binding){
el.style.fontWeight = binding.value;
}
}，
//私有
'fontsize':function(el,binding) {
//这个function等同于，bind和update中都写了
el.style.fontSize = binding.value;
}
}
5.Vue实例的生命周期
从vue实例创建、运行、到销毁期间总是伴随着各种各样的事件，这些事件统称为生命周期。
生命周期钩子： 就是生命周期事件或者生命周期函数的别名而已；
var vm = new Vue({
el: '#app',
data: {
},
methods:{
},
beforeCreate(){
//生命周期中的第一个函数，vue实例在完全创建出来之前会执行该函数
},
created(){
//第二个生命周期函数
//此时data 和methods 都已经被初始化了
},
beforeMount(){
//第三个声明周期函数 模板已编译完成，只是未挂载到页面中去
console.log(document.getElementById('h3').innerText);//此时输出的是{
{msg}}而不是msg的值
},
mounted(){
//第四个生命周期函数 此时内存中的模板，已经挂载到了浏览器页面中了，用户此时已经可以看到渲染好的页面了
console.log(document.getElementById('h3').innerText);//此时输出的是msg的值'OK'，而不是插值表达式了
},
//接下来是运行期间的两个周期函数
beforeUpdate(){
//数据更新时，且发生在更新之前
console.log('界面上元素的内容：'+document.getElementById('h3').innerText);//此时输出的依旧是没改变之前的数据
console.log('data中的msg数据是：'+this.msg);//此时已经是改变后的数据了
},
updated(){
//数据更新后，页面和data数据已经同步为最新了
console.log('界面上元素的内容：'+document.getElementById('h3').innerText);//此时已经是改变后的数据了
console.log('data中的msg数据是：'+this.msg);//此时已经是改变后的数据了
}
});
主要的生命周期函数分类：
5.1 创建期间的生命周期函数：
5.1.1 beforeCreate()
在该函数体内操作时，此时data和methods都还没有被执行初始化
5.1.2 created()
在该函数体内，data和methods已经被初始化了，也就是说data和methods最早被使用的时候是在created()方法中。
5.1.3 beforeMount()
在该函数执行的时候，页面中的元素的内容并没有被替换过来，只是之前写的一些模板字符串，即如果我们想获取元素的内容，我们拿到的只是插值表达式，而不是值内容。
5.1.4 mounted()
实例创建期间的最后一个周期函数，执行完mounted就表示，实例已经完全被创建好了，此时如果没有其他操作的话，这个实例就会在内存中不动了。
5.2 运行期间的生命周期函数：
5.2.1 beforeUpdate()
一旦数据发生改变时就会先触发该事件，且页面中显示的数据还是旧的，但是此时data中的数据是最新的，页面和最新的数据尚未同步。
5.2.2 updated()
此时页面中的数据和data中的数据已经都是最新的了，保持同步了
5.3 销毁期间的生命周期函数：
5.3.1 beforeDestroy()
此时vue实例中的数据、方法、指令、过滤器等都还可用，没有被销毁
5.3.2 destroyed()
此时vue实例已被销毁，实例中的东西均不可用。
6.vue-resource实现get，post，jsonp请求
除了使用vue-resource之外，还可以使用“axios”的第三方包实现数据的请求
测试URL请求资源地址：
get请求： http://vue.studyit.io/api/getlunbo
post请求：http://vue.studyit.io/api/post
jsonp请求地址： http://vue.studyit.io/api/jsonp
methods: {
getInfo(){
this.$http.get(getUrl).then(function(result){
//get() 第二个参数是请求参数，可不传
console.log('result='+result);
});
},
postInfo(){
//手动发起的post请求，默认没有表单格式，服务器处理不了，所以需要给post的第三个参数设置提交的内容类型，现在设置为普通表单数据格式 application/x-wwww-form-rulencoded
this.$http.post(postUrl,{
name,this.name},{
emulateJSON:true}).then(result => {
//post()第二个参数，是要传给接口的参数
console.log(result);
});
}，
jsonpInfo(){
this.$http.jsonp(jsonpUrl).then(result => {
console.log(result);
});
}
}
全局设置根路径的方式：
Vue.http.options.root = 'http://vue.studyit.io/';
//如果通过全局配置根路径，请求的数据接口根域名则每次单独发起http请求的视乎url路径应该以相对路径开头，并且前面不能带'/'否则不会启用根路径做拼接。
this.$http.get('api/getprodlist').then(result=>{
});//这里的是相对路径，并且url不能以'/'开始。
还可以配置emulateJSON为全局的省去每次的post还要传这个参数
Vue.http.options.emulateJSON = true;
this.$http.post(postUrl,{
name,this.name}).then(result => {
//post()第二个参数，是要传给接口的参数
console.log(result);
});