安裝

開箱即用（學(xué)習(xí)推薦省撑，最好上手）

<!-- 開發(fā)環(huán)境版本掖鱼，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

開始使用

創(chuàng)建一個Vue實列

var App = new Vue({
  el: '#app', // 實列化dom的選擇器
  components: {}, // 組件注冊
  data: {}, // 數(shù)據(jù)
  methods: {} // 函數(shù)
})

生命周期

總共分為8個階段：創(chuàng)建前/后,掛載前/后,更新前/后,銷毀前/銷毀后。

掛載
beforeCreate（創(chuàng)建前）created（創(chuàng)建后）beforeMount（掛載前）mounted（掛載后）

更新（元素或組件的變更操作）
beforeUpdate（更新前）updated（更新后）

銷毀（銷毀相關(guān)屬性）
beforeDestroy（銷毀前）destroyed（銷毀后）

以上生命周期常用的最常用的是mounted（掛載后） 前置數(shù)據(jù)的獲取處理在這里，因載入前dom并沒有渲染到頁面上母怜，我們需要操作dom時會獲取到undefined。

其次是destroyed（銷毀后）是saas中使用到的缚柏，用于組件中定時任務(wù)的清除苹熏。

數(shù)據(jù)綁定與渲染

1.{{xxx}}

模板寫法
例子 <h3>{{ message }}</h3>

2.v-bind:xxx

綁定內(nèi)容到html屬性中
例子 <h3 v-bind:class="xxx"></h3>
簡寫 <h3 :class="xxx"></h3>

3.v-model

雙向綁定
例子 <input v-model="xxx">

4.v-html

以html的形式在標(biāo)簽內(nèi)部渲染內(nèi)容
例子 <div v-html="xxx"></div>

5.v-show

是否顯示dom
例子 <div v-show="true||fasle"></div>

6.v-if，v-else

是否渲染dom
需要注意v-else永遠(yuǎn)跟隨前面一個v-if币喧，并且不提供else if功能
例子 <div v-if="boolean"></div><div v-else></div>

7.v-for

列表渲染
例子 <li v-for="(item, index) in list" :key="唯一標(biāo)識"></li>

事件處理

事件綁定 v-on:xxx
例子 <button v-on:click="changeColor">切換顏色</button>
簡寫 <button @click="changeColor">切換顏色</button>

事件綁定分為帶括號和不帶括號轨域，是否有括號對事件的影響是不同的，如下
<button @click="funcDemo">無括號</button>
<button @click="funcDemo($event)">有括號時傳入事件對象</button>
<button @click="funcDemo('arg1')">有括號傳參1</button>
<button @click="funcDemo('arg1', 'arg2')">有括號傳參2</button>
<button @click="funcDemoObj1({a:1,b:2,c:3})">傳入對象</button>
<button @click="funcDemoObj2({a:1,b:2,c:3})">傳入對象 解構(gòu)賦值</button>

當(dāng)參數(shù)傳入對象時杀餐，會因為接收方式的不同改變參數(shù)格式干发，如下
funcDemoObj1(obj){} 接收整個對象
funcDemoObj2({a, b, d = 4}){}只接收對象中的a和b，并聲明一個包含默認(rèn)值的屬性

有意思的是時間函數(shù)不管是否傳入$event在函數(shù)中都可以通過event獲取事件對象

組件注冊

全局注冊
Vue.component('component-a', { /* ... */ })

局部注冊
定義組件 var ComponentA = { /* ... */ }
然后在 components 選項中定義你想要使用的組件,如：components: { ComponentA }

Html中引入 <component-a></component-a> 或者 <ComponentA></ComponentA>在模塊化開發(fā)中當(dāng)組件不使用插槽時可直接作為自合閉標(biāo)簽來使用如<component-a/> 或者 <ComponentA/>史翘。
其中全大寫的寫法枉长，只能在模塊化開發(fā)中使用，同時也推薦在模塊化開發(fā)中使用琼讽，以便于我們能快速查找代碼位置與區(qū)分組件的來源”胤澹現(xiàn)在項目中，我們自己封裝或者二次封裝的組件就是使用的這種風(fēng)格钻蹬。

