-
<!DOCTYPE?html><html><meta?charset="UTF-8"><head><title>vue實(shí)例</title><script?src="vue.js"></script><div?id?=?"root"><p>{{msg}}</p></div><script>new?Vue({el:"#root",data:{msg:"hello?world"}})</script></head><body></body></html>創(chuàng)建第一個(gè)實(shí)例時(shí)，發(fā)現(xiàn)
new Vue({
el:"#root",
data:{
msg:"hello world"
}
})
中msg：“hello world”后面不能加分號(hào)！
加分號(hào)會(huì)運(yùn)行失敗。
查看全部 -
全局組件 。 Vue.component 創(chuàng)建全局組件
局部組件?
定義一個(gè)屬性值 :content? ?組件中 props 接收屬性值
查看全部 -
v-if? 元素在dom中直接移除或新增
v-show 元素并沒(méi)有從dom中移除 只是多了屬性 display：none
v-for循環(huán)? :key加速渲染進(jìn)程? item循環(huán)每一項(xiàng)的值? index下標(biāo)?
查看全部 -
vue中的屬性綁定
v-bind: 簡(jiǎn)寫(xiě)成 ：
? ? ? ? ? ?雙向綁定v-model:查看全部 -
vue2.0查看全部
-
差值表達(dá)式 {{? }}
v-text
v-html
v-on:click 可以簡(jiǎn)寫(xiě)成 @click
元素綁定事件 觸發(fā)方法? 不需要改變dom 直接監(jiān)聽(tīng)數(shù)據(jù)變化
查看全部 -
vue 實(shí)例查看全部 -
v-for的使用， 添加:key 索引
查看全部 -
Mark查看全部
-
在es6語(yǔ)法中，：function(){}可以簡(jiǎn)寫(xiě)為(){}
查看全部 -
在vue腳手架中，data不再是數(shù)據(jù)，而是函數(shù)，其返回值是數(shù)據(jù)
查看全部 -
借用@悶聲君發(fā)的評(píng)論來(lái)幾個(gè)筆記
總結(jié)一下大概的邏輯過(guò)程：
（1）：父組件通過(guò)prop向子組件傳值 子組件獲得父組件傳來(lái)的內(nèi)容和索引。
（2）：子組件通過(guò)$emit向父組件拋出觸發(fā)事件名稱(chēng)（delete）和觸發(fā)事件的list索引值。
（3）：父組件通過(guò)監(jiān)聽(tīng)對(duì)應(yīng)事件名稱(chēng)（@delete）觸發(fā)函數(shù)handleDelete。函數(shù)通過(guò)子組件拋出的索引值對(duì)應(yīng)刪除list查看全部 -
v-on（事件）的縮寫(xiě)是@
v-bind（綁定）的縮寫(xiě)是：
v-model（數(shù)據(jù)雙向綁定）
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TodoList組件的刪除功能.html</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--TodoList組件的刪除功能.html-->
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!--todolist組件-->
<!--<li v-for="(item, index) of list" :key="index">
{{item}}
</li>-->
<!--全局定義-->
? ? ? ? ? ? <todo-item?
? ? ? ? ? ? v-for="(item, index) of list"?
? ? ? ? ? ? :key="index"
? ? ? ? ? ? :content="item"
? ? ? ? ? ? :index="index"
? ? ? ? ? ? @delete="handleDelete"
? ? ? ? ? ? >
? ? ? ? ? ? </todo-item>
</ul>
</div>
<script>
//todolist組件 全局定義
Vue.component('todo-item',{
props:['content' ,'index'],
//每一個(gè)veu實(shí)例 都是一個(gè)組件 ?每個(gè)組件都是一個(gè)vue 實(shí)例
template : '<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
? ? ? ? ? ? ? ? ?this.$emit('delete', this.index)
},
}
})
? ? ? ? //局部組件
// ? ? ? var TodoItem = {
// ? ? ? template:'<li>item</li>'
// ? ? ? }
new Vue({
el:"#root",
// //如果你想在其他veu實(shí)例里邊用這個(gè)局部組件 必選通過(guò)components 對(duì)這個(gè)局部組件進(jìn)行注冊(cè)
// components:{
// //通過(guò)todo-item這個(gè)標(biāo)簽來(lái)使用
// 'todo-item':TodoItem ?
// },
? ? ? data:{
? ? ? inputValue:'',
? ? ? list:[]
? ? ? },
? ? ? methods:{
? ? ? handleSubmit:function(){
? ? ? this.list.push(this.inputValue),
? ? ? this.inputValue=''// 清空inputValue內(nèi)容
? ? ? },
? ? ? handleDelete:function(index){
this.list.splice(index, 1)
}
? ? ? }
})
</script>
</body>
</html>
查看全部 -
屬性綁定用:，等同于v_bind查看全部
舉報(bào)