Vue針對性筆記

Github原文閱讀

MVVM(Model-View-ViewModel)模型

MVVM分爲Model、View、ViewModel三部分。

• Model表明數據模型，定義數據和業務邏輯，訪問數據層
• View表明視圖，展現頁面結構、佈局和外觀（UI）
• ViewModel表明視圖模型，負責監聽Model數據變化並更新視圖，處理用戶交互 Model和View是經過ViewModel，Model的數據變化會觸發View的更新，View的交互操做也會使Model的數據發生改變。只須要針對數據進行維護操做，數據的自動同部不須要經過操做dom實現。

Vue指令

指令	做用	指望數值類型
v-text	更新元素文本內容	string
v-html	更新元素的innerHTML	string
v-show	條件渲染。根據表達式的真假值，控制元素的顯示或隱藏	any
v-if	條件渲染。根據表達式的值的真假條件選擇是否渲染元素這個節點	any
v-else	條件渲染。根據v-if的相反條件進行元素渲染	any
v-else-if	條件渲染。作v-if的鏈式調用	any
v-for	列表渲染。對數據進行遍歷渲染，最好提供key值	Array / Object / number / string
v-on	事件處理。綁定事件監聽器，事件類型由參數指定，表達式能夠是方法名或內聯語句。	Function / Inline Statement / Object
v-bind	動態綁定。動態綁定一個或多個特性，或一個組件prop到表達式	any (with argument) / Object (without argument)
v-model	表單綁定。在表單或組件是上建立雙向綁定	隨表單控件類型變化
v-pre	跳過該元素和它的子元素的編譯過程
v-cloak	設置 [v-cloak] { display: none }能夠在渲染時延後加載Vue實例，避免閃現
v-once	元素和組件只渲染一次，從新渲染,元素/組件及其全部的子節點將被視爲靜態內容並跳過

Vue響應式原理

Vue實例化時，遍歷訪問data的全部屬性，使用Object.defineProperty將其屬性所有轉換爲getter/setter進行依賴追蹤以便修改屬性時進行變動通知，每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。

Vue雙向數據綁定

簡單實現，有一個子組件輸入框，一個按鈕，父組件經過props傳值給子組件，當按鈕增長時，子組件經過$emit通知父組件修改相應的props值。

<div id="app">
        <parent></parent>
    </div>
    <script>
        var childNode = {
            template:`
                <div class = "child">
                    <div>
                        <span>子組件數據</span>
                        <input v-model="childMsg">
                        <button @click=add>+1</button>
                    </div>
                </div>
            `,
            data(){
                return{
                    childMsg:0
                }
            },
            methods: {
                add(){
                    this.childMsg++;
                    this.$emit('update:foo',this.childMsg)
                }
            }
        };
        var parentNode = {
            template:`
                <div class="parent">
                    <div>
                        <span>父組件數據:{{msg}}</span>
                        <child :foo.sync="msg"></child>
                    </div>
                </div>
            `,
            components:{
                'child':childNode
            },
            data(){
                return{
                    'msg':0
                }
            }
        };
        let vm = new Vue({
            el:'#app',
            components:{
                'parent':parentNode
            }
        })複製代碼

Vue的生命週期鉤子

鉤子	調用	類型	是否在服務端渲染期間調用
beforeCreate	Vue實例初始化以後，數據觀察和事件配置以前	Function	Yes
create	實例建立完成（數據觀察/屬性和方法運算/事件回調）以後，掛載以前	Function	Yes
beforeMount	掛載開始以前，render函數首次調用	Function	Yes
mounted	實例掛載完成以後	Function	No
beforeUpdate	DOM被patch以前調用進行數據修改	Function	No
updated	組件 DOM 更新完成，避免在此期間更改狀態	Function	No
actived	keep-alive 組件激活時	Function	No
deactived	keep-alive 組件停用時	Function	No
beforeDestroy	實例銷燬以前	Function	No
destroyed	實例銷燬	Function	No
errorCaptured	當任何一個來自後代組件的錯誤時被捕獲時 收到三個參數：錯誤對象、發生錯誤的組件實例，和一個包含錯誤在何處被捕獲信息的字符串 返回 false，以阻止該錯誤繼續向上冒泡	Function	No

Vue組件

組件能夠是頁面中每個區域板塊，也能夠是某一個複用業務邏輯，也能夠是每個單頁面。

組件的構成

就以上面的雙向數據綁定實現爲例：

• 屬性props：父組件使用props定義數據屬性，向子組件傳遞數據
• 自定義事件event：經過$emit觸發自定義事件event向父組件發送消息
• 插槽slot：slot進行組件內容分發，插入子組件內容

組件通訊

• 父子組件通訊：父組件使用props向子組件通訊，子組件使用$emit向父組件傳遞消息
• 非父子組件通訊：父組件可使用v-on監聽子組件的任何事件，子組件使用$emit傳入事件，這樣父組件就會收到事件並更新
• 跨級組件通訊：使用Vuex比較好管理

Vue-router路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

• 嵌套的路由/視圖表
• 模塊化的、基於組件的路由配置
• 路由參數、查詢、通配符
• 基於 Vue.js 過渡系統的視圖過渡效果
• 導航控制
• 帶有自動激活的 CSS class 的連接
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行爲

下面是一個簡單路由的實現：

<div id="app" class="demo">
      <h1>Hello App!</h1>
      <p>
          <!-- 經過router-link導航 -->
          <!-- 經過傳入'to '屬性指定連接-->
          <!--  <router-link> 默認會被渲染成一個 `<a>` 標籤-->
              <router-link to="/foo">go to Foo</router-link>
              <router-link to="/bar">go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的組件將渲染在這裏 -->
      <router-view></router-view>
   </div>
   <!-- 
       0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)
       1. 定義 (路由) 組件。
       2.定義路由
    -->
   <script>
       //1. 定義 (路由) 組件。
       const Foo = {template:'<div>foo</div>'};
       const Bar = {template:'<div>bar</div>'};
       //2.定義路由
       //每一個路由應該映射一個組件。其中component能夠是經過Vue.extend()建立的組件構造器
       //或者只是一個組件配置對象
       const routes = [
           {path:'/foo',component:Foo},
           {path:'/bar',component:Bar}
       ]

       //3.建立router實例，而後傳‘routes’配置
       const router = new VueRouter({
           routes//（縮寫）至關於routes:routes
       })

       //4.建立和掛載根實例
       //要記得經過router配置參數注入路由，從而讓整個應用都有路由功能
       
       const app = new Vue({
           router
       }).$mount('#app');複製代碼