html+css（6）

Vue學習

---

• 數據要寫在data:{}中
• v-model="":雙向綁定
  • .lazy:延遲
  • .trim:去除兩端空格
  • .number:自動識別爲數字
  • 用於input、textarea、select
• v-show/if="":有輸入才顯示
• v-for="":可以通過console直接push數據
• v-bind：綁定href、src、class(v-bind可省略）
  v-model和v-bind區別
• v-on：綁定事件
  • 方法定義在Vue的methods中
  • v-on可：簡略寫出@
• 控制流指令：v-if=“role == ‘admin’”
• 計算屬性:computed:{ss:function(){},
• 組件：定義了組件之後一定要new Vue({el:’#app’})
• 全局及局部組件

new Vue({
el:'#app',
components:{
    'alert':{
    template:'<button @click="onClick">text</button>',
    methods:{
    onClick:function(){
    alert('yo')
    }
}}}})

• 創建組件
  • data裏面是function
  • 函數中要用的變量應該在return中就聲明，並且用的時候要加上this.
• 組件通信
  • 父子通信：props:[‘attr’]
  • 子父通信：this.$emit(‘函數名’,{參數})
  • 任意組件通信：一個例子
    • template裏面的東西必須包含在一個div內
    • var event=new Vue（）作爲兩者之間的橋樑
    • event.$on( event, callback )
      監聽當前實例上的自定義事件。事件可以由vm.$emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。
    • event.$emit( event, […args] )
      觸發當前實例上的事件。附加參數都會傳給監聽器回調。
    • mounted:function(){}:在該組件初始化完成的一瞬間就開始執行function內
    • 在mounted內先保存this：var me=this
• 過濾器filter:官方說明
  • Vue.filter(‘filter_name’,function(val,xx){return}
  • {{val|filter_name(‘傳入xx的參數’)}}
  • filter_name後面可帶多個參數
• 自定義指令directive：
  • Vue.directive(‘dir_name’,function(el,binding){}) el、binding含義
  • 當position定位fixed之後只能通過top/left等定位position的四個狀態
  • @click=“”中不僅可以綁定函數，還可以直接是表達式
  • 修飾符和傳參：
    • .true：通過binding.warning獲取，===‘true’
    • .bottom.left:通過binding.modifiers獲取然後迭代

var position=binding.modifiers;
for(var key in position)
{
    if(position[key]{
        el.**style[key]**='10px';
    }
}

• 混合mixins:封裝不同組件裏面的相同

var base={methods:{},data：function{return{}},}
mixins[base],

• 插槽slots
  
  

Vue Router

• route & routes & router
• router-link &router-view（隱藏和渲染）這兩個是成對出現的！！！
• 命名路由：
  • $route.params.name
  • $route.query.age
• 子路由：children:[{path:‘more’,component:{template:``}],在父路由的template中加上<router-link to=“more” append>和router-view
• 手動訪問路由：this.router.push({name:‘routename’,(params:{name:’’}) 注意：params只能用name來引入路由，所以此處換成path:’/'錯誤！
• 命名視圖：有多個router-view時
  • 給router-view加上name屬性標識

,components（pl.）{
    sidebar:{
        component:{
            template:``
        }
    },
}

• 導航鉤子：（applied in 權限管理）

  • router.beforeEach(function(to,from,next){})
  • to.path=’’
  • next(’’)導航到某處，不填則無影響
  • router.afterEach(function(to,from){})

• 路由匹配：登陸實例

  • 元數據meta：{xxx：true}meta的用法
  • to.matched:to路徑的所有匹配組成的數組
  • to.matched.some(function(item){return item.meta.xxx?
  • 注意在此處不要給每個都加相同的meta，ortherwise陷入無限循環！！