初识vue.js
1.构建数据驱动的web应用开发框架。
2.
声明式渲染：应对前后端分离的大趋势，一般后端只给数据，一般都是json，我们只需要操作数据，就可以让页面改变。
渐进式框架：适应各种行业需求以及场景。
快速交付：结合第三方UI框架。
企业需求：必备技能。
3.MVC,MVP,MVVM 架构模型对比
"MVC":Contronller：薄,view：厚，业务逻辑大部分部署在View。
"MVVM":双向数据绑定，View的变动，映射在ViewModel上，反之一样。
"MVP":View薄，不绑定任何业务逻辑，称为“被动视图”(Passive View),Presenter：厚，逻辑业务都部署在这。
4.对比其他框架(angular，react)
开发环境搭建(vue.js 2.*)
声明式渲染=》组件系统=》路由机制=》状态管理=》。。
模板语法
1.插值
1.文本：
<div id="box" > {{name}} </div>
var vm = new Vue({//在浏览器的控制台可以访问vm，并且改变vm.name的值，这就是vue的响应式访问。 el:"#box", data:{ name:"xiaoming",} })
2.纯HTML： v-html 防止XSS，如果要实现内容里面的html标签，则要在html相应的元素上加上v-html="vhtmltest"指令，v-html=""指令的值则对应相应的数据属性。但是如果要使用这种动态的渲染html元素，会非常容易受到XSS的攻击。请只对可信的内容进行差值，而不要对用户提供的内容进行差值。
<span v-html="vhtmltest"></span>
data:{ vhtmltest:'<b>v-html</b>', }
3.表达式：
<span>{{10 + 20}}</span>，<span>{{10 > 20 ? 20 : 10}}</span>
2.指令：是带有 v-前缀的特殊属性
v-for:数组转化成元素。
v-show：动态隐藏和显示
<p v-show="isShow">v-show动态隐藏和显示</p>
data:{ isShow:true, }
v-html：实现内容里面的html标签
v-bind：指令被用来响应地更新 HTML 元素的属性
<p v-bind:class="isShow?'box':'box2'">普通class属性vue指令绑定进行三目运算</p><!-- 如果是普通的属性要使用三目表达式或者其他运算表达式的时候，也需要用到指令绑定才行 -->
data:{ isShow:true, }
v-if：根据值的true或者false来动态创建和删除，v-if是真正的条件渲染，也是惰性的，如果条件渲染一开始就是假，则什么也不做，直到条件变成真为止。而v-show则是必然会渲染dom节点，只是显示或者隐藏效果,
<p v-if="isShow">v-if动态创建和删除</p>
data:{ isShow:true, }
v-else：如果if不成立，则走else块
<p v-if="isShow">ok</p> <p v-else>else ok</p>
data:{ isShow:true, }
用template结合v-if条件渲染一整组,我们可以把template包装一整组，最终的渲染并不会包含template元素。
<template v-if="isShow"> <p>111</p> <p>111</p> <p>111</p> </template>
v-on:click ：点击实现Vue methods方法
<button @click="handleClick">点击实现vue methods方法</button>
methods:{ handleClick:function(){ this.name = 'aaa'; this.isShow = false; },
v-model:双向数据绑定指令，它是MVVM架构的最明显的特征，可以设定元素的值，元素的值反过来还可以影响设定的值，例子
<p>单价：<input type="text" v-model="price"></p>{{price}}，还可以在data里设置price的值
3.缩写
v-bind:src => :src
v-on:click => @click
计算属性和观察者
1.计算属性
模板内的表达式是非常便利的，但是他们实际上只用来简单的计算。在模板内加入过多的逻辑，不利于维护，不推荐。例如
<div id="example">
{{message.split('').reverse().join('')}}
</div>
在这个地方，模板不再简单和清晰，你需要看一段时间才能意识到，这里是想要显示变量message的翻转字符串，当你想要在模板中多次引用这个翻转字符串的时候，就会更加难以处理。
这就是对于任何复杂逻辑，你都要使用计算属性的原因。
就算依赖的值改变了，计算属性也会自动改变，重新计算一遍，
computed:{//计算属性
upperWord:function(){
return this.name.substring(0,1).toUpperCase() + this.name.substring(1);
}
}
2.计算缓存和methods
计算属性是根据他们的依赖进行缓存的，计算属性根据依赖的属性改变而改变。方法也能够实现计算属性，但是如果多次调用方法，方法将会多次调用，而计算属性可以只运行一次，因为计算可以被缓存。
3.计算属性和watch
vue提供了一个更通用的方式来观察和响应VUE实例上的数据变动，watch属性。当你有些数据需要随着其他数据变动而变动时，你很容易滥用watch--特别是特别是你之前使用过angularJS。然而，通常更好的想法是使用计算属性而不是命令式的watch回调，例如
watch: {
price:function(val){//名字要对应data中的price，来实现监听
this.sum = val * this.number;
},
number:function(val){//名字要对应data中的number，来实现监听
this.sum = val * this.price;
}
},
计算属性来实现，因为计算属性是依赖值的改变而改变，否则就缓存，所以效率更好，资源利用率更高。
getsum:function(){
return this.price * this.number;
}
4.计算setter.
计算属性默认只有getter，vue的methods方法可以进行传入参数操作，所以计算属性也提供了一种setter用法，不过一般计算方法只需要get值就行了，一般不用setter方法。
getData:{
get:function(){
return 'hello world'//get值是固定的。
},
set:function(val){
console.log(val);//在浏览器控制台输入vm.getData='222'就可以实现setter方法。
}
}
class与style动态绑定
可以用v-bind进行处理，只需要计算出表达式的最终字符串。不过字符串的拼接麻烦又容易出错，vue.js加强了这方面，表达式的结果类型除了字符串，还可以是数组和对象，
列表渲染
1.v-for
用v-for把一个数组对应成一组元素，需要用 item in items形式的特殊语法，items代表源数据数组并且item是数组元素迭代的别名。
of和in原理上没有多大的差别
a:in <li v-for="data in dataList">用v-for来实现数组转化成元素{{data}}</li>
b:of <li v-for="(data,index) of dataList">{{index}}用v-for来实现数组转化成元素,index表示下标{{data}},</li>
2.key
跟踪每个节点的身份，从而重用和重新排序现有的元素
这里作为例子用index下标做了key值，实际应用中最好不要用，最好在对象中有一个专门的id值作为key，来让我们认识和复用元素。
<li v-for="(data,index) of dataList" :key="index">{{index}}用v-for来实现数组转化成元素,index表示下标{{data}}</li>
理想的key值是每一项都有的且唯一的id。
3.数组更新检测
1.使用以下方法操作数组，可以检测变动，会热更新DOM节点元素，在控制台中输入vm.dataList.push("eee");
push(),pop(),shift(),unshift(),splice(),sort(),reverse(),
2.filter(),concat(),slice(),map(),新数组代替旧数组,这些方法Vue检测不到数组的变动，所以不会对元素DOM节点有所改变,但如果重新赋值，则可以。
控制台输入vm.dataList = vm.dataList.map((item)=>"xiaoming" + item)，item代表遍历数组里面的每一个元素。
3.这里需要特别注意，不能检测以下变动的数组，
vm.items[indexOfItem] = newValue//用下标去更新数组内容，虽然数组内容发生了改变，但是DOM节点元素并不会更新。
解决办法： Vue.set(vm.dataList,0,'newValue')
或者用splice增删改的方法。 vm.dataList.splice(0,1,'newItem')
4.
应用：显示过滤结果
使用计算属性。
可以直接到data里面取值 <ul><li v-for="data in dataList">{{data}}</li></ul>
也可用计算属性的方法来实现，效果是一样的<ul><li v-for="data in computedDataList">{{data}}</li></ul>
事件处理
监听事件
v-on
指令用来监听DOM元素来触发一些js的代码
1.监听事件-直接触发代码
<p>{{count}}</p>
<button @click="count = count - 1">-</button>
2.方法事件处理器-写函数名
<p>{{name}}</p>
<button @click="handleClick"></button>
methods:{
handleClick:function(ev){//ev代表这个元素本身
this.name = 'aaa';
console.log('ev.target');
},
3.内联处理器方法-执行函数表达式,可以传入参数,事件对象用$event来传，
<button @click="handleClick2('111','222',$event)"></button>
handleClick2:function(data1,data2,ev){
console.log(data1,data2,ev.target);
},
4.事件修饰符
在事件处理程序中，比如阻止冒泡，event.preventDefault()或event.stopPropagation()是常用的，虽然methods也可以实现，但更好的方法是：让methods实现纯粹的数据逻辑，而不是去处理DOM元素。
Vue.js提供了v-on的事件修饰符，通过.指令后缀来调用修饰符
.stop 阻止冒泡
<ul @click="handleUlClick">
<li @click.stop="handleLiClick">111</li>
<li>222</li>
<li>333</li>
</ul>
.prevent 阻止默认行为
<form @submit.prevent="onSubmit">
修饰符可以串联
<form @submit.stop.prevent="onSubmit">
只有修饰符
<form @submit.prevent>
.capture 捕获事件
.self 只有点击到了元素自身区域才能触发。
<ul @click.self="handleUlClick">
<li @click="handleLiClick">111</li>
<li>222</li>
<li>333</li>
</ul>
.once 只触发一次
<li @click.once="handleLiClick">111</li>
5.按键修饰符
事件中，我们常要检测常见的键值，Vue允许v-on指令在监听时添加关键修饰符。
.enter .tab .delete(捕获删除和退格键) .esc .space .up .down .left .right
<input type="text" @KeyUp.enter="handleEnter" placeholder="enter之后方法才能调用">
<span>{{10 + 20}}</span>，<span>{{10 > 20 ? 20 : 10}}</span>