vue是什么?
Vue.js（讀音 /vju?/，類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架路幸。與其他重量級(jí)框架不同的是双抽，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)凌蔬。Vue 的核心庫只關(guān)注視圖層莺掠，它不僅易于上手衫嵌，還便于與第三方庫或既有項(xiàng)目整合。另一方面彻秆，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時(shí)楔绞，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動(dòng)。 vue簡單唇兑，易用酒朵，便于維護(hù)，是一個(gè)mvvm的框架扎附，不像angular.js那樣復(fù)雜蔫耽。
vue與angular的區(qū)別？
vue.js簡單易用留夜，指令以v-xx的形式來書寫针肥，簡單來說vue實(shí)例的形成，就是一片html代碼new出一個(gè)vue的實(shí)例香伴，而且他是個(gè)人開源項(xiàng)目尤其是在移動(dòng)端用處非常廣泛。 而angular.js他比較復(fù)雜具则，不易上手即纲，所有方法和屬性基本都基于$scope,他是有Google團(tuán)隊(duì)維護(hù)，他們基本都不兼容IE低版本博肋。
開始vue
1.頁面展示數(shù)據(jù)
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'hello world!',
}
});
</script>
</body>
這里需要說明的是vue2.0版本掛載元素 不能是body或html只能是div等元素低斋，否則會(huì)報(bào)錯(cuò)。
2.指令
v-model 指令匪凡，它能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定膊畴。
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'hello world!',
}
});
</script>
</body>```
v-bind :src=""添加屬性 簡寫為:src="";
```<body>
<div id="app">
<!--  -->
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
url:'https://www.baidu.com/img/bd_logo1.png',
}
});
</script>
</body>```
還可以添加多個(gè)數(shù)據(jù)
```<body>
<div id="app">
<!--  -->
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
url:'https://www.baidu.com/img/bd_logo1.png',
w:'200px',
title:'我是一張圖片'
}
});
</script>
</body>```
v-bind結(jié)合class，style使用
```<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.red{ color:red;}
.bg{ background: gray;}
</style>
</head>
<body>
<div id="app">
<span :class="[red,bg]">無法拒絕</span>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
red:'red',
bg:'bg'
}
});
</script>
</body>```
```<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.red{ color:red;}
.bg{ background: gray;}
</style>
</head>
<body>
<div id="app">
<span :class="{red:true,bg:true}">無法拒絕</span>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
}
});
</script>
</body>```
```<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.red{ color:red;}
.bg{ background: gray;}
</style>
</head>
<body>
<div id="app">
<span :class="json">無法拒絕</span>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
json:{
red:true,
bg:true
}
}
});
</script>
</body>```
循環(huán)的使用v-for
```<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{todo.a}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
todos:[{a:'vue'},{a:'angular'},{a:'react'}]
}
});
</script>
</body>```
index的用法
```<body>
<div id="app">
<ul>
<li v-for="(todo,index) in todos">
{{todo}} {{index}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
todos:{a:1,b:2,c:3}
}
});
</script>
</body>```
這里說明一下在1.0版本是不允許重復(fù)數(shù)據(jù)出現(xiàn)必須用track-by="$index"病游，2.0版本不需要唇跨，直接可以使用。
事件的添加v-on:click mouseover... 簡寫為@on:click
```<body>
<div id="app">
<input type="button" value="按鈕" v-on:click="show"/>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
},
methods:{
show:function(){
alert(1);
}
}
});
</script>
</body>
<div id="app">
<input type="button" value="按鈕" v-on:click="show"/>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
arr:['vue','angular','react']
},
methods:{
show:function(){
this.arr.push('d3');
}
}
});
</script>
</body>```
深入事件了解 ：阻止事件冒泡 瀏覽器默認(rèn)行為 鍵盤事件衬衬。买猖。
```<body>
<div id="app">
<div class="box" v-on:contextmenu="show($event)"></div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
arr:['vue','angular','react']
},
methods:{
show:function(ev){
alert(1);
ev.preventDefault();
}
}
});
</script>
</body>```
//ev.preventDefault(); 可以簡寫為v-on:contextmenu.prevent="show()" 事件對(duì)象為$event
```<body>
<div id="app">
<div v-on:click="a()">
<div class="box" v-on:click.stop="show()"></div>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
arr:['vue','angular','react']
},
methods:{
show:function(){
alert(1);
//ev.cancelBubble=true;
},
a:function(){
alert(2);
}
}
});
</script>
</body>```
阻止事件冒泡可以簡寫為v-on:click.stop="show()"
```<body>
<div id="app">
<input type="text" @keydown.enter="show()"/>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
arr:['vue','angular','react']
},
methods:{
show:function(ev){
alert('你按回車了')
}
}
});
</script>
</body>```
常用鍵碼：
回車  a). @keyup.13   b). @keyup.enter  
上、下滋尉、左玉控、右  @keyup/keydown.left  @keyup/keydown.right  @keyup/keydown.up  @keyup/keydown.down