-
<!--計(jì)算屬性和偵聽(tīng)器-->
<div id="root">
姓<input type="text" v-model="firstName"/>
名<input type="text" v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
//計(jì)算屬性
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName + '' +this.lastName
}
},
//偵聽(tīng)器 是監(jiān)聽(tīng)某一個(gè)數(shù)據(jù)的變換，一旦數(shù)據(jù)發(fā)生過(guò)變換
watch:{
//第一種方法 firstName lastName
// firstName:function(){
// this.count ++
// //就可以在在偵聽(tīng)器里邊去做業(yè)務(wù)邏輯
// },
// lastName:function(){
// this.count ++
// }
//第二種方法 以fullName 更加簡(jiǎn)潔
fullName:function(){
this.count ++
}
}
})
</script>
查看全部 -
在Vue里 ，每一個(gè)Vue組件，都是一個(gè)Vue實(shí)例
Vue實(shí)例有的功能，Vue組件都同樣擁有
查看全部 -
<!--屬性綁定和雙向數(shù)據(jù)綁定-->
<div id="root">
<!--屬性綁定-->
<!--v-bind:簡(jiǎn)寫(xiě)成：-->
<div v-bind:title="title">heillo world</div>
<!--雙向數(shù)據(jù)綁定-->
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world",
content:"this is content"
}
})
</script>
查看全部 -
<!--屬性綁定和雙向數(shù)據(jù)綁定-->
<div id="root">
<!--v-bind:簡(jiǎn)寫(xiě)成：-->
<div v-bind:title="title">heillo world</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world"
}
})
</script>
查看全部 -
v-html 不會(huì)進(jìn)行轉(zhuǎn)義，v-text會(huì)進(jìn)行轉(zhuǎn)義
v-on指令可以綁定事件比如（click），可簡(jiǎn)寫(xiě)為@click，方法寫(xiě)在vue實(shí)例中的methods方法里面
<!--給元素綁定事件 v-on：簡(jiǎn)寫(xiě)@-->
<div @click="handleClick">{{content}}</div>
new Vue({
el:"#root",
data:{
content:"hello"
},
//時(shí)間觸發(fā)后方法寫(xiě)在vue實(shí)例里邊的methods方法里邊
methods:{
handleClick:function(){
//通過(guò)content去改變實(shí)例里邊的數(shù)據(jù)
this.content = "world"
}
}
})
查看全部 -
handleClick：function（）{
}
結(jié)構(gòu)要記好，handleClick
查看全部 -
v-if="" : 控制DOM存在與否；
v-show="" : 控制DOM顯示與否；
v-for="（item, index）of list"? ：key="index": 控制循環(huán)列表的輸出；
（ 意為把 list 數(shù)組下的每一個(gè)元素賦值給變量名 item ,并把每個(gè)元素的下標(biāo)存到對(duì)應(yīng)的 index 中。PS : key 的值不可重復(fù)）
查看全部 -
vue里每一個(gè)組建都是實(shí)例，反過(guò)來(lái)，每一個(gè)實(shí)例也都是一個(gè)組建
查看全部 -
v-on 簡(jiǎn)寫(xiě)? @? 事件綁定
v-bind 簡(jiǎn)寫(xiě) :? ?單向綁定
v-model? ?雙向綁定
查看全部 -
剛剛
查看全部 -
<ul>
????<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
查看全部 -
父組件向子組件傳值通過(guò)屬性的形式進(jìn)行值的傳遞
子組件向父組件傳值：$emit觸發(fā)事件，當(dāng)子組件定義了一個(gè)事件被父組件監(jiān)聽(tīng)到，那么父組件就會(huì)執(zhí)行他的方法事件。
查看全部 -
如果一個(gè)vue實(shí)例里面沒(méi)有定義template，那么這個(gè)實(shí)例會(huì)把它對(duì)應(yīng)的掛載點(diǎn)下的所有內(nèi)容當(dāng)作模板
每一個(gè)組件就是一個(gè)vue的實(shí)例
查看全部 -
組件可以分為全局組件和局部組件
全局組件定義之后可以在模板里的任何地方調(diào)用
局部組件需要通過(guò)components在實(shí)例里進(jìn)行注冊(cè)才能使用，vue模板里的屬性使用必須要通過(guò)props來(lái)接收
查看全部 -
父組件向子組件傳數(shù)據(jù)：通過(guò)屬性的方式
<todo-item?:content="item"?:index="index"></todo-item>
Vue.component('todo-item',{
props:['content', 'index'],
})
子組件向父組件傳數(shù)據(jù)：如同發(fā)布訂閱的方式
<todo-item @delete="handleDelete"提前訂閱了dalete事件? 執(zhí)行handleDelete方法>
</todo-item>
Vue.component('todo-item',{
methods:{
handlClick:function(){
//向外發(fā)布了名為'delete'的事件和list的索引值
this.$emit('delete',this.index)
}
}
})
查看全部
舉報(bào)