基本用法

一、vuejs簡介

• 是一個構(gòu)建用戶界面的框架
• 是一個輕量級的MVVM（Model-View-ViewModel）夺溢，其實就是所謂的數(shù)據(jù)的雙向綁定
• 數(shù)據(jù)驅(qū)動和組件化的前端開發(fā)
• 通過簡單的API就能實現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件
  指令：
  用來擴展html標簽的功能

vue與其他框架的對比

• 簡單佩耳、易學、更輕量
• 指令v-xxx開頭
• HTML + JSON數(shù)據(jù)
• 開發(fā)者 尤雨溪 華人

這幾個框架都不兼容低版本IE

二歉摧、起步

1. 下載核心庫vue.js
   目前有1.0和2.0兩個大版本
   vue2.0與vue1.0相比牡彻，最大的變化就是引入了Virtual DOM（虛擬DOM），頁面的更新效率更高拴孤，速度更快脾歧。
2. hello word

<div class="app" >
        {{msg}}
    </div>
    <script src="vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            new Vue({
                el:".app",
                data:{
                    msg:"HelloWord!"
                }
            });
        }
    </script>

3. 可以安裝vue-devtools插件甲捏，便于在Chrome中調(diào)試vue
   可以在GITHUB上下載vue-devtools演熟，解壓后，將文件中的chrome拖放到擴展程序中司顿。

VUE中常用指令

v-model：雙向數(shù)據(jù)綁定芒粹，一般用于表單元素
v-for：對數(shù)組或者對象進行循環(huán)操作
v-on:用來綁定事件，用法：v-on:事件="函數(shù)"
v-show:用來顯示或者隱藏元素大溜，實質(zhì)是通過display實現(xiàn)
v-if
...

四化漆、事件和屬性

1. 事件
   1.1 事件簡寫
   v-on:事件，簡寫成：@事件名
   1.2 事件對象
   vue里面的事件對象使用event包含了事件事件相關(guān)的信息钦奋，如事件源座云、事件類型、偏移量等等...
   如：點擊按鈕付材，將對應(yīng)按鈕的文字返回給我

<div class="app" >
        <input type="button" value="點我" @click="print($event)">
    </div>
    <script src="vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            let vm = new Vue({
                el:".app",
                data:{
                    msg:"HelloWord!"
                },
                methods:{
                    // print:function(event){
                    //  console.log(event.target.value);                        
                    // }
                    // 或者：如下結(jié)果一樣的
                    print(event){
                        console.log(event.target.value);                        
                    }
                }
            });
        }
    </script>

1.3 事件冒泡
阻止事件冒泡：
（1）原生JS朦拖，依賴于事件對象
（2）vue方式，不依賴于事件對象
在事件里加個stop修飾符： @click.stop

1.4 事件默認行為
阻止默認事件
（1）原生JS厌衔，依賴于事件對象 e.preventDefault()
（2）vue方式璧帝，不依賴于事件對象
在事件里加個prevent修飾符： @click.prevent

1.5 關(guān)于鍵盤事件
@keydown、@keypress富寿、@keyup
比如我們在判斷按鍵是不是回車的時候睬隶，不用掛在判斷keycode了∫承欤可以加個修飾符：
@keydown.13 或者keydown.enter
其實13是ACILL碼值苏潜，enter是vue內(nèi)部做了映射，也就是回車鍵的別名变勇。
上：keydown.38或者keydown.up
...
注意：默認沒有@keydown.a/b/c.......,可以自定義恤左。成為自定義鍵碼或者自定義鍵位別名。

1.6 事件修飾符
.stop
調(diào)用event.stopPropagation();
.prevent
調(diào)用event.preventDefault();
.{keyCode | keyAlias}
只當事件是從特定鍵觸發(fā)時，才觸發(fā)回調(diào)赃梧。
.native
監(jiān)聽組件根元素的原生事件
.once
只觸發(fā)一次回調(diào)

2. 屬性
   2.1 屬性的綁定和簡寫
   v-bind用于屬性綁定滤蝠，
   格式v-bind:屬性="",可簡寫為:屬性=""
   2.2 class和style屬性

五、 模板

1. 簡介
   Vue.js使用基于HTML的模板語法授嘀，可以將DOM綁定到Vue實例中的數(shù)據(jù)模板就是{{}},用來進行數(shù)據(jù)綁定物咳，顯示在頁面中，這種{{}}叫做Mustache語法蹄皱。