自定義組件

以下是一個公共基礎(chǔ)組件代碼的聲明

Vue.component('component-a', {
  props: ['title'],
  template: '<h3 @click="func">A Num：{{clickNum}} ------ {{title}} <slot></slot></h3>',
  data () {
    return {
      clickNum: 0
    }
  },
  watch: {
    clickNum: {
      handler(newV, oldV) {}
    }
  },
  // ...生命周期
  methods: { 
    func() {
      this.clickNum++
      this.$emit('callback', '組件A參數(shù)1', '組件A參數(shù)2')
    }
  }
})

在父組件中使用 <component-a title="xxx" ></component-a>

Props

父組件通過props向子組件傳遞數(shù)據(jù) 父組件中寫法<component-a title=”xxx”/>
上面的基礎(chǔ)組件代碼中的寫法是一個基礎(chǔ)寫法吼蚁，只包含了參數(shù)名稱
更加復(fù)雜嚴(yán)謹(jǐn)?shù)膶懛ㄈ缦拢?/p>

props: {
  // 限制類型
  a: Number,
  // 多個可能類型
  b: [String, Number],
  // 必填
  c: {
    type: String,
    required: true
  },
  // 帶有默認(rèn)值
  d: {
    type: Number,
    default: 100
  },
  // 對象默認(rèn)值
  e: {
    type: Object,
    default() {
      return { message: 'hello' }
    }
  }
}

其中必填和默認(rèn)值這兩項不需要同時存在選擇其一即可
Props是單向數(shù)據(jù)流綁定，子組件中通過$emit調(diào)用父組件暴露給子組件的函數(shù)進(jìn)行參數(shù)傳遞修改问欠。代碼如下：
父組件暴露函數(shù)給子組件：
<component-a title="xxx" @xxx=”()=>{}”></component-a>
子組件調(diào)用：
this.$emit('xxx')
this.$emit('xxx', ...參數(shù))

Template

是模板代碼書寫位置肝匆，寫法和html完全相同
當(dāng)使用模塊化開發(fā)時，此處代碼放到文件中的<template></template>標(biāo)簽中
<slot></slot>插槽：
子組件中需要的地方加入<slot></slot>即可在加入的位置渲染父組件調(diào)用子組件時在組件標(biāo)簽中寫入的內(nèi)容顺献。

Data

這里并不像之前的實列化Vue一樣是一個對象旗国，組件中的data必須一個函數(shù)，每個實列化的組件單獨維護(hù)一份被返回對象滚澜，因此我們可以再同一個頁面中多次引入一個相同的組件而不會相互影響

Watch

以下是一個簡單的監(jiān)聽器代碼結(jié)構(gòu)：

watch: {
  xxx(newValue, oldValue) {}
}

也可以這么寫：

watch: {
  xxx: {
    // 是數(shù)據(jù)改變時觸發(fā)的函數(shù)
    handler(newValue, oldValue) {}
  }
}

xxx是要監(jiān)聽的屬性名稱粗仓，如需監(jiān)聽對象中的某個屬性寫法為 'obj.xxx'字符串,如下：

watch: {
  'obj.xxx': {
    // 是數(shù)據(jù)改變時觸發(fā)的函數(shù)
    handler(newValue, oldValue) {}
  }
}

Methods

函數(shù)代碼位置嫁怀，函數(shù)中的this指向當(dāng)前實列對象设捐，因此可以再函數(shù)中通過this.xxx獲取所有當(dāng)前組件中的內(nèi)容

