x項目: MOOC qunar
基礎:js es6 webpack npm
知識點:
axios ajax數(shù)據(jù)獲取
vue-router 頁面路由
vuex 多個組件數(shù)據(jù)共享
stylus :樣式
組件:
異步組件:代碼上線
遞歸組件:
共用組件:
插件:
項目:
上線流程
前后端同調(diào)
vue基礎:
1,一個VUE項目往往是由多個vue實例對象組成的,
2,組件也是vue的實例對象
3,vm.$xxx //xxx是vue實例對象中的屬性或方法
初始化實例對象:
new vue({
el:'#app'
data:{}
methods:{}
1.是方法，主動調(diào)用
2.每次需要重新加載
3.無緩存性
watch:{}
1.是觀察的動作杈曲，自動執(zhí)行
2.應用：監(jiān)聽props孝赫，emit的傳值
3.具有緩存性析蝴，頁面重新渲染值不變化,計算屬性會立即返回之前的計算結(jié)果懂诗，而不必再次執(zhí)行函數(shù)
指令:
v-for='item in list'
v-on:click="綁定事件" 簡寫@click
v-model='雙向數(shù)據(jù)綁定'
v-bind:content="item" 賦值?
v-text='name1'
v-html="name2+'hahA'" 解析html
{{name+'haha'}}
以上三個表達式中可拼接字符串
條件渲染:
1v-if='' 值控制是否存在dom
2v-show='' display:none 沒有dom操作,相對性能高
3v-if v-else 便簽必須連在一起寫 (if值為false時顯示else的內(nèi)容)
v-if v-else-if v-else
當input內(nèi)值被復用時,用不同的key值區(qū)別,防止復用bug,唯一標識
列表渲染:
<div v-for='(item,index) of info' :key='item.id'>
給info添加新值時:set方法:
對象:vue.set(info,index,item)
樣式綁定:
1對象法:class='{activated:isactivated}'
//控制data中的isactivated
2數(shù)組法
:class='[activated,changed,,]'
3:style="[c1,{background:'yellow'}
組件:
注冊組件:
1組件名字,駝峰命名,,在使用時需將大寫字母變?yōu)?-'+'小寫'
2引用父組件加props
3
組件相關用法:
一:is屬性: is="組件名"
解決模板命名與html標簽嵌套規(guī)則沖突的時候可能會產(chǎn)生bug的情況
例如;<tabel><tr> <ul><li> <ol><li> <dl><dt><dd> <select><option>
<aa-a><aa-a>
方法一:
注冊全局組件 :
Vue.component('組件名aaA',{})
方法二:
注冊局部組件
var zujian={
props:['content'] //要接受的父組件的?值
template:"<li>{{content}}<li>"
}
組件傳值:
父傳子:props:[]
子傳父:
生命周期鉤子:
beforeCreate 實例初始化后,數(shù)據(jù)觀測事件監(jiān)聽未被配置之前
created數(shù)據(jù)觀測事件監(jiān)聽配置后,實例創(chuàng)建完成,未掛載el
beforeMount掛載el到html前,相關render函數(shù)被調(diào)用,讀取模板
mounted掛載el后
beforeDestroy實例銷毀前
destoryed實例銷毀后
beforeUpdated 數(shù)據(jù)有更新,未被渲染前
updated數(shù)據(jù)更新渲染后