2. 數(shù)據(jù)的綁定方式
   2.1 雙向綁定
   v-model
   2.2 單項綁定
   方法1：使用{{}}览闰，可能會出現(xiàn)閃爍問題，可以使用v-cloak解決巷折。
   方法2：使用v-text压鉴、v-html
3. 其他指令
   v-once 數(shù)據(jù)只綁定一次
   v-pre 直接原樣顯示

六、過濾器

1. 簡介
   用來過濾模型數(shù)據(jù)的锻拘，在顯示之前進行數(shù)據(jù)的處理和篩選油吭。
   語法：

 {{data | filter(參數(shù)) | filter(參數(shù))}}

2. 關(guān)于 內(nèi)置過濾器
   Vue1.0中內(nèi)置了許多過濾器，如：
   currency署拟、uppercase婉宰、lowercase
   limitBy
   orderBy
   filterBy
   在Vue2.0中已經(jīng)移除了所有內(nèi)置過濾器。解決方案：
   （1）使用第三方工具庫：如loadash推穷、date-fns日期格式化心包、accounting貨幣格式化；
   （2）使用自定義過濾器馒铃；

使用axios/vue-resource發(fā)送HTTP請求

一蟹腾、發(fā)送AJAX請求

1. 基本介紹
   vue本身不支持發(fā)送AJAX請求，需要時vue-resource区宇、axios等插件實現(xiàn)娃殖。
   axios時一個基于Promise的HTTP請求客戶端，用來發(fā)送請求萧锉，官方Vue2.0推薦使用axios珊随，同時不再對vue-resource不再更新維護了。
   參考 ：GitHub上搜索axios柿隙，查看API
2. 使用axios發(fā)送AJAX請求
   2.1 安裝axios并引入
   2.2基本用法：
   Performing a GET request

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Performing a POST request

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Performing multiple concurrent requests

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

Requests can be made by passing the relevant config to axios.
axios(config)

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
// GET request for remote image
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

axios(url[, config])

// Send a GET request (default method)
axios('/user/12345');

更多知識可以查看官方https://github.com/axios/axios

3. vue-resource發(fā)送請求
   可以參考vue-resource的APIhttps://github.com/pagekit/vue-resource

另外還有jsonp的一些內(nèi)容叶洞。以后了解。

vue生命周期及實例的屬性和方法

一禀崖、vue的生命周期

vue實例從創(chuàng)建到銷毀的過程衩辟，成為生命周期，共有八個階段波附；

二艺晴、計算屬性

1. 基本用法
   計算屬性也是用來存儲數(shù)據(jù)的昼钻，但是具有以下幾個特點：
   1.1數(shù)據(jù)可以進行邏輯處理操作
   1.2 對計算屬性中的數(shù)據(jù)進行監(jiān)控
2. 計算屬性VS方法
   將計算屬性的get函數(shù)定義為一個方法也可以實現(xiàn)類似的功能。
   區(qū)別：
   2.1 計算屬性是基于它的依賴進行更新的封寞，只有在相關(guān)依賴發(fā)生改變時才能更新變化然评。
   2.2 計算屬性是有緩存的，只要依賴關(guān)系沒有發(fā)生改變狈究，多次訪問計算屬性得到的值都是之前緩存的計算結(jié)果碗淌，不會多次執(zhí)行。
3. get和set
   3.1 計算屬性有兩部分組成：get和set抖锥，分別用來獲取計算屬性和設(shè)置計算屬性亿眠，默認只有g(shù)et方法，如果需要set磅废，要自己添加纳像。

三、Vue實例的屬性和方法

1. 屬性
   vm.屬性名 獲取data中的屬性
   vm.$el 獲取vue實例相關(guān)的元素
   vm.$data 獲取數(shù)據(jù)對象data
   vm.$options 獲取自定義屬性
   vm.$refs 獲取所有添加ref屬性的元素拯勉，得到是一個dom對象數(shù)組