以下是包含上述內(nèi)容的dome

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      
      <h3>{{ message }}</h3>
      
      <input v-model="message" @change="funcDemo('change', message)" @focus="funcDemo('focus', message)">
      
      <h3 :class="color">顏色</h3>
      
      <div>
        <button v-on:click="changeColor">切換顏色</button>
        <br /><br />
        <button @click="funcDemo">無括號</button>
        <button @click="funcDemo($event)">傳入事件對象</button>
        <button @click="funcDemo('arg1')">傳參1</button>
        <button @click="funcDemo('arg1', 'arg2')">傳參2</button>
        <button @click="funcDemoObj1({a:1,b:2,c:3})">傳入對象</button>
        <button @click="funcDemoObj2({a:1,b:2,c:3})">傳入對象 解構(gòu)賦值</button>
        <br /><br />
      </div>
      
      <h3 v-html="html"></h3>
      
      <ul>
        <li v-for="(item, index) in list" :key="item">no:{{index}} val:{{item}}</li>
      </ul>
      
      <component-a title="組件1" @callback="funcDemo">插槽區(qū)域提示的內(nèi)容</component-a>
      <component-a title="組件2"></component-a>
      <component-b :a="3" b="字符串或者數(shù)字" c="必填項" d="改變默認(rèn)值" :e="{message: '改變對象默認(rèn)message的值'}"></component-b>
    </div>
    
  </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  Vue.component('component-a', {
    props: ['title'],
    template: '<h3 @click="func">A Num：{{clickNum}} ------ {{title}} <slot></slot></h3>',
    data () {
      return {
        clickNum: 0,
      }
    },
    watch: {
      clickNum: {
        handler(newV, oldV) {
          console.log('clickNum oldV', oldV, 'clickNum newV', newV)
        }
      }
    },
    methods: { 
      func() {
        this.clickNum++
        this.$emit('callback', '組件A參數(shù)1', '組件A參數(shù)2')
      }
    }
  })
  
  var ComponentB = {
    props: {
      // 限制類型
      a: Number,
      // 多個可能類型
      b: [String, Number],
      // 必填
      c: {
        type: String,
        required: true
      },
      // 帶有默認(rèn)值
      d: {
         type: String,
         default: '默認(rèn)值'
      },
      // 對象默認(rèn)值
      e: {
        type: Object,
        // 對象或數(shù)組默認(rèn)值必須從一個工廠函數(shù)獲取
        default() {
          return { message: '對象中message' }
        }
      },
    },
    template: `<div>
      <h4>A：{{a}}</h4>
      <h4>B：{}</h4>
      <h4>C：{{c}}</h4>
      <h4>D：{fttfbhb}</h4>
      <h4>E：{{e.message}}</h4>
    </div>`,
    data() {
      return {}
    }
  }
  
  var App = new Vue({
    el: '#app',
    components: {ComponentB},
    data: {
      color: 'red',
      message: 'Hello Vue!',
      html: '<span class="blue">這是一端藍(lán)色文字的html渲染</span>',
      list: ['a','b','c']
    },
    mounted() {
      console.log('mounted...')
    },
    methods: {
      changeColor() {
        if (this.color == 'blue') {
          this.color = 'red'
        } else {
          this.color = 'blue'
        }
      },
      funcDemo(arg1, arg2 = '默認(rèn)的值2') {
        console.log('參數(shù)1', arg1, '參數(shù)2', arg2)
      },
      funcDemoObj1(obj) {
        console.log('參數(shù)', obj)
      },
      funcDemoObj2({a, b, d = 4}) {
        console.log('參數(shù)a', a ,'參數(shù)b', b, '參數(shù)d', d)
      }
    }
  })
</script>
<style>
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
</style>

框架搭建整體流程

• 第一步 Vue2 使用 Vue 腳手架 Vue CLI 搭建一個 Vue.js 前端項目框架

• 第二步 Vue2 vue.config.js 基礎(chǔ)配置塘淑，路徑別名alias

• 第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局變量

• 第四步 Vue2 配置ESLint

• 第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置圖片壓縮

• 第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui

• 第七步 Webpack 配置多環(huán)境和全局變量 cross-env 和 webpack.DefinePlugin

點擊下載步驟 1-7 配置完成的完整 Demo