Vue總結

Vue不支持IE8 及以下版本
1、指令：

---

v-bind，
v-if="seen"，
v-for="todo in todos"，
v-on 指令添加一個事件監聽器，
<button v-on:click="reverseMessage">逆轉消息</button>

2、常用指令有哪些？

---

v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on v-on:click="doThis(item)"
v-bind 動態地綁定一個或多個特性，或一個組件 prop 到表達式
v-bind:href="myurl"

      v-bind:id="myid"
      v-bind可以縮寫爲 :屬性 ,例如 :href="myurl"
      示例 :id  :class  :href  :title :src :style :key :value

v-bind:class="{ active: isActive }" ： 當isActive變量爲true時，動態添加active 類class
v-model
v-for的使用 i 是索引
<ul>

  <li v-for="(item, i) in msg">
    <a href="#javascript:">{{i}}  {{item.hotWord}}</a>
  </li>
</ul>

msg:[

    {hotWord: "zz1"},
    {hotWord: "zz2"},
    {hotWord: "zz3"},
    {hotWord: "zz4"}
  ],

3、表單

---

<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">

{{ option.text }}

</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {

selected: 'A',
options: [
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
]

}
})
默認選中A的下拉框。

4、組件基礎：
組件是可複用的vue實例，
5、條件渲染：

---

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
6、事件處理：

---

在表單<input> <textarea> 及<select>元素上創建雙向數據綁定
它會根據控件類型自動選取正確的方法來更新元素。
7、組件基礎：
1。父組件像子組件傳值：通過props數組
父組件：
<template>
<child :name="name"></child>
</template>
<script>
import child from "./child.vue"
export default {

 components: {child},
 data(){
  return {name:"二哈"}
 }

}
</script>
子組件：
<template>
<div>{{name}}</div>
</template>
<script>
export default {

props:["name"]

}
</script>
2：子組件給父組件：
父組件：
<template>
<child @childToParent="reviceSondata"></child>
</template>
<script>
import child from "./child.vue"
export default {

components: {child},
methods:{
  reviceSondata(data){
    console.log(data);
  }
}

}
</script>
子組件：
<template>
<button @click="dataTofather">點擊</button>
</template>
<script>
export default {

data () {
  return {
    message: '啦啦啦啦'
  }
},
methods:{
  dataTofather(){
    this.$emit("childToParent",this.message,true);
  }
}

}
</script>

8、axios 簡介

---

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特徵：

從瀏覽器中創建 XMLHttpRequest
從 node.js 發出 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數據
取消請求
自動轉換JSON數據
客戶端支持防止 CSRF/XSRF

引入方式：

