一、初識VUE
資料來源:vue官網(wǎng)API文檔
安裝:同一般JS組件安裝抓半,引用CDN喂急、或者引用其js文件
兼容性:Vue?不支持?IE8及以下版本,因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性廊移。但它支持所有兼容 ECMAScript 5的瀏覽器探入。
二懂诗、基礎語法(散裝梳理)
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ù)據(jù)對象。Vue將會遞歸將data的屬性轉(zhuǎn)換為getter/setter殃恒,從而讓data屬性能響應數(shù)據(jù)變化
// method 綁定事件
/**
*其他屬性:
* computed: 計算屬性函數(shù)computed將被混入到Vue實例中。所有getter和setter的this上下文自動地綁定為Vue實例
* watch: 提供了一種通用的方式來觀察和響應Vue實例上的數(shù)據(jù)變動:watch屬性离唐。watch屬性是一個對象,鍵是需要觀察的表達式亥鬓,值是對應回調(diào)函數(shù),回調(diào)函數(shù)得到的參數(shù)為新值和舊值嵌戈。值也可以是方法名,或者包含選項的對象熟呛。Vue實例將會在實例化時調(diào)用$watch(),遍歷watch對象的每一個屬性
*render: (h)=>{h(App)}, //DOM成員(3/3)字符串模板的代替方案庵朝,允許你發(fā)揮 JavaScript 最大的編程能力
* props? ?props:['counts','ids'], 用于父子組件的eventbus傳值,是數(shù)組或?qū)ο蟪ザ蹋琾rops的成員是子組件接收的來自父組件的數(shù)據(jù)
*propsData? 沒用過。創(chuàng)建實例時傳遞 props昔逗。主要作用是方便測試 filters //資源(1/3)
*filters('filterName',(input,function(){ return newvalue })) 包含 Vue 實例可用過濾器的哈希表。
* directives? ?包含 Vue 實例可用指令的哈希表婆排。
* components? ?(即該組件的子實例)這里是包含 Vue 實例可用組件的哈希表。
* name /? 允許組件模板遞歸地調(diào)用自身段只。注意,組件在全局用 Vue.component() 注冊時赞枕,全局 ID 自動作為組件的 name
* parent? 指定已創(chuàng)建的實例之父實例,在兩者之間建立父子關系炕婶。子實例可以用 this.$parent 訪問父實例,子實例被推入父實例的 $children 數(shù)組中柠掂。
* mixins? mixins 選項接受一個混合對象的數(shù)組。Mixin鉤子按照傳入順序依次調(diào)用,并在調(diào)用組件自身的鉤子之前被調(diào)用
* extends? ?允許聲明擴展另一個組件涯贞。這主要是為了便于擴展單文件組件。這和 mixins 類似宋渔,區(qū)別在于,組件自身的選項會比要擴展的源組件具有更高的優(yōu)先級傻谁。
* delimiters? 改變純文本插入分隔符。
* functional? ?使組件無狀態(tài)(沒有 data )和無實例(沒有 this 上下文)审磁。他們用一個簡單的 render 函數(shù)返回虛擬節(jié)點使他們更容易渲染。??
*/
其指令與angularjs指令類似