2. 方法
   vm.$mount() 手動掛載vue實例
   vm.$destroy() 銷毀實例
   vm.$nextTick() 在DOM更新完成后再執(zhí)行里面的回調(diào)函數(shù)竟趾，一般修改數(shù)據(jù)后使用該方法，以便獲得更新后的DOM谜喊。再重新修改數(shù)據(jù)的時候潭兽，Vue實現(xiàn)響應(yīng)式，但是并不是數(shù)據(jù)發(fā)生改變的時候DOM就立即變化了斗遏，需要一定的時間進行DOM更新。那么這個時候鞋邑，我們希望的是诵次，當數(shù)據(jù)更新時，等DOM重新再頁面更新完成后枚碗，再執(zhí)行相關(guān)操作逾一，那么我們可以使用該方法 。
   vm.$set() 在vue中通過普通的方式為對象添加屬性時vue無法實時監(jiān)控到如：this.user.age=22;這時肮雨，我們可以使用vue實例的$set()方法來為對象添加屬性遵堵，并可以實時監(jiān)控。如this.$set(this.user,'age',22);
   vm.$delete() 在vue中要想刪除一個屬性怨规，普通方法delete this.user.age時無效的陌宿。可以通過全局Vue.delete(this.user,'age');或?qū)嵗齰m.$delete(this.user,'age');
   vm.$watch() 對實例中的屬性進行監(jiān)控波丰。
   方法一：使用vue實例提供的vm.$watch() 方法壳坪，
   方法二：使用vue實例提供的watch選項，即跟data掰烟、methods等一樣爽蝴。

四沐批、自定義指令

1. 自定義全局指令
   通過Vue.directive()注冊或獲取全局指令。

// 注冊
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注冊 (指令函數(shù))
Vue.directive('my-directive', function () {
  // 這里將會被 `bind` 和 `update` 調(diào)用
})

// getter蝎亚，返回已注冊的指令
var myDirective = Vue.directive('my-directive')

一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：

• bind：只調(diào)用一次九孩，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置发框。
• inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在捻撑，但不一定已被插入文檔中)。
• update：所在組件的 VNode 更新時調(diào)用缤底，但是可能發(fā)生在其子 VNode 更新之前顾患。指令的值可能發(fā)生了改變，也可能沒有个唧。但是你可以通過比較更新前后的值來忽略不必要的模板更新
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用江解。
• unbind：只調(diào)用一次，指令與元素解綁時調(diào)用徙歼。

鉤子函數(shù)參數(shù)

• el：指令所綁定的元素犁河，可以用來直接操作 DOM 。
• binding：一個對象魄梯，包含以下屬性：
  name：指令名桨螺，不包括 v- 前綴。
  value：指令的綁定值酿秸，例如：v-my-directive="1 + 1" 中灭翔，綁定值為 2。
  oldValue：指令綁定的前一個值辣苏，僅在 update 和 componentUpdated 鉤子中可用肝箱。無論值是否改變都可用。
  expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"焰檩。
  arg：傳給指令的參數(shù)，可選骏融。例如 v-my-directive:foo 中，參數(shù)為 "foo"萌狂。
  modifiers：一個包含修飾符的對象档玻。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }粥脚。
• vnode：Vue 編譯生成的虛擬節(jié)點窃肠。移步 VNode API 來了解更多詳情。
• oldVnode：上一個虛擬節(jié)點刷允，僅在 update 和 componentUpdated 鉤子中可用冤留。

除了 el 之外碧囊，其它參數(shù)都應(yīng)該是只讀的，切勿進行修改纤怒。如果需要在鉤子之間共享數(shù)據(jù)糯而，建議通過元素的 dataset 來進行。

2. 自定義局部指令
   在vue實例里面添加directives : {}

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 屬性泊窘，如下：

<input v-focus>

五熄驼、過渡動畫

1.簡介
Vue在插入、更新或者移除DOM時烘豹，提供了多種不同方式的應(yīng)用過渡效果瓜贾。
本質(zhì)上還是使用CSS3動畫，transition携悯、animation祭芦。只是做了一些封裝，在操作的時候更加簡單憔鬼。

2. 基本使用
   使用transition組件龟劲，將要執(zhí)行動畫的元素包含在該組件內(nèi)。

<transition>
 需要執(zhí)行動畫的元素
</transtion>

過渡的CSS類名：6個

• v-enter：定義進入過渡的開始狀態(tài)轴或。在元素被插入之前生效昌跌，在元素被插入之后的下一幀移除。
• v-enter-active：定義進入過渡生效時的狀態(tài)照雁。在整個進入過渡的階段中應(yīng)用蚕愤，在元素被插入之前生效，在過渡/動畫完成之后移除囊榜。這個類可以被用來定義進入過渡的過程時間审胸，延遲和曲線函數(shù)。
• v-enter-to: 2.1.8版及以上 定義進入過渡的結(jié)束狀態(tài)卸勺。在元素被插入之后下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之后移除烫扼。
• v-leave: 定義離開過渡的開始狀態(tài)曙求。在離開過渡被觸發(fā)時立刻生效，下一幀被移除映企。
• v-leave-active：定義離開過渡生效時的狀態(tài)悟狱。在整個離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時立刻生效堰氓，在過渡/動畫完成之后移除挤渐。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數(shù)双絮。
• v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)浴麻。在離開過渡被觸發(fā)之后下一幀生效 (與此同時 v-leave 被刪除)得问，在過渡/動畫完成之后移除。

