vue 底層自己操作dom,不需要程式設計師再管,忽略dom操作,和資料繫結
vue 單頁面,嚴禁重新整理
el == element 元素【支援 id 和 class…】
說明demo1
el:'#div1',
data:
});
指 #div1 控制範圍內所有 mes1 都為 hello vue,所有 mes1_1 都為 你好,世界說明demo2–支援多個vue例項,但不建議
vue.js開發時,通常頁面上只建立乙個vue例項;不過可以多個vue例項
【可以:div1 和 div2 巢狀乙個外層div,vue例項只繫結外層的div】
}
} }
el:'#div1',
data:
});el:'.div2',
data:
})
每個 vue 應用都是通過用 vue 函式建立乙個新的 vue 例項開始的
v-if : 當為false時,dom 記憶體都沒有
}
el:'#div1',
data:
});
v-for : 在哪個標籤加,那個標籤就迴圈
ul 迴圈三次,每個ul只有乙個li,li內容為tags的對應的內容:
el:'#div1',
data:,,]
}});
若放在li裡,則為乙個ul,裡面三個li
v-on
新增元素
反轉訊息
el:'#div1',
data:,,]
},methods:)
},reverse_mes1:function ()
}});
以上都為單向繫結,即資料驅動dom
el:'#div1',
data:
});
} v-text v-once v-html
1this is:}
v-text 當出現異常時,不會顯示}
v-bind :
v-on @
測試
v-cloak
}
每個元素都是從vue開始,必須有vue(),否則沒有該元素如 div3 不顯示vue例項 通過 vue元件 初始化,所以 vue元件 必須在 vue例項 之前
# 不顯示
元件繫結資料
元件迴圈
參考文件:
$data 和 $el
el:'#div1',
data:,,]
}});
$ref : 獲取ref=』…'的dom元素,對寫死的屬性進行改變
}
}改變
el:'#div1',
data:,
methods:
}});
vm.$watch(exporfn,callback())
}
}改變
el:'#div1',
data:,
methods:
}});
// 比較新值和舊值,當值變化時,進行函式
alert(newval)
})
使用一次則取消
alert(newval);
unwatch()
}) vm.$set(target,propertyname/index,value)
vm.$delete(target,propertyname/index)
vue呼叫元件的屬性 Vue 元件例項屬性的使用
前言 因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會...
Vue 元件例項屬性的使用
因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會貼需要...
Vue 元件例項屬性的使用
因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會貼需要...