基本語法格式:
<script>
new Vue({
? el: '#app',
? data: {
??? url: 'http://www.runoob.com'
? }
})
</script>
?
指令 【指令是帶有 v- 前綴的特殊屬性。】
?????? 判斷? <p v-if="seen">現在你看到我了</p>
?????? 參數? <a v-bind:href="url">菜鳥教程</a>
?????? 監聽? v-on 指令,它用于監聽 DOM 事件: <a v-on:click="doSomething">
過濾器:{{ message | capitalize }}?? 或?? <div v-bind:id="rawId | formatId"></div>
例:
?
?????? 雙向數據綁定? v-model用在表單控件上的,用于實現雙向數據綁定,所以如果你用在除了表單控件以外的標簽是沒有任何效果的。
?
===========================
計算屬性:computed
computed vs methods
我們可以使用 methods 來替代 computed,效果上兩個都是一樣的,但是 computed 是基于它的依賴緩存,只有相關依賴發生改變時才會重新取值。而使用 methods ,在重新渲染的時候,函數總會重新調用執行。
?
=====================
Vue.js 樣式綁定
v-bind:class? 設置一個對象
?
===========================
Vue.js 事件處理器
事件監聽可以使用 v-on 指令:
?
====================
Vue.js 組件
prop 是單向綁定的:當父組件的屬性變化時,將傳導給子組件,但是不會反過來。
?
//js
Vue.component('todo-item', {
? props: ['todo'],
? template: '<li>{{ todo }}</li>'
})
?
new Vue({
? el: '#app',
? data: {
??? todo :""
? }
})
?
?
?
不理解的問題:
?