簡(jiǎn)介

• Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架室抽。

• Vue 只關(guān)注視圖層流强， 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)借宵。

• Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件茫经。

安裝

• 可以在 Vue.js 的官網(wǎng)上直接下載 vue.min.js 并用 <script> 標(biāo)簽引入娱局。http://vuejs.org/js/vue.min.js

• 使用CDN

BootCDN（國(guó)內(nèi)）

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

unpkg

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

cdnjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

• NPM 方法

npm install vue

命令行工具 vue-cli

Vue.js 提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用泪漂。

# 全局安裝 vue-cli
$ cnpm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 這里需要進(jìn)行一些配置廊营，默認(rèn)回車即可

? Project name my-project
? Project description A Vue.js project
? Author BetterCN <13739485933@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-project".


# Installing project dependencies ...
# ========================

進(jìn)入項(xiàng)目，安裝并運(yùn)行：

$ cd my-project
$ npm install
$ npm run dev

> my-project@1.0.0 dev /Users/better_cn/Myproject/my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 2998ms                                                                                                                                    14:33:29

 I  Your application is running here: http://localhost:8080

> Listening at http://localhost:8080

打開(kāi)localhost：8080

知識(shí)點(diǎn)

vue實(shí)例：

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

選項(xiàng)API：
https://cn.vuejs.org/v2/api/#components

組件化應(yīng)用構(gòu)建

聲明式渲染

Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)：

<div id="app">
  {{ message }}
</div> 

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

指令邦定

<div id="app-2">
  <span v-bind:title="message">
    鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息萝勤！
  </span>
</div>

指令
指令 (Directives) 是帶有 v- 前綴的特殊屬性
v-bind：

<!-- 完整語(yǔ)法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫(xiě) -->
<a :href="url">...</a>

v-on：

<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫(xiě) -->
<a @click="doSomething">...</a>

v-if

<div id="app-3">
  <p v-if="seen">現(xiàn)在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

v-for：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學(xué)習(xí) JavaScript' },
      { text: '學(xué)習(xí) Vue' },
      { text: '整個(gè)牛項(xiàng)目' }
    ]
  }
})

v-model：

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

數(shù)據(jù)露筒，方法，計(jì)算屬性敌卓，偵聽(tīng)器

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
  <p>Computed reversed message: "{{ reversedMessage()}}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    // 如果 `message` 發(fā)生改變慎式，這個(gè)函數(shù)就會(huì)運(yùn)行
      message: function (newMessage, oldMessage) {
        ...
    }
})

生命周期

var vm = new Vue({
    el: "#container",
    data: {
        test : 'hello world'
    },
    beforeCreate: function(){
        console.log(this);
        showData('創(chuàng)建vue實(shí)例前',this);
    },
    created: function(){
        showData('創(chuàng)建vue實(shí)例后',this);
    },
    beforeMount:function(){
        showData('掛載到dom前',this);
    },
    mounted: function(){
        showData('掛載到dom后',this);
    },
    beforeUpdate:function(){
        showData('數(shù)據(jù)變化更新前',this);
    },
    updated:function(){
        showData('數(shù)據(jù)變化更新后',this);
    },
    beforeDestroy:function(){
        vm.test ="3333";
        showData('vue實(shí)例銷毀前',this);
    },
    destroyed:function(){
        showData('vue實(shí)例銷毀后',this);
    }

});

組件
全局注冊(cè)

<div id="example">
  <my-component></my-component>
</div>

// 注冊(cè)
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// 創(chuàng)建根實(shí)例
new Vue({
  el: '#example'
})

局部注冊(cè)

var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 將只在父組件模板中可用
    'my-component': Child
  }
})

組件組合
組件 A 在它的模板中使用了組件 B。它們之間必然需要相互通信：父組件可能要給子組件下發(fā)數(shù)據(jù)趟径，子組件則可能要將它內(nèi)部發(fā)生的事情告知父組件瘪吏。

prop 向下傳遞，事件向上傳遞

image

子組件要顯式地用 props 選項(xiàng)聲明它預(yù)期的數(shù)據(jù)：

Vue.component('child', {
  // 聲明 props
  props: ['my-message'],
  // 就像 data 一樣蜗巧，prop 也可以在模板中使用
  // 同樣也可以在 vm 實(shí)例中通過(guò) this.message 來(lái)使用
  template: '<span>{{ my-message }}</span>'
})

<child message="hello!"></child>

動(dòng)態(tài)邦定prop

<div id="prop-example-2">
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>
new Vue({
  el: '#prop-example-2',
  data: {
    parentMsg: 'Message from parent'
  }
})

單項(xiàng)數(shù)據(jù)流
Prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)掌眠，將傳導(dǎo)給子組件，但是反過(guò)來(lái)不會(huì)幕屹。這是為了防止子組件無(wú)意間修改了父組件的狀態(tài)蓝丙，來(lái)避免應(yīng)用的數(shù)據(jù)流變得難以理解。

注意在 JavaScript 中對(duì)象和數(shù)組是引用類型望拖，指向同一個(gè)內(nèi)存空間渺尘，如果 prop 是一個(gè)對(duì)象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)靠娱。

自定義事件
每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口，即：

• 使用 $on(eventName) 監(jiān)聽(tīng)事件
• 使用 $emit(eventName, optionalPayload) 觸發(fā)事件

父組件可以在使用子組件的地方直接用 v-on 來(lái)監(jiān)聽(tīng)子組件觸發(fā)的事件掠兄。

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

這里有一個(gè)如何使用載荷 (payload) 數(shù)據(jù)的示例：

<div id="message-event-example" class="demo">
  <p v-for="msg in messages">{{ msg }}</p>
  <button-message v-on:message="handleMessage"></button-message>
</div>

Vue.component('button-message', {
  template: `<div>
    <input type="text" v-model="message" />
    <button v-on:click="handleSendMessage">Send</button>
  </div>`,
  data: function () {
    return {
      message: 'test message'
    }
  },
  methods: {
    handleSendMessage: function () {
      this.$emit('message', { message: this.message })
    }
  }
})

new Vue({
  el: '#message-event-example',
  data: {
    messages: []
  },
  methods: {
    handleMessage: function (payload) {
      this.messages.push(payload.message)
    }
  }
})

vue-router：：https://router.vuejs.org/zh-cn/

官方支持的 vue-router 庫(kù)

vux：https://vuex.vuejs.org/zh-cn/intro.html

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式像云。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)锌雀，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

Vue.js 服務(wù)器端渲染：https://ssr.vuejs.org/zh/

Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架迅诬。默認(rèn)情況下腋逆，可以在瀏覽器中輸出 Vue 組件，進(jìn)行生成 DOM 和操作 DOM侈贷。然而惩歉，也可以將同一個(gè)組件渲染為服務(wù)器端的 HTML 字符串，將它們直接發(fā)送到瀏覽器俏蛮，最后將靜態(tài)標(biāo)記"混合"為客戶端上完全交互的應(yīng)用程序撑蚌。