3. 鉤子函數(shù)8個

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>

4. 自定義過渡的類名
   我們可以通過以下特性來自定義過渡類名：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

他們的優(yōu)先級高于普通的類名软免，這對于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動畫庫宫纬，如 Animate.css 結(jié)合使用十分有用。

<link  rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#example-3',
  data: {
    show: true
  }
})

5. 多個元素的過渡

<transition-group>
  <p :key="1"></p>
  <p :key="2"></p>
</transition-group>

組件及組件間的通信

組件用來擴展HTML元素膏萧，封裝可重用代碼漓骚。
組件就是自定義的元素（標簽、對象）

1. 定義組件
   方式1：先創(chuàng)建組件構(gòu)造器榛泛，然后用組件構(gòu)造器創(chuàng)建組件蝌蹂。

<div id="app"></div>
<script>
  //使用Vue.extend()創(chuàng)建組件構(gòu)造器
  Vue.extend({
    template:"<h2>Hello Word</h2>" 
   });
  //使用Vue.component()根據(jù)傳入的組件名和組件構(gòu)造器來創(chuàng)建組件。
  Vue.component("hello","myComponent");
  new Vue({
    el:"#app"
  });
</script>

方式二：直接創(chuàng)建組件（推薦曹锨，比較簡單孤个。）

 Vue.component("test",{
  template:"<h3>try</h3>"     
 });

2. 組件的分類

• 全局組件
  全局組件可以在所有vue實例中使用

Vue.component("my-hello",{
  template: "<h4>Hello Word！</h4>" ;
  data:function(){
    return:{
      name:"alice",
      age:12,
     //ande other data ....
    }
  }
});
new Vue({
  el:"#app"
});

• 局部組件
  局部組件只能在當前vue實例中使用
  在vue實例中添加一個components選項

new Vue({
  el:"#app",
  components:{
    "my-components-name":{
      template:"<p>111</p>"艘希，
      data(){
        return{
          age:11,
          ...
        }
      }
    }硼身，
     
  }
});

注意：在自定義全局或者局部組件的時候，如果要在組件中存儲數(shù)據(jù)覆享，那么data必須時函數(shù)形式佳遂，該函數(shù)返回一個對象，對象里面就是要存儲的數(shù)據(jù)撒顿。這樣在html中的該組件拿存儲的數(shù)據(jù)的時候就能拿到了 丑罪。

3. 引用模板<template>
   通過vue定義好的模板組件，將模板相關(guān)的內(nèi)容寫在html內(nèi)部凤壁，通過id相連接自定義組件
   簡單的說就是：將組件內(nèi)容放到模板中并引用吩屹。

<body>
  <div class="app">
    <my-hello></my-hello>
   </div>
   <template id="wbs">
      <div>
          <h3>{{msg}}</h3>
          <ul>
              <li v-for="v in arr">
                  {{v}}
              <li>
          </ul>
      </div>
   </template>
<script>
  var vm = new Vue({
    el:".app",
    components:{
      "my-hello":{
        name:"wbs12344",//指定組件的名稱，若沒加name拧抖，默認是標簽名
        template:"#wbs",
        data(){
          return{
            msg:"welcome",
            arr:[1,2,3,4],
          }
        }
      }
    }
  });
</script>
</body>

注意：
<template>內(nèi)煤搜，必須有且僅有一個根元素。
定于組件的時候組件若沒加name唧席，默認是標簽名組件名是name擦盾。

4. 動態(tài)組件
   <component :is="">動態(tài)組件
   多個組件使用同一個掛載點，然后動態(tài)的在他們之間進行切換

<body>
<div class="app">
    <button @click="flag='my-name'">顯示name組件</button>
    <button @click="flag='my-age'">顯示age組件</button>
    <div>   
        <component :is="flag"></component>
    </div>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:".app",
        data:{
            flag:"",
        },
        components:{
            "my-name":{
                template:"<h1>這是my-name組件淌哟，x為{{x}}</h1>",
                data:function(){
                    return{
                        x:Math.random()
                    }
                }
            },
            "my-age":{
                template:"<h3>這是my-age組件迹卢，y為{{y}}</h3>",
                data(){
                    return{
                        y:Math.random()
                    }
                }
            }
        }
    });

