Vue總結

Vue不支持IE8 及如下版本
一、指令：

---

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

v-if：
一、v-if 是「真實」的條件渲染，由於它會確保條件塊(conditional block)在切換的過程當中，
完整地銷燬(destroy)和從新建立(re-create)條件塊內的事件監聽器和子組件。
二、v-if 是惰性的(lazy)：若是在初始渲染時條件爲 false，它不會執行任何操做 - 在條件第一次變爲 true 時，纔開始渲染條件塊。
相比之下，v-show 要簡單得多 - 無論初始條件如何，元素始終渲染，而且只是基於 CSS 的切換。

v-if和v-show的區別? v-if 在切換時有更高的性能開銷， 而 v-show 在初始渲染時有更高的性能開銷。
所以，若是須要頻繁切換，推薦使用 v-show， 若是條件在運行時改變的可能性較少，推薦使用 v-if。

二、經常使用指令有哪些？

---

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"}
  ],

三、表單

---

<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的下拉框。

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

---

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

---

在表單<input> <textarea> 及<select>元素上建立雙向數據綁定
它會根據控件類型自動選取正確的方法來更新元素。
七、組件基礎：
1、經過prop向子組件傳遞數據：
一個組件默承認以擁有任意數量的 prop，任何值均可以傳遞給任何 prop。

例子：
在一個典型的應用中，你可能在 data 裏有一個博文的數組，
並想要爲每篇博文渲染一個組件。
八、父組件給子組件：

這種傳值的方式很容易理解。
首先： 在父組件中，經過 v-bind （縮寫爲 「:」）命令，綁定一個屬性（即 prop，語義化比較容易理解），並傳入必定的值（也能夠是對象）關於如何傳入，上面的代碼已經給出了。
而後： 在子組件中經過 props 來接收，

總結一下：

一、子組件在props中建立一個屬性，用以接收父組件傳過來的值
二、父組件中註冊子組件
三、在子組件標籤中添加子組件props中建立的屬性
四、把須要傳給子組件的值賦給該屬性

父組件：

<div class="parent">
      <h2> 這裏是父組件</h2>
      <cn-children v-for="post in posts" v-bind:key1="post.id"  v-bind:title="post.title">
      </cn-children>
    </div>
   <script>
    import cnChildren from './children'
    export default {
        name: "parent",
        components: {
          cnChildren
        },
        data () {
          return {

            posts: [
              { id: 1, title: 'My journey with Vue' },
              { id: 2, title: 'Blogging with Vue' },
              { id: 3, title: 'Why Vue is so fun' }
            ]

          }
        },
    }
</script>

子組件接收：

<div class="children">
  <p>{{key1}}</p>
  <p>這裏是子組件  {{title}}</p>
</div>
<script>
export default {
    name: "children",
    props: ['key1','title'],
}
</script> 

效果圖：

9：子組件給父組件：

父組件：
<template>
<child v-on:spot="spot"></child>
</template>
<script>
import child from "./child.vue"
export default {

components: {child},
methods:{
  spot:function(data){
      console.log('data',data)
   }
}

}
</script>
子組件：
<template>
<button v-on:click="spot">點一下就傳</button>
</template>
<script>
export default {

data () {
  return {
    message: '啦啦啦啦'
  }
},
methods:{
   spot: function() {
        // 與父組件通訊必定要加上這句話
        this.$emit("spot", '我是子組件傳給父組件的內容就我。。')
   }
}

}
</script>
總結一下
1，子組件須要以某種方式例如點擊事件的方法來觸發一個自定義事件。
2，將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應自定義事件的方法。
3，在父組件中註冊子組件並在子組件標籤上綁定對自定義事件的監聽。

在通訊中，不管是子組件向父組件傳值仍是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。抓準這兩點對於父子通訊就好理解了

10：監聽子組件事件（參考官網）
https://cn.vuejs.org/v2/guide...
父組件中：

v-on:enlarge-text="postFontSize += 0.1"

子組件：

<button v-on:click="$emit('enlarge-text')">點擊我讓文字變大</button>

十一、axios 簡介

---

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它自己具備如下特徵：

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

引入方式：

一、安裝： npm install axios
二、在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);
  })

十二、學習使用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)
})

1三、生命週期鉤子

---

一：組件建立先後：
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）。

1四、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插件

1五、路由跳轉以及傳參：

一、在index.js中配置路由：

const router = new VueRouter({
  routes:[
    {
      path: '/home', component: require('../components/Home.vue')
    },
    {
      path: '/details', component: require('../components/Details.vue')
    },
    {
        path: '/about', component: require('../components/About.vue')
  },{
      path:'*',redirect:'/home'
  }]

})

二、查詢參數其實就是在路由地址後面帶上參數和傳統的url參數一致的，

傳遞參數使用query並且必須配合path來傳遞參數而不能用name，

目標頁面接收傳遞的參數使用query。

使用方法以下：

this.$router.push({
            path: '/details',
            query: {
              id: article.id
            }
          })

三、接收參數以下：

this.$route.query.id

四、最後總結爲如下兩點：

1.命名路由搭配params，刷新頁面參數會丟失

2.查詢參數搭配query，刷新頁面數據不會丟失

3.接受參數使用this.$route後面就是搭配路由的名稱就能獲取到參數的值

最終效果圖：