-
computed:計算屬性
watch：偵聽器
查看全部 -
父組件向子組件傳遞值：通過屬性
子組件向父組件傳遞：通過發(fā)布訂閱模式，子組件發(fā)布函數(shù)父組件訂閱
$emit()向外觸發(fā)一個自定義delete事件，攜帶了index的值
push() 方法可向數(shù)組的末尾添加一個或多個元素，并返回新的長度。
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"http://向組件傳遞屬性
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
<script type="text/javascript">
Vue.component('todo-item',{
props:['content','index'],//接收從外部傳進(jìn)來的屬性content
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handleDelete:function(index){
//alert(index)
this.list.splice(index,1)
}
}
})
</script>
</body>
查看全部 -
這個課程的代碼我已經(jīng)打包在 https://github.com/1171843306/Vue.js
大家可以去那里下載或者觀看查看全部 -
這個課程的代碼我已經(jīng)打包在 https://github.com/1171843306/Vue.js
大家可以去那里下載或者觀看查看全部 -
這個課程的代碼我已經(jīng)打包在 https://github.com/1171843306/Vue.js
大家可以去那里下載或者觀看查看全部 -
vue.js 引入在html的head部分，防止頁面加載收出現(xiàn)抖動
查看全部 -
vue.js查看全部
-
computed:計算屬性
watch：偵聽器
查看全部 -
屬性綁定：v-bind: 通常簡寫為 :?
雙向數(shù)據(jù)綁定：v-model?
tips: new Vue({ }) 不能寫成 new Vue ({ })中間不能有空格符號，不然數(shù)據(jù)渲染無效
查看全部 -
數(shù)據(jù)綁定，{{}} 屬性綁定，v-bind:/: 雙向綁定，v-model 事件綁定，v-on:/@查看全部
-
{{}} 表示為插值表達(dá)式，將要顯示的內(nèi)容插入需要顯示的地方，進(jìn)行顯示不進(jìn)行任何操作
v-text? 與? v-html? ?區(qū)別在于v-text會將輸出的內(nèi)容進(jìn)行轉(zhuǎn)義然后再進(jìn)行輸出，而v-html不會進(jìn)行轉(zhuǎn)義而是直接輸出
v-on:clck? 代表點(diǎn)擊事件? click=""，雙引號中代表點(diǎn)擊后調(diào)用的函數(shù)
函數(shù)綁定在Vue實(shí)例下的methods下，定義需要調(diào)用的方法
? 當(dāng)數(shù)據(jù)發(fā)生變化時，Vue會自動幫你更新DOM?
不在面相DOM編程，而是面相數(shù)據(jù)進(jìn)行編程
v-on: 可以簡寫為@符號 即為v-on:click簡寫為@click
查看全部 -
每一個組件都是一個實(shí)例，如果一個Vue的實(shí)例沒有模板template，它就會找到它的掛載點(diǎn)，把掛載點(diǎn)里的DOM標(biāo)簽當(dāng)做Vue的實(shí)例模板
查看全部 -
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handelSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"http://向組件傳遞屬性
></todo-item>
</ul>
</div>
<script type="text/javascript">
Vue.component('todo-item',{
props:['content'],//接收從外部傳進(jìn)來的屬性content
template:'<li>{{content}}</li>'
})
new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handelSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
</script>
</body>
查看全部 -
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handelSubmit">提交</button>
</div>
<ul v-for="(item,index) of list" :key="index">
<li>{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handelSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
</script>
</body>
查看全部 -
：value->是單向綁定數(shù)據(jù)，v-model->是雙向數(shù)據(jù)綁定。
查看全部
舉報