Vue開發(fā)風格——傳統(tǒng)方法應用vue.js

傳統(tǒng)方法引用vue.js.png

Vue開發(fā)風格——單個組件式

獨立組件式.png

組件

基本操作

• 創(chuàng)建一個組件構(gòu)造器
• 注冊組件，并制定組件引用在Html中的標簽

• 將組件放到Vue實例掛載的Html元素中

  
  
  組件使用的步驟

知識點

• 局部組件與全局組件
• props傳參；單向傳參；雙向傳參;一次性傳參
  • //myName是單向傳參， myAge是雙向傳參，mySex是一次性傳參 <my-component v-bind:my-name="name" v-bind:my-age.sync="age" v-bind:my-sex.once="man"></my-component>
    
    props傳參
• 內(nèi)容分發(fā)，slot作為原始內(nèi)容的插槽。（混合父組件的內(nèi)容與子組件自己的模板）
  • 默認：父組件模板的內(nèi)容在父組件作用域內(nèi)編譯，子組件模板的內(nèi)容在子組件作用域內(nèi)編譯；有了內(nèi)容分發(fā)，子組件之間插入父組件的DOM。

  • 指定name名稱的slot；組件中使用slot，以下圖為例，不需要每次都指定3個slot。

    
    
    指定name的slot
• 父子組件互相訪問

  • 父組件中，通過this.$children(包含所有子組件的實例的數(shù)組) 或 $refs.索引ID 訪問子組件。
    

    $refs.cc1.msg

  • 子組件中訪問父組件this.$parent

  • 子組件訪問根組件$root

  • 組件樹中通信

    • $on()監(jiān)聽事件
    • $emit()在它上面觸發(fā)事件
    • $dispatch()派發(fā)事件，事件沿著父鏈冒泡
    • $broadcast()廣播事件，事件向下傳到給所有的后代

Vue.js組件的API 由三部分組成： prop, slot 和事件

• prop允許外部環(huán)境傳數(shù)據(jù)給組件
• slot允許外部環(huán)境插入內(nèi)容到組件的視圖結(jié)構(gòu)內(nèi)
• 事件:on/emit/dispatch/broadcast允許組件觸發(fā)外部環(huán)境的action

過濾器

• {{}}差值的末尾添加一個管道符|
• 過濾器也可以串聯(lián)或者接受參數(shù)
  • {{message | filterA | filterB }}
  • {{message |filterA('arg1', 'arg2') }} 后邊的arg1傳給了過濾器的第二個參數(shù) 過濾器第一個參數(shù)是數(shù)據(jù)本身

語法糖

• v-bind 縮寫為 :
• v-on 縮寫為@

vue-router

基礎(chǔ)步驟

1. 引入依賴（HTML）：<script src="js/vue.js"></script><script src="js/vue-router.js"></script>
2. 創(chuàng)建組件Home和About（JS）
   var Home = Vue.extend({ template:'', data:function(){}});
var About = Vue.extend({template:'',data:function(){}});
3. 創(chuàng)建Router （JS）
   //調(diào)用構(gòu)造器VueRouter,創(chuàng)建一個路由器實例
