一、什么是 Vue

Vue 是一個用于構建用戶界面的漸進式的js框架，Vue 的核心是MVVM雙向數據綁定模式及組件化開發，它使得開發前端不僅易于上手，還便于與Vue的優良生態或既有項目整合。

二、快速開始

1.在頁面引入vue的js文件即可。

注意：cdn是一種加速策略，能夠快速的提供js文件

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

2.在頁面中綁定vue元素

創建一個div，id是app<div id="app"></div>

3.創建vue對象，設計對象的內容

其中該vue對象，綁定了頁面中id是app的那個div

<script>new Vue({el:"#app",data:{title:"hello vue!", args1:"hi!", age:18, flag:true}});</script>

4.在頁面的元素中使用插值表達式來使用vue對象中的內容

<div id="app">{{ title }}</div>

三、 插值表達式

插值表達式的作用是在View中獲得Model中的內容

1.插值表達式

<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雙向數據綁定：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，響應行為是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:

<input type="text" @input="changeTitle" />

5.屬性綁定： v-bind

html里的所有屬性，都不能使用插值表達式

<a href="{{link}}">baidu</a>new Vue({el:"#app",data:{title:"hello world!",link:"http://www.baidu.com" }, ...

上面的這種做法是錯誤的，可以使用綁定屬性綁定來解決：

要想在html的元素中的屬性使用vue對象中的內容，那么得用v-bind進行屬性綁定

<a v-bind:href="link">baidu</a>可以縮寫成 冒號<a :href="link">baidu</a>

6.v-once指令

指明此元素的數據只出現一次，數據內容的修改不影響此元素

<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

純文本輸出內容

<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.參數傳遞

<button type="button" v-on:click="increase(2)">click</button>

... methods:{increase:function(step){this.counter+=step;},...

傳多個參數：

<button type="button" v-on:click="increase(2,event)">click</button>

...methods:{increase:function(step,event){this.counter+=step;},...

3.停止鼠標事件

<p v-on:mousemove="mo">mx:{{x}}my:{{y}}---<span v-on:mousemove="dummy">停止鼠標事件</span></p>

dummy:function(event){event.stopPropagation();}

另一種方式：

<span v-on:mousemove.stop>停止鼠標事件</span>

4.事件修飾符

輸入回車鍵時提示

<input type="text" v-on:keyup.enter="alertE"/>

輸入空格時提示

<input type="text" v-on:keyup.space="alertE"/>

五、vue改變內容 虛擬dom和diff算法

1.插值表達式的方式

范例一：

{{ 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的函數第一次調用后會被加入到內存中。

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，則不綁定。

<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 {//返回一個json對象red:this.attachRed,blue:!this.attachRed}}}});

3.雙向綁定的體現

在input中輸入顏色，就可以設置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.多個樣式的操作

.red{background-color: red;color: white;}<div class="demo" :class="[color,{red:attachRed}]">hahaha</div>

5.通過style設置樣式

<div class="demo" :style="{backgroundColor:color}"></div>

設置div的style屬性的值，style里放json對象，鍵是駝峰式寫法，值是變量color

6.使用computed設置樣式

<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 {//返回一個json對象red:this.attachRed,blue:!this.attachRed}},myStyle:function(){return {backgroundColor:this.color,width:this.width+"px"}}}});</script>

7.設置style屬性的多個樣式

<div class="demo" :style="[myStyle,{height:width*2+'px'}]"></div>

七、vue中的語句

1.分支語句

v-if

v-else-if

v-else

v-show: 實際上是讓該元素的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>

通過模板標簽對多個元素進行同一的if和else管理

<template v-if="show"><h1>heading</h1><p>inside text</p></template>

2.循環語句

vue中只有for循環

<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>

改進版：for語句里，key建議加上，作為標識.i是下標

<ul><li v-for="(str,i) in args" :key="i">{{str}}{{i}}</li></ul>

使用templete實現循環

<template v-for="(str,i) in args":key="i"><p>{{str}}{{i}}</p></template>

循環中操作對象

<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>

循環的另一種用法：

v-for="n in 10" //可以在分頁組件中使用

<nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</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">&raquo;</span> </a> </li> </ul></nav>

八、總結

vue是以數據為驅動，漸進式的web框架，MVVM雙向綁定，虛擬DOM為核心和diff算法，所謂的虛擬dom和diff算法，是指當頁面內容發生變化時，只更新改變的部分，是通過虛擬dom和diff算法實現這樣的操作，效率非常高。