一、什么是 Vue
Vue 是一个用于构建用户界面的渐进式的js框架，Vue 的核心是MVVM双向数据绑定模式及组件化开发，它使得开发前端不仅易于上手，还便于与Vue的优良生态或既有项目整合。
二、快速开始
1.在页面引入vue的js文件即可。
注意：cdn是一种加速策略，能够快速的提供js文件
2.在页面中绑定vue元素
创建一个div，id是app
3.创建vue对象，设计对象的内容
其中该vue对象，绑定了页面中id是app的那个div
4.在页面的元素中使用插值表达式来使用vue对象中的内容
三、 插值表达式
插值表达式的作用是在View中获得Model中的内容
1.插值表达式
new Vue({el:"#app",data:{title:"hello world!"},methods:{sayHello:function(){return "hello vue";}}});
2.MVVM双向数据绑定：v-model
3.事件绑定: v-on
v-on叫绑定事件，事件是input，响应行为是changeTitle。也就是说，当input元素发生输入事件时，就会调用vue里定义的changeTitle方法
new Vue({el:"#app",data:{title:"hello world!"},methods:{sayHello:function(){return "hello vue";},changeTitle:function(){console.log("ct");//往日志里写}}});
event.target.value == 当前事件的对象（input元素）的value值注意：此时的this指的是当前vue对象。
所以：如果在method里要想使用当前vue对象中的data里的内容，必须加上this.
changeTitle:function(event){this.title = event.target.value;}
4.事件绑定简化版：使用@替换v-on:
5.属性绑定： v-bind
html里的所有属性，都不能使用插值表达式
baidunew Vue({el:"#app",data:{title:"hello world!",link:"http://www.baidu.com" }, ...
上面的这种做法是错误的，可以使用绑定属性绑定来解决：
要想在html的元素中的属性使用vue对象中的内容，那么得用v-bind进行属性绑定
6.v-once指令
指明此元素的数据只出现一次，数据内容的修改不影响此元素
{{titile}}
7.v-html
就好比是innerHTML
new Vue({el:"#app",data:{title:"hello world!", link:"http://www.baidu.com",finishedlink:"百度"}, ...
8.v-text
纯文本输出内容
四、事件
1.事件绑定范例
范例一：
{{counter}}
new Vue({el:"#app",data:{counter:0 },methods:{increase:function(){this.counter++;},...
范例二：
mooooooo
mo:function(event){console.log(event);}
范例三：
mx:{{x}}my:{{y}}
new Vue({el:"#app",data:{counter:0,x:0,y:0,},methods:{increase:function(){this.counter++;},mo:function(event){this.x = event.clientX,this.y = event.clientY}} });
2.参数传递
... methods:{increase:function(step){this.counter+=step;},...
传多个参数：
...methods:{increase:function(step,event){this.counter+=step;},...
3.停止鼠标事件
mx:{{x}}my:{{y}}---停止鼠标事件
dummy:function(event){event.stopPropagation();}
另一种方式：
停止鼠标事件
4.事件修饰符
输入回车键时提示
输入空格时提示
五、vue改变内容 虚拟dom和diff算法
1.插值表达式的方式
范例一：
{{ count>10？"大于10","小于10"}}
范例二：
{{result}}
new Vue({el:"#app",data:{counter:0,result:""},methods:{increase:function(step){this.counter+=step;this.result=this.counter>10?"大于10":"小于10"},}});
2.computed的用法
{{counter}}{{counter>10?"大于10":"小于10"}}
result:{{result}}
getResult:{{ getResult() }}
getResultComputed:{{ getResultComputed}}
computed的函数第一次调用后会被加入到内存中。
computed内的函数使用时不用带小括号
computed的函数指的是被动调用，method是主动去触发他里面的函数，computed指的是你去使用这个函数
computed是一个属性计算函数，比如用来计算div的宽度和高度，div的宽度和高度一直在变，但computed中的该函数本身没有变，所以可以把函数写在computed中。
3.watch的用法：监控
watch用于监控参数的变化，并调用函数，newVal是能获得参数新的值，oldVal是参数老的值。
new Vue({el:"#app",data:{counter:0,result:""},methods:{increase:function(step){this.counter+=step;//this.result=this.counter>10?"大于10":"小于10"},getResult:function(){return this.counter>10?"大于10":"小于10"}},computed:{getResultComputed:function(){return this.counter>10?"大于10":"小于10"}},watch:{counter:function(newVal,oldVal){this.result=newVal>10?"大于10":"小于10"}}});
watch的高端用法：一秒后让count归为0，体现了vue的双向绑定
watch:{
counter:function(newVal,oldVal){
this.result=newVal>10?"大于10":"小于10";
var vm = this;//当前data
setTimeout(function(){
vm.counter = 0;
},1000);
}
}
六、vue改变样式
1.class的动态绑定
v-bind:class="{red:attachRed}"
键名是类名，键值是布尔，如果是true，则将指定的类名绑定在元素上，如果是false，则不绑定。
2.加入computed
new Vue({el:"#app",data:{attachRed:false},computed:{divClasses:function(){return {//返回一个json对象red:this.attachRed,blue:!this.attachRed}}}});
3.双向绑定的体现
在input中输入颜色，就可以设置div的class
7.设置style属性的多个样式
七、vue中的语句
1.分支语句
v-if
v-else-if
v-else
v-show: 实际上是让该元素的display属性为none,隐藏的效果。所以性能更好。
hahah
hohoho
hehehe
通过模板标签对多个元素进行同一的if和else管理
inside textheading
2.循环语句
vue中只有for循环
- {{str}}
改进版：for语句里，key建议加上，作为标识.i是下标
- {{str}}{{i}}
使用templete实现循环
{{str}}{{i}}
循环中操作对象
{{value}} {{k}}:{{v}}:{{i}}====
循环的另一种用法：
v-for="n in 10" //可以在分页组件中使用
八、总结
vue是以数据为驱动，渐进式的web框架，MVVM双向绑定，虚拟DOM为核心和diff算法，所谓的虚拟dom和diff算法，是指当页面内容发生变化时，只更新改变的部分，是通过虚拟dom和diff算法实现这样的操作，效率非常高。