（31）Vue安裝

在使用Vue的時候，推薦安裝Vue Devtools

https://github.com/vuejs/vue-devtools#vue-devtools

Browser devtools extension for debugging Vue.js applications.

直接引入<script>，開發版本包含完整的警告和調試模式，生產版本刪除了警告，33.30KB min+gzip

CDN使用

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

生產環境

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

使用原生 ES Modules

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

https://cdn.jsdelivr.net/npm/vue/

獲取Vue

https://unpkg.com/vue@2.6.10/dist/vue.js

https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js

發佈的站點中使用生產環境版本

vue.js 換成 vue.min.js

Npm

# 最新穩定版
$ npm install vue

CLI 工具

開發版本：

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

# 最新穩定版本
$ bower install vue

Vue
一套用於構建用戶界面的漸進式框架

自底向上逐層應用

核心庫只關注視圖層

<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

vue-cli安裝

渲染

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

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

綁定元素特性

<div id="app-2">
  <span v-bind:title="message">
    鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '頁面加載於 ' + new Date().toLocaleString()
  }
})

指令

條件與循環

<div id="app-3">
  <p v-if="seen">如今你看到我了</p>
</div>

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

<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: '學習 JavaScript' },
      { text: '學習 Vue' },
      { text: '整個牛項目' }
    ]
  }
})

app4.todos.push({ text: '新項目' })

v-on 指令添加一個事件監聽器

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反轉消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

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!'
  }
})

組件化應用構建

一個組件樹：

Vue 中註冊組件很簡單：

// 定義名爲 todo-item 的新組件
Vue.component('todo-item', {
  template: '<li>這是個待辦項</li>'
})

<ol>
  <!-- 建立一個 todo-item 組件的實例 -->
  <todo-item></todo-item>
</ol>

從父做用域將數據傳到子組件

Vue.component('todo-item', {
  // todo-item 組件如今接受一個
  // "prop"，相似於一個自定義特性。
  // 這個 prop 名爲 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

<div id="app-7">
  <ol>
    <!--
      如今咱們爲每一個 todo-item 提供 todo 對象
      todo 對象是變量，即其內容能夠是動態的。
      咱們也須要爲每一個組件提供一個「key」，稍後再
      做詳細解釋。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '隨便其它什麼人吃的東西' }
    ]
  }
})

子單元經過 prop 接口與父單元進行了良好的解耦

建立實例

var vm = new Vue({
  // 選項
})

vm (ViewModel 的縮寫)
表示 Vue 實例

// 咱們的數據對象
var data = { a: 1 }

// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
  data: data
})

// 得到這個實例上的屬性
// 返回源數據中對應的字段
vm.a == data.a // => true

// 設置屬性也會影響到原始數據
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

Object.freeze()
響應系統沒法再追蹤變化

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
<div id="app">
  <p>{{ foo }}</p>
  <!-- 這裏的 `foo` 不會更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一個實例方法
vm.$watch('a', function (newValue, oldValue) {
  // 這個回調將在 `vm.a` 改變後調用
})

生命週期

數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

實例的生命週期

清除浮動

添加空div，使用clear: both

父元素使用overflow: hidden

父元素使用overflow: auto

父級定義高度

父級div定義僞類:after和zoom

#test {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  <!-- 三行代碼缺一不可 -->
  margin: 0 auto;
  left: 0;
  right: 0;
}

<div id="test"></div>

利用CSS畫三角形

#triangle {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid greenyellow;
  }

<div id="triangle"><div>

display：none; 不顯示對應的元素
visibility：hidden; 隱藏對應元素

position：absolute/fixed; 優先級最高，有他們在時，float不起做用

清除浮動的方式：
父級div定義height
最後一個浮動元素後加空div標籤 並添加樣式clear:both
父級div定義zoom
包含浮動元素的父標籤添加樣式overflow爲hidden或auto

:表示僞類，::表示僞元素

this是在執行上下文建立時肯定的一個在執行過程當中不可更改的變量

MVVM分爲Model、View、ViewModel三者

Model 表明數據模型
View 表明UI視圖
ViewModel 負責監聽 Model 中數據的改變而且控制視圖的更新

父子組件通信：父->子：使用props，子->父：$emit方法傳遞參數

.prevent: 提交事件再也不重載頁面；
.stop: 阻止單擊事件冒泡；
.self: 當事件發生在該元素自己而不是子元素的時候會觸發；
.capture: 事件偵聽，事件發生的時候會調用；

$route 是「路由信息對象」
$router 是「路由實例」對象包括了路由的跳轉方法，鉤子函數等

Promise的特色
狀態一旦改變就不再會發生改變了

如何建立Promise實例？

const promise = new Promise(function(resolve, reject) {
  if (/* 異步操做成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

let promise = Promise.resolve($.ajax('/test/test.json'));// => promise對象
promise.then(function(value){
   console.log(value);
});

小程序本質就是一個單頁應用
功能可分爲渲染層webview和邏輯層appService兩個部分

深拷貝和淺拷貝是針對複雜數據類型來講的，淺拷貝只拷貝一層，而深拷貝是層層拷貝。

---

請點贊！由於你的鼓勵是我寫做的最大動力！

吹逼交流羣：711613774