1、安裝： npm install axios
2、在main.js文件中 引入
import axios from 'axios'
Vue.prototype.$http = axios
在 main.js 中添加了這兩行代碼之後，就能直接在組件的 methods 中使用 $http命令
methods: {
  postData () {
    this.$http({
      method: 'post',
      url: '/user',
      data: {
        name: 'xiaoming',
        info: '12'
      }
   })
}
執行 GET 請求：
// 也可以通過 params 對象傳遞參數
$http.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
執行 POST 請求
$http.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

9、學習使用Promise

---

https://blog.csdn.net/heshuai...
有沒有一種方法可以讓寫法像同步，而本質是異步化呢？
Promise 就出來了。
一： 優點和缺點
可以將異步操作以同步操作流程的方式表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操作更加容易。

Promise也有一些缺點。首先，無法取消Promise，一旦新建它就會立即執行，無法中途取消。其次，如果不設置回調函數，Promise內部拋出的錯誤，不會反應到外部。當處於Pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。
如何使用？：
function promiseAjax(url){

  let p = new Promise((resolve,reject)=>{
    //第一個參數成功的回調函數
    //第二個參數失敗的回調函數

    let xhr = new XMLHttpRequest();
    xhr.open('get',url,true);
    xhr.send();
    xhr.onreadystatechange=function(){
      if(this.readyState===4){
        if(this.status >= 200 && this.status <300 || this.status === 304){
          let res = JSON.parse(this.responseText)
          resolve(res);//成功回調函數的傳參；
        }else{
          reject(this.status)//失敗回調函數的傳參；
        }
      }
    }
  })
  return p
}
//然後調用
let oData = promiseAjax('http://localhost:8080/yxw/MenuController_GeneralMenuList.do');
let oData2 = promiseAjax('http://localhost:8080/yxw/DomesticProfitController_getOperatIdList.do');

Promise.all([oData,oData2]).then(function(res){
  console.log('3333',res)
},function(err){
  console.log(err)
})

10、生命週期鉤子

---

一：組件創建前後：
1.beforeCreate
2.created
例子：
data（）{

return {
    a:1
},
beforeCreate(){
    console.log(this.a)//undefined
},
created(){
    console.log(this.a)//1
}

}
二. vue啓動前後
3.beforeMount
4.mounted
這兩個的意思就是，
vue在beforeMount時，還不管事，也就是說，還沒有渲染數據到<div id="app"><div/>裏面，此時的這個組件還是空的

當mounted時，纔會往<div id="app"><div/> 添加東西，也就是vue正式
接管<div id="app"><div/>

可以獲取#app的innerHTML查看差異；
beforeMount(){

console.log(document.getElementById('app').innerHTML)//空的

},
mounted(){

console.log(document.getElementById('app').innerHTML)//#app裏的內容

}
三. 組件更新前後
5.beforeUpdate
6.updated
當子組件裏面的 視圖改變 的時候觸發。
如，做一個按鈕，讓data裏面的a++，假如 一開始a是1
beforeUpdate返回1
updated返回2
例子：點擊一次之後返回值分別是1，2
<button id="button1" @click ="handleClick">{{a}}</button>
data () {
return {

a:1,

}
},
beforeUpdate(){
console.log('beforeUpdate',document.getElementById('button1').innerHTML) //1
},
updated(){
console.log('updated',document.getElementById('button1').innerHTML) //2
},
methods: {
handleClick(){

this.a = this.a + 1;
console.log('嘿嘿', this.a)

}
}
四. 組件銷燬前後
7.beforeDestroy
8.destroyed
一個問題，如果我們在子組件裏寫一個定時器，然後，子組件被銷燬了，定時器還會執行嗎？
答案是會的
所以這時候就會用到了destroyed,在組件被銷燬後，我們把定時器給清除就好了。
所以這兩個鉤子函數一般用於做性能的優化。
六. 當捕獲一個來自子孫組件的錯誤時被調用
11.errorCapture
當子孫組件報錯的時候，父組件會觸發這個鉤子函數，並且會返回三個參數，
第一個參數是 錯誤對象
第二個參數是 報錯的子孫組件
第三個參數是 報錯的子孫組件的具體哪個地方報錯。（如，假如我沒有定義b這個變量，但是我去console.log(b) 這一句肯定會報錯，假如我把這句錯誤代碼寫在了created這個鉤子函數裏，那第三個參數會返回就是：created hook）。

11、computed屬性和watch屬性：

---

https://blog.csdn.net/joseydo...
https://www.w3cplus.com/vue/v...
computed計算屬性可用於快速計算視圖（View）中顯示的屬性。這些計算將被緩存，並且只在需要時更新。
我們還可以使用計算屬性根據數據模型中的值或一組值來計算顯示值。
例子：
<div v-for="subject in results">

  <input v-model="subject.marks">
  <span>Marks for {{ subject.name }}: {{ subject.marks }}</span>
</div>

<div> 學科總分Total marks are: {{ totalMarks }} </div>
results: [

    { name: 'English', marks: 70 }, 
    { name: 'Math', marks: 80 }, 
    { name: 'History', marks: 90 } 
  ]

computed: {

totalMarks: function () {
  let total = 0;
  let me = this;
  for (let i = 0; i < me.results.length; i++)
  {
    total += parseInt(me.results[i].marks);
  }
  return total;
}

},

我們可以使用Vue中的method計算出學科的總分，最終得到的總數結果是相同的
我們把computed區塊中的totalMarks函數整體移到methods中。
同時在模板中將{{ totalMarks }} 替換成 {{ totalMarks() }}。
你最終看到的結果是一樣的。

computed 屬性，和在 methods 中定義一個相同的函數都可以實現這個功能，那麼區別是？

computed 屬性會基於它所依賴的數據進行緩存。 每個 computed 屬性， 只有在它所依賴的數據發生變化時，
纔會重新取值(re-evaluate)。

這就意味着，
只要 message 沒有發生變化，
多次訪問 computed 屬性 reversedMessage，
將會立刻返回之前計算過的結果，
而不必每次都重新執行函數。
其次，計算屬性具有緩存，相比Vue中的方法而言，性能更佳。但Vue中的計算屬性都是同步的，如果需要異步我們得依賴於vue-async-computed插件
12、組建基礎：