一效览、什么是 Vue
Vue 是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式的js框架双仍，Vue 的核心是MVVM雙向數(shù)據(jù)綁定模式及組件化開(kāi)發(fā)，它使得開(kāi)發(fā)前端不僅易于上手，還便于與Vue的優(yōu)良生態(tài)或既有項(xiàng)目整合标沪。
二榄攀、快速開(kāi)始
1.在頁(yè)面引入vue的js文件即可。
注意：cdn是一種加速策略金句，能夠快速的提供js文件
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
2.在頁(yè)面中綁定vue元素
創(chuàng)建一個(gè)div檩赢，id是app<div id="app"></div>
3.創(chuàng)建vue對(duì)象，設(shè)計(jì)對(duì)象的內(nèi)容
其中該vue對(duì)象违寞，綁定了頁(yè)面中id是app的那個(gè)div
<script>new Vue({el:"#app",data:{title:"hello vue!", args1:"hi!", age:18, flag:true}});</script>
4.在頁(yè)面的元素中使用插值表達(dá)式來(lái)使用vue對(duì)象中的內(nèi)容
<div id="app">{{ title }}</div>
三贞瞒、 插值表達(dá)式
插值表達(dá)式的作用是在View中獲得Model中的內(nèi)容
1.插值表達(dá)式
<div id="app">{{title}}{{[1,2,3,4][2]}}{{ {"name":"xiaoyu","age":20}.age }}{{ sayHello()}}
new Vue({el:"#app",data:{title:"hello world!"},methods:{sayHello:function(){return "hello vue";}}});
2.MVVM雙向數(shù)據(jù)綁定：v-model
<div id="app">{{title}}{{[1,2,3,4][2]}}{{ {"name":"xiaoyu","age":20}.age }}{{ sayHello()}}<input type="text" v-model="title" /></div>
3.事件綁定: v-on
<input type="text" v-on:input="changeTitle" />
v-on叫綁定事件，事件是input趁曼，響應(yīng)行為是changeTitle军浆。也就是說(shuō)，當(dāng)input元素發(fā)生輸入事件時(shí)挡闰，就會(huì)調(diào)用vue里定義的changeTitle方法
new Vue({el:"#app",data:{title:"hello world!"},methods:{sayHello:function(){return "hello vue";},changeTitle:function(){console.log("ct");//往日志里寫}}});
event.target.value == 當(dāng)前事件的對(duì)象（input元素）的value值注意：此時(shí)的this指的是當(dāng)前vue對(duì)象乒融。
所以：如果在method里要想使用當(dāng)前vue對(duì)象中的data里的內(nèi)容，必須加上this.
changeTitle:function(event){this.title = event.target.value;}
4.事件綁定簡(jiǎn)化版：使用@替換v-on:
<input type="text" @input="changeTitle" />
5.屬性綁定： v-bind
html里的所有屬性摄悯，都不能使用插值表達(dá)式
<a href="{{link}}">baidu</a>new Vue({el:"#app",data:{title:"hello world!",link:"http://www.baidu.com" }, ...
上面的這種做法是錯(cuò)誤的赞季，可以使用綁定屬性綁定來(lái)解決：
要想在html的元素中的屬性使用vue對(duì)象中的內(nèi)容，那么得用v-bind進(jìn)行屬性綁定
<a v-bind:href="link">baidu</a>可以縮寫成 冒號(hào)<a :href="link">baidu</a>
6.v-once指令
指明此元素的數(shù)據(jù)只出現(xiàn)一次奢驯，數(shù)據(jù)內(nèi)容的修改不影響此元素
<p v-once>{{titile}}</p>
7.v-html
就好比是innerHTML
<p v-html="finishedlink"></p>
new Vue({el:"#app",data:{title:"hello world!", link:"http://www.baidu.com",finishedlink:"<a }, ...
8.v-text
純文本輸出內(nèi)容
<p v-text="finishedlink"></p>
四申钩、事件
1.事件綁定范例
范例一：
<div id="app"><button type="button" v-on:click="increase">click</button><p>{{counter}}</p>
new Vue({el:"#app",data:{counter:0 },methods:{increase:function(){this.counter++;},...
范例二：
<p v-on:mousemove="mo">mooooooo</p>
mo:function(event){console.log(event);}
范例三：
<p v-on:mousemove="mo">mx:{{x}}my:{{y}}</p>
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.參數(shù)傳遞
<button type="button" v-on:click="increase(2)">click</button>
... methods:{increase:function(step){this.counter+=step;},...
傳多個(gè)參數(shù)：
<button type="button" v-on:click="increase(2,event)">click</button>
...methods:{increase:function(step,event){this.counter+=step;},...
3.停止鼠標(biāo)事件
<p v-on:mousemove="mo">mx:{{x}}my:{{y}}---<span v-on:mousemove="dummy">停止鼠標(biāo)事件</span></p>
dummy:function(event){event.stopPropagation();}
另一種方式：
<span v-on:mousemove.stop>停止鼠標(biāo)事件</span>
4.事件修飾符
輸入回車鍵時(shí)提示
<input type="text" v-on:keyup.enter="alertE"/>
輸入空格時(shí)提示
<input type="text" v-on:keyup.space="alertE"/>
五、vue改變內(nèi)容 虛擬dom和diff算法
1.插值表達(dá)式的方式
范例一：
{{ count>10叨橱？"大于10","小于10"}}
范例二：
<p>{{result}}</p>
new Vue({el:"#app",data:{counter:0,result:""},methods:{increase:function(step){this.counter+=step;this.result=this.counter>10?"大于10":"小于10"},}});
2.computed的用法
<div id="app"><button type="button" v-on:click="increase(2)">click</button><p>{{counter}}{{counter>10?"大于10":"小于10"}}</p><p>result:{{result}}</p><p>getResult:{{ getResult() }}</p><p>getResultComputed:{{ getResultComputed}}</p></div>
<script>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"}}});</script>
computed的函數(shù)第一次調(diào)用后會(huì)被加入到內(nèi)存中典蜕。
computed內(nèi)的函數(shù)使用時(shí)不用帶小括號(hào)
computed的函數(shù)指的是被動(dòng)調(diào)用，method是主動(dòng)去觸發(fā)他里面的函數(shù)罗洗，computed指的是你去使用這個(gè)函數(shù)
computed是一個(gè)屬性計(jì)算函數(shù)愉舔，比如用來(lái)計(jì)算div的寬度和高度，div的寬度和高度一直在變伙菜，但computed中的該函數(shù)本身沒(méi)有變轩缤，所以可以把函數(shù)寫在computed中。
3.watch的用法：監(jiān)控
watch用于監(jiān)控參數(shù)的變化贩绕，并調(diào)用函數(shù)火的，newVal是能獲得參數(shù)新的值，oldVal是參數(shù)老的值淑倾。
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馏鹤，體現(xiàn)了vue的雙向綁定
watch:{
counter:function(newVal,oldVal){
this.result=newVal>10?"大于10":"小于10";
var vm = this;//當(dāng)前data
setTimeout(function(){
vm.counter = 0;
},1000);
}
}
六、vue改變樣式
1.class的動(dòng)態(tài)綁定
v-bind:class="{red:attachRed}"
鍵名是類名娇哆，鍵值是布爾湃累，如果是true勃救，則將指定的類名綁定在元素上，如果是false治力，則不綁定蒙秒。
<head><meta charset="UTF-8"><title>下午</title><style>.demo{width:100px;height:100px;background-color:gray;display:inline-block;margin:10px;}.red{background-color: red;}.green{background-color: green;}.blue{background-color: blue;}</style></head><body><div id="app">{{attachRed}}<div class="demo" @click="attachRed=!attachRed" v-bind:class="{red:attachRed}"> </div><div class="demo"></div><div class="demo"></div></div><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script><script>new Vue({el:"#app",data:{attachRed:false}});</script></body>
2.加入computed
<div class="demo" :class="divClasses"></div>
new Vue({el:"#app",data:{attachRed:false},computed:{divClasses:function(){return {//返回一個(gè)json對(duì)象red:this.attachRed,blue:!this.attachRed}}}});
3.雙向綁定的體現(xiàn)
在input中輸入顏色，就可以設(shè)置div的class
<div id="app"><input type="text" v-model="color"/>{{attachRed}}<div class="demo" @click="attachRed=!attachRed" v-bind:class="{red:attachRed}"></div><div class="demo"></div><div class="demo" :class="divClasses"></div><div class="demo" :class="color"></div></div><script>new Vue({el:"#app",data:{attachRed:false,color:"green"}, ...
4.多個(gè)樣式的操作
.red{background-color: red;color: white;}<div class="demo" :class="[color,{red:attachRed}]">hahaha</div>
5.通過(guò)style設(shè)置樣式
<div class="demo" :style="{backgroundColor:color}"></div>
設(shè)置div的style屬性的值宵统，style里放json對(duì)象晕讲，鍵是駝峰式寫法，值是變量color
6.使用computed設(shè)置樣式
<div class="demo" :style="myStyle"></div><input type="text" v-model="width"/>new Vue({el:"#app",data:{attachRed:false,color:"green",width:100},computed:{divClasses:function(){return {//返回一個(gè)json對(duì)象red:this.attachRed,blue:!this.attachRed}},myStyle:function(){return {backgroundColor:this.color,width:this.width+"px"}}}});</script>
7.設(shè)置style屬性的多個(gè)樣式
<div class="demo" :style="[myStyle,{height:width*2+'px'}]"></div>
七马澈、vue中的語(yǔ)句
1.分支語(yǔ)句
v-if
v-else-if
v-else
v-show: 實(shí)際上是讓該元素的display屬性為none,隱藏的效果瓢省。所以性能更好。
<div id="app"><p v-if="show">hahah</p><p v-else>hohoho</p><p v-show="show">hehehe</p><input type="button" @click="show=!show" value="dianwo"/></div><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script><script>new Vue({el:"#app",data:{show:false}});</script>
通過(guò)模板標(biāo)簽對(duì)多個(gè)元素進(jìn)行同一的if和else管理
<template v-if="show"><h1>heading</h1><p>inside text</p></template>
2.循環(huán)語(yǔ)句
vue中只有for循環(huán)
<body><div id="app"><ul><li v-for="str in args">{{str}}</li></ul></div><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script><script>new Vue({el:"#app",data:{args:["a","b","c","d"]}});</script></body>
改進(jìn)版：for語(yǔ)句里箭券，key建議加上净捅，作為標(biāo)識(shí).i是下標(biāo)
<ul><li v-for="(str,i) in args" :key="i">{{str}}{{i}}</li></ul>
使用templete實(shí)現(xiàn)循環(huán)
<template v-for="(str,i) in args":key="i"><p>{{str}}{{i}}</p></template>
循環(huán)中操作對(duì)象
<template v-for="person in persons"><p><span v-for="value in person">{{value}}</span></p><p><span v-for="(v,k,i) in person">{{k}}:{{v}}:{{i}}====</span></p></template><script>new Vue({el:"#app",data:{args:["a","b","c","d"],persons:[{name:"xy",age:20,color:"red"},{name:"yh",age:18,color:"green"}]}});</script>
循環(huán)的另一種用法：
v-for="n in 10" //可以在分頁(yè)組件中使用
<nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <!--======v-for====--> <li v-for="n in 10"><a href="#">{{n}}</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul></nav>
八、總結(jié)
vue是以數(shù)據(jù)為驅(qū)動(dòng)辩块，漸進(jìn)式的web框架蛔六，MVVM雙向綁定，虛擬DOM為核心和diff算法废亭，所謂的虛擬dom和diff算法国章，是指當(dāng)頁(yè)面內(nèi)容發(fā)生變化時(shí)，只更新改變的部分豆村，是通過(guò)虛擬dom和diff算法實(shí)現(xiàn)這樣的操作液兽，效率非常高。
