vue學習-基本語法
vue的語法同angularjs類似，指令由angularjs的ng 變成了vue的v.
1.一個例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: "菜鳥教程", url: "www.runoob.com", alexa: "10000" }, methods: { details: function() { return this.site ; } } }) </script> </body> </html>
Vue 構造器中有一個el 引數，它是 DOM 元素中的 id。
data 用於定義屬性，例項中有三個屬性分別為：site、url、alexa。methods 用於定義的函式，可以通過 return 來返回函式值。{{ }} 用於輸出物件屬性和函式返回值。
Vue 例項提供了一些有用的例項屬性與方法。它們都有字首 $，以便與使用者定義的屬性區分開來。例如：
<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript"> // 我們的資料物件 var data = { site: "菜鳥教程", url: "www.runoob.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) document.write(vm.$data === data) // true document.write("<br>") // true document.write(vm.$el === document.getElementById('vue_det')) // true </script>
2.v-html
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鳥教程</h1>'
}
})
</script>
蘇安年
188***[email protected]
給元素繫結href時可以也綁一個target，新視窗開啟頁面。
new
Vue({ el: '#app', data: { url: 'http://www.runoob.com', target:'_blank' } })
3.屬性
HTML 屬性中的值應使用 v-bind 指令。
以下例項判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
<div id="app">
<label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1': class1}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
class1: false
}
});
</script>
4.表示式
<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,
message: 'RUNOOB',
id : 1
}
})
</script>
5.引數
引數在指令後以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：
<div id="app">
<pre><a v-bind:href="url">菜鳥教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
在這裡 href 是引數，告知 v-bind 指令將該元素的 href 屬性與表示式 url 的值繫結。
另一個例子是 v-on 指令，它用於監聽 DOM 事件：
<a v-on:click="doSomething">
在這裡引數是監聽的事件名。
6. v-model
實現資料雙向繫結。
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
7.過濾器
<!-- 在兩個大括號中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
過濾器函式接受表示式的值作為第一個引數。
以下例項對輸入的字串第一個字母轉為大寫：
<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>
過濾器可以串聯：
{{ message | filterA | filterB }}
過濾器是 JavaScript 函式，因此可以接受引數：
{{ message | filterA(‘arg1’, arg2) }}
這裡，message 是第一個引數，字串 ‘arg1’ 將傳給過濾器作為第二個引數， arg2 表示式的值將被求值然後傳給過濾器作為第三個引數。
8.縮寫
v-bind 縮寫
Vue.js 為兩個最為常用的指令提供了特別的縮寫：
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
9.vue.set
當我們給一個比如 props 中，或者 data 中被觀測的物件新增一個新的屬性的時候，不能直接新增，必須使用 Vue.set 方法。
Vue.set 方法用來新增物件的屬性。如果要增加屬性的物件是響應式的，那該方法可以確保屬性被建立後也是響應式的，同時觸發檢視更新
Vue.set(this.food,'count',1);