</script>

</body>

5. <keep-alive>組件
   如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或者避免重新渲染徒仓。為此可以在動態(tài)組件外部套一個keep-alive作為指令參數(shù)腐碱。

<body>
<div class="app">
    <button @click="flag='my-name'">顯示name組件</button>
    <button @click="flag='my-age'">顯示age組件</button>
    <div>   
        <keep-alive>
            <component :is="flag"></component>
        </keep-alive>
    </div>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:".app",
        data:{
            flag:"",
        },
        components:{
            "my-name":{
                template:"<h1>這是my-name組件<br>{{x}}</h1>",
                data:function(){
                    return{
                        x:Math.random()
                    }
                }
            },
            "my-age":{
                template:"<h3>這是my-age組件<br>{{y}}</h3>",
                data(){
                    return{
                        y:Math.random()
                    }
                }
            }
        }
    });

</script>

</body>

如上，當在切換的時候掉弛，默認每次切換都會銷毀非活動組件症见，并重新加載喂走。通過keep-alive組件，將切換出去的元素還是保存在內(nèi)存中筒饰，不會重新加載缴啡。即緩存非活動元素，可以保留狀態(tài)瓷们，避免重新渲染业栅，

6. 組件之間數(shù)據(jù)傳遞
   6.1 父子組件間的數(shù)據(jù)傳遞
   父子組件是在一個組件內(nèi)包含另一個組件。
   子組件只能在父組件內(nèi)部使用
   默認情況下谬晕，子組件不能直接訪問夫組件中的數(shù)據(jù)碘裕，父組件也不能直接訪問子組件的數(shù)據(jù)，因為每個組件中的數(shù)據(jù)的作用域的獨立的攒钳。
   6.2 父子組件間的數(shù)據(jù)傳遞（通信）
   （1）子組件訪問父組件的數(shù)據(jù)
   第一步：當調(diào)用子組件時帮孔，在子組件中綁定想要獲取的父組件中的數(shù)據(jù)。（在html中）
   第二部：在子組件內(nèi)部不撑，使用props選項聲明獲取的數(shù)據(jù)文兢，即使用props來接受來自父組件的數(shù)據(jù)。
   即：父組件通過props向下傳遞數(shù)據(jù)給子組件
   注：
   組件中的數(shù)據(jù)共有三種形式：data焕檬、props姆坚、computer
   Prop 驗證

