一.vue的核心庫只關注視圖層,易于與第三方庫或既有項目整合
二.聲明式渲染
1. ? <div id="app">
{{message}}
</div>
var app=new Vue({
? ? el:'#app',
? ? data:{
? ? ? ? ?message:'hellow ?Vue'
? ? }
})
2. 綁定DOM元素屬性
v-bind:title="message" ? (v-bind指令,改變DOM節點的title屬性,將title屬性與實力Vue的message屬性綁定,在瀏覽器的控制臺中輸入app.message改變message值)
三. 條件與循環
1.控制元素的現實v-if
<div id="app"> <p v-if="seen">現在看見我啦</p> </div>
var app=new Vue({
el:'#app',
data:{ seen:true }
})
在控制臺輸入app.seen=false,DOM元素內的字體不顯示
2. v-for ? ?用來綁定數組的數據來渲染一個項目列表
<div id="app"> <ol> <li v-for="todo in todos"> { { todo.text } } </ol> </div>
var app=new Vue({
el:'#app',
data:{ todos:[
{text:'學習JavaScript'},
{text:'學習VUE'},
{text:整個牛項目}
] }
})
在控制臺輸入app.todos.push ( { text:'新項目' } )
四. 處理用戶輸入
1. 使用v-on 指令綁定一個監聽器,通過調用VUE實例中定義的方法,實現用戶和你的應用活動
<div> <p>{{message}}</p> <button v-on:click="reverseMessage">逆轉消息</button> </div>
var app=new Vue({
el:'#app',
data:{ message:'Hellow VUE' },
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('')
}
}
})
2. v-model 指令能實現表單輸入和應用狀態(VUE實例中的數據)之間的雙向綁定
<div id="app"> <p> {{message}} </p> ?<input ?type="text" ?v-model="message"/></div>
var app=new Vue({
el:'#app',
data:{message:'Hellow VUE'}
})
五. 組件化應用構建
使用小型,獨立,和通常可復用的組件構建大型應用
// ?一個組件本質上是一個擁有預定義選項的VUE實例
1. 在VUE中注冊組件
Vue.component('todo-item', {
template: '<li>這是一個待辦項</li>'
})
html:? <ol>
?//創建todo-item組件的實例
<todo-item></todo-item>
?</ol>
該方法為全局注冊組件,需要在VUE實例化之前使用
實例:
<div id="app">?
<ol>
<todo-item v-for="item in items" ?v-bind:todo="item" v-bind:key="item.id"> </todo-item></div>
</ol>
</div>
Vue.component('todo-item', {
props:['todo'],
template:'<li>{{todo.text}}</li>'
})
new Vue({
el:'#app',
data:{
items:[
{id:0, text:'蔬菜'},
{id:1, text:'奶酪'},
{id:2, text:'水果'},
]
}
})
