一、初識(shí)VUE
資料來源:vue官網(wǎng)API文檔
安裝:同一般JS組件安裝,引用CDN、或者引用其js文件
兼容性:Vue?不支持?IE8及以下版本,因?yàn)?Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5的瀏覽器。
二、基礎(chǔ)語法(散裝梳理)
var vm = new Vue({})
demo:
new Vue({
????el: "#vue-app",
????data: {
????????name: "Vue",
????????isButtonDisabled: true,?
????????number:1,
????????ok:true,
????????message:"1234"
????},
????methods: { greet: function () { return "hello VUE"; } } });
// el? 綁定元素
// data 是Vue實(shí)例的數(shù)據(jù)對(duì)象。Vue將會(huì)遞歸將data的屬性轉(zhuǎn)換為getter/setter,從而讓data屬性能響應(yīng)數(shù)據(jù)變化
// method 綁定事件
/**
*其他屬性:
* computed: 計(jì)算屬性函數(shù)computed將被混入到Vue實(shí)例中。所有g(shù)etter和setter的this上下文自動(dòng)地綁定為Vue實(shí)例
* watch: 提供了一種通用的方式來觀察和響應(yīng)Vue實(shí)例上的數(shù)據(jù)變動(dòng):watch屬性。watch屬性是一個(gè)對(duì)象,鍵是需要觀察的表達(dá)式,值是對(duì)應(yīng)回調(diào)函數(shù),回調(diào)函數(shù)得到的參數(shù)為新值和舊值。值也可以是方法名,或者包含選項(xiàng)的對(duì)象。Vue實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用$watch(),遍歷watch對(duì)象的每一個(gè)屬性
*render: (h)=>{h(App)}, //DOM成員(3/3)字符串模板的代替方案,允許你發(fā)揮 JavaScript 最大的編程能力
* props? ?props:['counts','ids'], 用于父子組件的eventbus傳值,是數(shù)組或?qū)ο螅琾rops的成員是子組件接收的來自父組件的數(shù)據(jù)
*propsData? 沒用過。創(chuàng)建實(shí)例時(shí)傳遞 props。主要作用是方便測(cè)試 filters //資源(1/3)
*filters('filterName',(input,function(){ return newvalue })) 包含 Vue 實(shí)例可用過濾器的哈希表。
* directives? ?包含 Vue 實(shí)例可用指令的哈希表。
* components? ?(即該組件的子實(shí)例)這里是包含 Vue 實(shí)例可用組件的哈希表。
* name /? 允許組件模板遞歸地調(diào)用自身。注意,組件在全局用 Vue.component() 注冊(cè)時(shí),全局 ID 自動(dòng)作為組件的 name
* parent? 指定已創(chuàng)建的實(shí)例之父實(shí)例,在兩者之間建立父子關(guān)系。子實(shí)例可以用 this.$parent 訪問父實(shí)例,子實(shí)例被推入父實(shí)例的 $children 數(shù)組中。
* mixins? mixins 選項(xiàng)接受一個(gè)混合對(duì)象的數(shù)組。Mixin鉤子按照傳入順序依次調(diào)用,并在調(diào)用組件自身的鉤子之前被調(diào)用
* extends? ?允許聲明擴(kuò)展另一個(gè)組件。這主要是為了便于擴(kuò)展單文件組件。這和 mixins 類似,區(qū)別在于,組件自身的選項(xiàng)會(huì)比要擴(kuò)展的源組件具有更高的優(yōu)先級(jí)。
* delimiters? 改變純文本插入分隔符。
* functional? ?使組件無狀態(tài)(沒有 data )和無實(shí)例(沒有 this 上下文)。他們用一個(gè)簡(jiǎn)單的 render 函數(shù)返回虛擬節(jié)點(diǎn)使他們更容易渲染。??
*/
其指令與angularjs指令類似