Vue.component('my-component', {
  props: {
    // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認值的數(shù)字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數(shù)組默認值必須從一個工廠函數(shù)獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數(shù)
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

（2）父組件訪問子組件的數(shù)據(jù)
第一步：在子組件中使用vm.$emit(事件名，數(shù)據(jù))觸發(fā)一個自定義事件实愚，事件名自定義兼呵。
第二步：父組件在使用子組件的地方監(jiān)聽子組件觸發(fā)的事件，并子父組件中定義方法腊敲，用來獲取數(shù)據(jù)击喂。
總結(jié)：子組件通過events給父組件發(fā)送消息，實際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件碰辅。

• 單項數(shù)據(jù)流
  父級 prop 的更新會向下流動到子組件中懂昂，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態(tài)没宾，從而導致你的應(yīng)用的數(shù)據(jù)流向難以理解忍法。
  不允許子組件直接修改父組件中的數(shù)據(jù)，否則報錯榕吼。
  解決方案：
  情況一：如果子組件想把父組件的數(shù)據(jù)作為局部數(shù)據(jù)使用，可以將數(shù)據(jù)存入到另外一個變量中再操作勉失，不影響父組件中的數(shù)據(jù)羹蚣。
  情況二：如果子組件想修改拿到的數(shù)據(jù)并且同步更新到父組件，兩個方法：
  方法1：使用.sync修飾符乱凿，需要顯示的觸發(fā)一個事件顽素。
  方法2： 可以將數(shù)據(jù)包裝成一個對象咽弦，然后子組件中修改對象的屬性。（因為對象是引用類型胁出，指向一個內(nèi)存空間）

6.2 非父子組件間的通信
非父子組件間的通信型型，可以通過一個空的Vue實例作為中央事件總線（事件中心），用來觸發(fā)事件和事件監(jiān)聽全蝶。

var Event   = new Vue();
Event.$emit(事件名闹蒜，數(shù)據(jù));
Event.$on(事件，data=>{})

7. slot內(nèi)容分發(fā)
   作用：獲取組件中的原內(nèi)容抑淫。

<body>
<div class="app">
    <demo-component>這里有內(nèi)容绷落，那么slot里面顯示的就是這個。</demo-component> 
</div>
<template id="demo">
    <div>
        <h1>This is a demo</h1>
        <slot>如果沒有內(nèi)容始苇，顯示這個砌烁！</slot>
    </div>
</template>
<script src="vue.js"></script>
<script type="text/javascript">
    var vm =new Vue({
        el:".app",
        components:{
            "demo-component":{
                template:"#demo",
            }
        }
    });

</script>

</body>

vue-router路由的使用

1. 簡介
   使用Vue.js開發(fā)單頁面應(yīng)用(Single Page Application)
   根據(jù)不同的url地址，顯示不同的內(nèi)容催式，但顯示在同一個頁面中給函喉，稱為單頁面應(yīng)用。
   vue-router官網(wǎng)參考

2. 基本用法
   布局
   配置路由

3. 路由嵌套和參數(shù)的傳遞

vue-cli腳手架

1. 簡介
   vue-cli是一個vue腳手架荣月，可以快速構(gòu)造項目結(jié)構(gòu)
   vue-cli本身集成了多種項目模板
   simple 簡單
   webpack 包含ESLint代碼規(guī)范的檢查和unit單元測試
   webpack-simple 沒有代碼規(guī)范檢查和單元測試
   browserify 使用的也比較多
   browser-simple 也沒有代碼規(guī)范檢查和單元測試管呵。
2. 步驟
   2.1 安裝vue-cli，其實就是配置vue命令的環(huán)境喉童。
   conpm install vue-cli -g
   vue --version
   vue list
   2.2 初始化項目撇寞，生成項目模板
   語法：vue init 模板名 項目名
   如vue init webpack-simple vue-cli-demo
   2.3 進入生成的項目目錄，安裝模塊包
   cd vue-cli-demo
   cnpm install
   2.4 運行
   npm run dev//啟動測試服務(wù)
   npm run build//將項目打包輸出dist目錄堂氯，項目上線的話要將dist目錄拷貝到服務(wù)器上蔑担。
3. 使用webpack模板

注：ESLint是用來統(tǒng)一代碼和風格的工具，如：縮進咽白、空格啤握、符號等，要求比較嚴格

模塊化開發(fā)

1.vue-router模塊化
cnpm install vue-router -s
1.1. 編輯main.js
1.2. 編輯app.vue
1.3 編輯router.config.js

2. axios模塊化
   cnpm install axios -s
   使用axios的兩種方式
   方法1：在每一個組件中引入axios
   方法2：在main.js中全局引入axios并添加到Vue原型中

3. 為自定義組件添加事件

Element UI

1. 簡介
   Element UI是餓了么團隊提供的一套基于Vue2.0的組件庫晶框，用來快速搭建網(wǎng)站排抬，提高開發(fā)效率。
   Element UI ：pc端
   MintUI ：移動端
2. 快速上手
   2.1 安裝Element ui
   cnpm install element-ui -s
   2.2在main.js中引入并使用組件
   import ElementUI form "element-ui"
   import "element-ui/lib/theme-default/index.css"http://這樣式文件需要單獨引入
   Vue.use(ElementUI)
   這種方式引入了ElementUI中的所有組件授段。
   2.3在webpack.config.js中添加loader
   2.4使用組件
   2.5使用less

自定義全局組件（插件）

全局組件（插件）蹲蒲，就是指可以在main.js中使用Vue.js進行全局引入，然后在其他組件中就都可以使用了侵贵。入vue-router.
普通組件（插件）.每次使用時都要引入届搁，如axios

狀態(tài)管理模式

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。

1. 基本用法
   1.1 安裝vuex
   1.2創(chuàng)建store.js文件，在main.js中導入并配置store選項
   1.3編輯store.js文件
   1.4編輯app.vue
2. 更好的組織vuex項目結(jié)構(gòu)

最后
最后
最后
最后
最后
最后
最后
最后
最后
這是第一次學習vue全家桶卡睦，看得很吃力宴胧，太多新的概念了，并且用到一些工具表锻，前面沒有學恕齐，如nodejs npm webpack等等...硬著頭皮開完了視頻。視頻來源w3c官網(wǎng)瞬逊，小白學前端：Vue.js 2.0之全家桶

之后再重新開始學一遍全家桶的每個點显歧。