-
事件綁定用@，等同于v-on查看全部
-
課程流程圖
查看全部 -
子組件和父組件事件傳遞
子組件中?使用this.$emit('delete',this.index)
父組件接收處理：@delete="fatherFuncDelete"(父組件中完成處理的方法名稱)
查看全部 -
組件【components]
局部組件：
var?tempdemo={
template:"<div></div>"
}
new Vue({
componets:{
'temp':tempdemo
}
})
全局組件：
Vue.component('temp',{
template:'<div></div>'
})
查看全部 -
computed:計算函數，如統計，一個屬性隨一個屬性改而改變
watch:監聽對像的屬性的變化
查看全部 -
在es6語法中，：function(){}可以簡寫為(){}查看全部
-
在vue腳手架中，data不再是數據，而是函數，其返回值是數據
查看全部 -
寫scoped作用是只對自己組件的樣式生效，否則會對全局有效
查看全部 -
data以前是對象，在這里是函數
查看全部 -
父子組件的的交互：父組件通過屬性的形式傳給子組件,子組件通過發布定義模式向父組件傳遞數據
查看全部 -
記錄一下查看全部
-
v-if?如果屬性為false，則直接把這個dom元素刪除。
v-show?如果屬性為false，則給dom元素添加display：?none；
查看全部 -
<!--TodoList 功能開發<-->
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
//計算屬性
new Vue({
el:"#root",
? ? ? data:{
? ? ? inputValue:'',
? ? ? list:[]
? ? ? },
? ? ? methods:{
? ? ? handleSubmit:function(){
? ? ? this.list.push(this.inputValue),
? ? ? this.inputValue=''// 清空inputValue內容
? ? ? }
? ? ? }
})
</script>
查看全部 -
<div :title="title">hello world</div>雙引號里面的title可以隨便取名字，只需與data中的對應起來即可
<div id="root">
<div :title="aa">hello world</div>
</div>
<script>
new Vue({
el: '#root',
data: {
aa: 'this is hello world'
}
})
</script>
運行結果不變
查看全部 -
用v-if 還是v-show??
v-show更好 因為每次不會銷毀dom ，在創造dom,性能會好一些
但是div標簽隱藏顯示頻率不是那么大，只做一次顯示隱藏，這個時候用v-if更合適
<!--vue 鐘三個常見的指令 v-if v-show v-for 指令-->
<div id="root">
<!--v-if (控制dom存在與否)條件為 false 清除div 將元素從 DOM 中移除-->
<div v-if="show">hello world</div>
<!--v-show (控制dom的顯示與否)當變量值為 false 時div 標簽會被隱藏，并不會從dom 被清除 而只是把div標簽屬性變成了display：none-->
<!--<div v-show="show">hello world</div>-->
<buton @click="handleClick">toggle</buton>
<!--v-for 控制一組數據 來循環顯示dom結構-->
v-for 能把list數組循環展示在li ?有多少數據就生成多少li
? ? ? ? ? ? ? ? ? ? ? ?適用v-for做循環展示時，需要添加:key=""，為了提高渲染效率，要求：每渲染一條的key值都是不同的
? ? ? ? ? ? ? ? ? ? ? ? 為避免數組內容重復
<ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
//計算屬性
new Vue({
el:"#root",
data:{
show:true,
list:[1,2,3]
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
查看全部
舉報