一.vue的核心庫(kù)只關(guān)注視圖層,易于與第三方庫(kù)或既有項(xiàng)目整合
二.聲明式渲染
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節(jié)點(diǎn)的title屬性,將title屬性與實(shí)力Vue的message屬性綁定,在瀏覽器的控制臺(tái)中輸入app.message改變message值)
三. 條件與循環(huán)
1.控制元素的現(xiàn)實(shí)v-if
<div id="app"> <p v-if="seen">現(xiàn)在看見(jiàn)我啦</p> </div>
var app=new Vue({
el:'#app',
data:{ seen:true }
})
在控制臺(tái)輸入app.seen=false,DOM元素內(nèi)的字體不顯示
2. v-for ? ?用來(lái)綁定數(shù)組的數(shù)據(jù)來(lái)渲染一個(gè)項(xiàng)目列表
<div id="app"> <ol> <li v-for="todo in todos"> { { todo.text } } </ol> </div>
var app=new Vue({
el:'#app',
data:{ todos:[
{text:'學(xué)習(xí)JavaScript'},
{text:'學(xué)習(xí)VUE'},
{text:整個(gè)牛項(xiàng)目}
] }
})
在控制臺(tái)輸入app.todos.push ( { text:'新項(xiàng)目' } )
四. 處理用戶輸入
1. 使用v-on 指令綁定一個(gè)監(jiān)聽(tīng)器,通過(guò)調(diào)用VUE實(shí)例中定義的方法,實(shí)現(xiàn)用戶和你的應(yīng)用活動(dòng)
<div> <p>{{message}}</p> <button v-on:click="reverseMessage">逆轉(zhuǎn)消息</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 指令能實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)(VUE實(shí)例中的數(shù)據(jù))之間的雙向綁定
<div id="app"> <p> {{message}} </p> ?<input ?type="text" ?v-model="message"/></div>
var app=new Vue({
el:'#app',
data:{message:'Hellow VUE'}
})
五. 組件化應(yīng)用構(gòu)建
使用小型,獨(dú)立,和通常可復(fù)用的組件構(gòu)建大型應(yīng)用
// ?一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的VUE實(shí)例
1. 在VUE中注冊(cè)組件
Vue.component('todo-item', {
template: '<li>這是一個(gè)待辦項(xiàng)</li>'
})
html:? <ol>
?//創(chuàng)建todo-item組件的實(shí)例
<todo-item></todo-item>
?</ol>
該方法為全局注冊(cè)組件,需要在VUE實(shí)例化之前使用
實(shí)例:
<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:'水果'},
]
}
})