var router = new VueRouter();
4. 映射路由（JS）
   router.map({ '/home':{component:Home}, //路由的key + 表示該條路由映射的組件 'about':{component:About} })
5. v-link指令跳轉(zhuǎn)到指定路徑（HTML）
   <a v-link="{path:'/home'}">Home</a>
<a v-link="{path:'/about'}">About</a>
6. <router-view></router-view> （HTML） 放在需要渲染相應組件的地方
7. 啟動路由（JS）
   var App = Vue.extend({});
router.start(App,'#app');

原理
vue-router ————> v-link指令的路由映射 ————>由路由映射找到匹配的組件————>渲染到<router-view>標簽處

嵌套路由

• /home/news 及home/message是/home的子路由
• News和Message組件并不是Home的子組件

具名路徑

• 路由映射部分router.map，對應的路由name='路由名'
• v-link={path:'/home'} 變?yōu)?v-link={name:'路由名'}

v-link方便用戶在vue-router應用的不同路徑之間跳轉(zhuǎn)；執(zhí)行時調(diào)用router.go
v-link自動設(shè)置<a>的href屬性

路由對象

vue-router應用中，路由對象被注入每個組件中。
賦值 this.$route

路由對象的屬性

• {{$route.path}}當前路徑絕對路徑
• {{$route.params}}當前路由請求的參數(shù)
• {{$route.query}}路由參數(shù)查詢
• {{$route.router}} 路由器
• {{$route.matched}}
• {{$route.name}} 當前路徑的名字，具名路徑name

activeClass 讓鏈接顯示選中

• 通過v-link指令設(shè)定<a v-link = "{path:'/home' , activeClass:'active'}"></a>
• 鉤子函數(shù)<li :class="currentPath == '/home/news' ? 'active': ''"><a v-link="{ path: '/home/news'}">News</a></li>

每個組件一個route選項，route選項有一系列鉤子函數(shù)
切換路由時執(zhí)行這些鉤子函數(shù)
鉤子函數(shù)包括：data鉤子函數(shù)，用于加載和設(shè)置組件

鉤子函數(shù)

• 全局鉤子函數(shù)：定義在全局的路由對象中
  • beforeEach 路由切換開始時調(diào)用
  • afterEach 每次路由切換，成功進入激活階段時被調(diào)用
• 組件鉤子函數(shù)：定義在組件的route選項中
  • data 設(shè)置組件的data （afterEach期執(zhí)行）
  • activate 激活組件（afterEach期執(zhí)行）
  • deactivate 禁用組件 （beforeEach期執(zhí)行）
  • canActivate 組件是否可以被激活（beforeEach期執(zhí)行）
  • canDeactivate是否可被禁用（beforeEach期執(zhí)行）
  • canReuse 是否可被重用（beforeEach期執(zhí)行）
• 路由切換， 鉤子的參數(shù)為transition對象
  • transiton.to 將要切換到的路徑的路由對象
  • transition.from 當前路徑的路由對象
  • transition.next() 調(diào)用此函數(shù)處理切換過程的下一步
  • transition.abort([reason]) 調(diào)用此函數(shù)終止或拒絕此次奇幻
  • transition.redirect(path)取消當前切換并重定向到另一個路由

路由階段

• 檢查視圖結(jié)構(gòu)是否具有可重用組件？檢查canReuse。可重用階段
• 檢查當前組件是否能夠停用及新組件是否可以激活？canDeactivate與canActivate驗證階段
• 所有鉤子都被調(diào)用并沒有終止切換，切換就合法。deactivate activate data激活階段

this.$router.go(-1)
this.$router.push('/目標路由')

Vuex

組件之內(nèi)變量的作用域獨立，Vuex可以管理數(shù)據(jù)在組件中的規(guī)范交互

Vuex的特點

• 單一狀態(tài)樹數(shù)據(jù)管理模式： .state是應用層全局data對象
• 單向數(shù)據(jù)管理模式：事件驅(qū)動
• 單入口管理模式： 提交mutation來更改store的狀態(tài)
• 生命周期 ：應用不退出，不刷新，Vuex一直保持

Vuex語法

• store.state
• getter : 全局computed
• mutation : 類似事件，包含事件名和該事件觸發(fā)后的回調(diào)函數(shù)；修改state的事件（同步）
• action ：提交mutation的代碼（異步）

const store = new Vuex.Store({
  state:{ count:1},
  mutation:{
      increment(state){ state.count ++; }       //事件 + 事件回調(diào)函數(shù)處理邏輯
  }
})
//執(zhí)行
store.commit(' increment ');

Webpack

• 模塊打包工具：將靜態(tài)資源壓縮在指定的文件中
• 資源暴露給模塊，commonJS 規(guī)范 module.exports = function(){}
• webpack {入口文件} {打包生成文件} 執(zhí)行打包
• 配置webpack.config.js，webpack便等同于執(zhí)行打包語句
• 配置package.json ，配置npm start執(zhí)行打包語句
  
  webpack配置簡化打包流程