Vue.js（讀音 /vju?/, 類(lèi)似于 view） 是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)已烤。
Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件寞忿。
Vue模板語(yǔ)法
1.文本
<!-- ================= 插值文本 ======================= -->
<div id="vue_det">
<!-- {{}} 用于輸出對(duì)象屬性和函數(shù)返回值尺借。 -->
<h1>site : {{name}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
<div v-html="message">
</div>
</div>
<script type="text/javascript">
<!-- ================= 插值文本(v-html) ======================= -->
var vm = new Vue({
// el代表需要構(gòu)造的元素id
el: '#vue_det',
// data用于自定義屬性
data: {
name: "天天加油",
url: "www.goodly.com",
alexa: "13540869383",
message: '<h1>菜鳥(niǎo)教程</h1>'
},
// methods 用于定義的函數(shù),可以通過(guò) return 來(lái)返回函數(shù)值份汗。
methods: {
details: function() {
return this.name + " - 學(xué)的不僅是技術(shù)盈电，更是夢(mèng)想！";
}
}
});
</script>
2.html(v-html)
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鳥(niǎo)教程</h1>'
}
})
</script>
3.屬性（v-bind:）
以下實(shí)例判斷 class1 的值杯活，如果為 true 使用 class1 類(lèi)的樣式匆帚，否則不使用該類(lèi)：
<!-- ================= 插值屬性 ======================= -->
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<div id="app">
<label for="r1">修改顏色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
<!-- 為use=false則不賦class值為class1，反之亦然-->
v-bind:class 指令
</div>
</div>
<script>
<!-- ================= 插值屬性(v-bind) ======================= -->
var test1 = new Vue({
el: '#app',
data: {
use: false
}
});
</script>
4.表達(dá)式
<!-- ================= 表達(dá)式 ========================= -->
<div id="app1">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鳥(niǎo)教程</div>
</div>
<script>
<!-- ================= 表達(dá)式 ========================= -->
new Vue({
el: '#app1',
data: {
ok: true,
message: 'RUNOOB',
id: 11
}
})
</script>
5.點(diǎn)擊事件（v-on：click）
<!-- ================= 點(diǎn)擊事件 ========================= -->
<div id="bu1">
<button type="button" v-on:click="test1()"></button>
</div>
<script>
<!-- ================= 點(diǎn)擊事件 ========================= -->
new Vue({
el: '#bu1',
data: {
ok: true,
},
methods: {
test1: function() {
console.log(11111)
}
}
})
</script>
6.指令判斷（v-if）
這里旁钧， v-if 指令將根據(jù)表達(dá)式 seen 的值(true 或 false )來(lái)決定是否插入 p 元素吸重。
<div id="app">
<p v-if="seen">現(xiàn)在你看到我了</p>
<template v-if="ok">
<h1>菜鳥(niǎo)教程</h1>
<p>學(xué)的不僅是技術(shù)，更是夢(mèng)想歪今！</p>
<p>哈哈哈嚎幸，打字辛苦啊＜男伞＜稻А！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
7.參數(shù)
在這里 href 是參數(shù)田篇，告知 v-bind 指令將該元素的 href 屬性與表達(dá)式 url 的值綁定
<div id="app">
<pre><a v-bind:href="url">菜鳥(niǎo)教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
8.數(shù)據(jù)雙向綁定
在 input 輸入框中我們可以使用 v-model 指令來(lái)實(shí)現(xiàn)雙向數(shù)據(jù)綁定：
<!--=====================================數(shù)據(jù)雙向綁定================================= -->
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message"/>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:''
}
})
</script>
9.反轉(zhuǎn)字符串
<div id="app">
<p>{{message}}</p>
<button v-on:click="revers" style="width: 50px;height:30px;">反轉(zhuǎn)</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'qwertyu'
},
methods:{
revers:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
