核心：

1、Vue.js是一個(gè)允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn)DOM系統(tǒng)
2、在編寫代碼時(shí)，你不需要關(guān)注DOM操作，只需要關(guān)注邏輯層面即可。
3、組件系統(tǒng)。

示例：

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>
//注冊(cè)一個(gè)“todo-item”Vue組件
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
//{{var}}差值表達(dá)式

var app7 = new Vue({
//接管id為app-7的DOM元素，與該DOM節(jié)點(diǎn)綁定
//掛載點(diǎn)
  el: '#app-7',
//數(shù)據(jù)
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '隨便其它什么人吃的東西' }
    ]
  }
})
//bind屬性綁定：單向綁定
//v-model：雙向綁定

生命周期圖示

生命周期圖示

模板語法

{{}}：差值表達(dá)式（Mustache）：

• 文本：<span>Message: {{ msg }}</span>
• 原始html：<span v-html="rawHtml"></span></p>
• JS表達(dá)式：{{ ok ? 'YES' : 'NO' }}
  *注意：該特性不能作用于Html特性上，遇到這種情況應(yīng)該使用 v-bind 指令

指令

Vue實(shí)例屬性：

var app = new Vue({
  //掛載點(diǎn)
  el : "",
  //數(shù)據(jù)
  data : {},
  //方法
  methods : {},
  //計(jì)算屬性
  computed : {}，
  //監(jiān)聽屬性
  watch : {}
})

class和style綁定

1、綁定從class

1、對(duì)象語法
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
  isActive: true,
  hasError: false
}
結(jié)果渲染為：
<div class="static active"></div>
2、數(shù)組語法
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
結(jié)果渲染為：
<div class="active text-danger"></div>
//注：用在組件上會(huì)在組件原基礎(chǔ)上添加class

綁定style

1、內(nèi)聯(lián)綁定

1、對(duì)象語法
//v-bind:style 的對(duì)象語法十分直觀——看著非常像 CSS，但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號(hào)括起來) 來命名
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}
//直接綁定到一個(gè)樣式對(duì)象通常更好，這會(huì)讓模板更清晰
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
2、數(shù)組語法
//數(shù)組語法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>

事件修飾符

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監(jiān)聽器時(shí)使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

2.1.4 新增
<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>

2.3.0 新增
<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。

按鍵修飾符

<!-- 只有在 `keyCode` 是 13 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">
記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

全部的按鍵別名：
https://cn.vuejs.org/v2/guide/events.html
可以通過全局 `config.keyCodes` 對(duì)象[自定義按鍵修飾符別名](https://cn.vuejs.org/v2/api/#keyCodes)：

組件*

示例

<div id="components-demo">
  <button-counter></button-counter>
</div>

// 定義一個(gè)名為 button-counter 的新組件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({ el: '#components-demo' })

注：
1、你可以將組件進(jìn)行任意次數(shù)的復(fù)用：每個(gè)組件單獨(dú)維護(hù)它的“count”，因?yàn)闆]用一次組件，就會(huì)有一個(gè)它的實(shí)例被創(chuàng)建。

2、因?yàn)榻M件是可復(fù)用的 Vue 實(shí)例，所以它們與 new Vue 接收相同的選項(xiàng)，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實(shí)例特有的選項(xiàng)。

data必須是一個(gè)函數(shù)

data: {
  count: 0
}

通過props向子組件傳遞數(shù)據(jù) （相當(dāng)于函數(shù)的參數(shù)）

//當(dāng)一個(gè)值傳遞給一個(gè)prop特性的時(shí)候，它就變成了那個(gè)組件實(shí)例的一個(gè)屬性。
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

//使用
<blog-post title="My journey with Vue"></blog-post>

*每個(gè)組件必須只有一個(gè)“根元素”。你可以將模板的內(nèi)容包裹在一個(gè)父元素內(nèi)

通過事件向父級(jí)組件發(fā)送消息
調(diào)用內(nèi)建的 $emit 方法并傳入事件的名字，來向父級(jí)組件觸發(fā)一個(gè)事件

<div id="blog-posts-events-demo">
    <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
        v-on:enlarge-text="postFontSize += 0.1"
        ></blog-post>
    </div>
</div>

Vue.component('blog-post', {
  props: ['post'],
  template: `
        <div class="blog-post">
            <h3>{{ post.title }}</h3>
          //向父組件發(fā)送一個(gè)“enlarge-text'”事件
            <button v-on:click="$emit('enlarge-text')">
                Enlarge text
            </button>
            <div v-html="post.content"></div>
        </div>
        `
})

new Vue({
    el: '#blog-posts-events-demo',
    data: {
        posts: [
            { id: 1, title: 'My journey with Vue' },
            { id: 2, title: 'Blogging with Vue' },
            { id: 3, title: 'Why Vue is so fun' }
        ],
        postFontSize: 1
    }
})

通過插槽分發(fā)內(nèi)容

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

——————————更多內(nèi)容——————————————