vue是一種比較流行的前端框架，目標(biāo)是通過盡可能簡單的API實現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件购对。輕量的框架猾昆，只聚焦于試圖層÷獍可以和其他的庫配合使用垂蜗。
看了幾集視頻看不下去了。烙如。么抗。還是菜鳥教程適合我。亚铁。。emmm
VUE的安裝
1.直接<script>引入vue.min.js(常用螟加，反正我正在用)
2.CDN方法
BootCDN（國內(nèi)） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 npm 發(fā)布的最新的版本一致徘溢。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
3.npm方法
命令npm install vue
VUE模版語法
插值
文本：
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
Html:輸出html標(biāo)簽里的值
<body>
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鳥教程</h1>'
}
})
</script>
</body>
屬性：使用v-bind指令
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<div id="app">
<label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1': class1}">
directiva v-bind:class
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
class1: false
}
});
</script>
</body>
表達式：
<body>
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鳥教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true, //YES
message: 'RUNOOB', //BOONUR
id : 1 //id="list-1"
}
})
</script>
</body>
指令：
指令是帶有 v- 前綴的特殊屬性。
指令用于在表達式的值改變時捆探，將某些行為應(yīng)用到 DOM 上
在這個例子里然爆， v-if 指令根據(jù)表達式 seen 的值(true 或 false )來決定是否插入 p 元素
<body>
<div id="app">
<p v-if="seen">現(xiàn)在你看到我了</p>
<template v-if="ok">
<h1>菜鳥教程</h1>
<p>學(xué)的不僅是技術(shù)，更是夢想黍图！</p>
<p>哈哈哈曾雕，打字辛苦啊Ｖ弧Ｆ收拧！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
參數(shù)：
參數(shù)在指令后以冒號指明揩环。例如搔弄， v-bind 指令被用來響應(yīng)地更新 HTML 屬性：在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定丰滑。
給元素綁定href時可以也綁一個target顾犹，新窗口打開頁面。
<body>
<div id="app">
<pre><a v-bind:href="url">菜鳥教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com',
target:'_blank'
}
})
</script>
</body>
修飾符：
修飾符是以半角句號 . 指明的特殊后綴，用于指出一個指定應(yīng)該以特殊方式綁定炫刷。例如擎宝，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 event.preventDefault()函數(shù)：
<form v-on:submit.prevent="onSubmit"></form>
用戶輸入：
在 input 輸入框中我們可以使用 v-model 指令來實現(xiàn)雙向數(shù)據(jù)綁定：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
按鈕的事件我們可以使用 v-on 監(jiān)聽事件，并對用戶的輸入進行響應(yīng)浑玛。
例：在用戶點擊按鈕后對字符串進行反轉(zhuǎn)操作：
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉(zhuǎn)字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')//反轉(zhuǎn)
}
}
})
</script>
過濾器：
vue允許自定義過濾器认臊，被用作一些常見的文本格式話。
格式如下：
<!-- 在兩個大括號中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
例：對輸入的字符串第一個字母轉(zhuǎn)為大寫：
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
縮寫：
v-bind縮寫
<!--完成語法-->
<a v-bind:href="url"></a>
<!--縮寫-->
<a :href="url"></a>
v-on縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
VUE實例
構(gòu)造器
每個vue.js應(yīng)用都是通過構(gòu)造函數(shù)VUE創(chuàng)建一個VUE的根實例來啟動的：
var vm = new Vue({
//選項
})
屬性和方法
每個 Vue 實例都會代理其 data 對象里所有的屬性：
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 設(shè)置屬性也會影響到原始數(shù)據(jù)
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
除了 data 屬性锄奢， Vue 還有一些有用的實例屬性與方法失晴。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區(qū)分拘央。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
// 這個回調(diào)將在 `vm.a` 改變后調(diào)用
})
