Vue 2.0初學後我的總結及分享

時間 2019-11-11

標籤 vue 2.0 初學我的總結分享简体版

原文原文鏈接

摘要：最近在上海找工做，發現Vue前景還不錯，因而就打算先學習一下（以前瞭解過，可是一直沒提到日程上）這篇隨筆當是爲了本身學習以後，作一個小的階段性總結。但願本文的內容對於剛開始接觸vue的朋友們有點幫助（曾經的我）。若有誤導之處，但願你們幫忙指出。javascript

正文：html

　　1、Vue 2.0前端

　　　　吐槽：目前市面上我所接觸過的前端框架有 Angular React Vue 固然還有一些其餘的，只是我都沒怎麼用過，很差多說。vue

　　　　　　　　Angularjava

　　　　　　　　　　我接觸的第一個前端框架，對數據有良好的處理，可是學起來入手還行，深刻的話成本大了一些。當時習慣使用JQuerynode

　　　　　　　　的我換成了這個新鮮的玩意確實仍是用了一些時間，項目成型後，以爲用着還行。可是後來的Angular2.0 讓我完全的放棄了webpack

　　　　　　　　Angular（我的想法），後來看到了移動端的熱潮，可是Angular用在移動端的話，顯得有些重了。這個時候React出現了。web

　　　　　　　　React & React Nativevuex

　　　　　　　　　　號稱僅次於原生的JS前端框架閃耀問世，因爲有了些以前Angular的基礎，學習這個要輕鬆一些，不得不說「盛名之下無api

　　　　　　　　虛士」，視圖的組件化和響應式不管是開發仍是用戶體驗都是極好的。

　　　　　　　　Vue

　　　　　　　　　　Vue的出現，性能方面官網給出了很明確的數據，在這裏。而放在第一位的作比較的就是React，可見其對React的

　　　　　　　　重視程度，在有前兩個框架的基礎上，本就容易掌握的Vue，耗費的成本小的不少。更優的性能，更低的學習成本。

----------------來點正經的-----------------

官網的文檔很好，這裏只是記錄一下當初本身學習的一些疑惑。

1）關於組件化，一張圖解釋足以。

2）什麼是「鉤子」？

　文檔裏屢次提到「鉤子」，「鉤子」簡單理解就是「到何時，作什麼事」，好比生命週期鉤子，以下圖：

　其中：mounted 就是頁面渲染完了以後，咱們能夠乾點什麼壞事。一看代碼就馬上明白了。

<script>
	import $ from 'webpack-zepto';
	export default {
		data () {
			return {
				topic: {},
				topicId: ''
			}
		},
		mounted () {
			this.topicId = this.$route.params.id;
			$.get('https://cnodejs.org/api/v1/topic/' + this.topicId, (d) => {
				if (d && d.data) {
					this.topic = d.data;
				}
			})
		}
	}
</script>

　　咱們經過 mounted （頁面渲染完成後，即「到何時」）這個「鉤子」，當頁面渲染完了以後，發起了一個請求（即「作什麼事」），

而後就會有一些列邪惡的事情。看到這裏，相信都能明白什麼是「鉤子」啦！明白了什麼是「鉤子」，對以後的學習頗有必要。

3）數據的傳遞（這很重要）

　父組件：　　　　　　　　

<template>
    <div>
        <cn-slide :show-menu="show"></cn-slide> <!-- 這裏就是父組件 -->
    </div>
</template>
<script>
    import $ from 'webpack-zepto'
    import cnSlide from './slide'
    export default {
        data() {
            return {
                show: false
            };
        },
        components: {
            cnSlide
        }
    };
</script>

　　子組件：就是 import cnSlide from './slide' 中的這個 slide 文件

　1. 父組件-->子組件

　　這種傳值的方式很容易理解。

　　首先：在父組件中，經過 v-bind （縮寫爲「:」）命令，綁定一個屬性（即 prop，語義化比較容易理解），並傳入必定的值（也能夠是對象）

　　　　　關於如何傳入，上面的代碼已經給出了。

　　而後：在子組件中經過 props 來接收，代碼以下：

<script>
    export default {
        replace: true,
        props: ['showMenu'],
        computed: {
            isShow: function() {
                return this.showMenu = false   //使用 this.  便可調用。與data同樣使用
            }
        }
                ...
    };
</script>

　2. 子組件-->父組件

　　這個稍微有點難度了

　　主要用到兩個方法便可：vm.$on 和 vm.$emit 上代碼：

// vm.$on("監控的方法名，字符串", callback) 用在父組件
// 這裏的 v-on 就至關因而$on, child-say = 監控的方法名, 
// listenToMyBoy = callback 
<comp-fa  v-on:childsay="listenToMyBoy"></comp-fa>
<p>Do you like me? {{childsay}}</p>

 methods: {
            listenToMyBoy: function (data){ //data 就是從子組件接收到的值
              this.childsay = data
            }
 }

// vm.$emit("父組件監控的方法名",要傳給父組件的參數)
// 這裏的 talk 只是爲了觸發 emit()
<button v-on:click="talk">I like you</button>
methods: {
      talk: function(){
        this.$emit('childsay',想要傳給父組件的數據data);
      }
 }

3. 組件與組件間

　　僅是爲了總結狀況才寫出來，文檔上也有寫到，複雜狀況的話就用狀態管理模式，這裏只是略作解釋。

//這裏就直接引用官方代碼
//只是用了一個空的 Vue實例做爲中間介質，畢竟兩個平行的東西想要交集，就要藉助其餘東西。
//若是理解了 子組件 向 父組件傳值，這個也不難理解 
var bus = new Vue()

// 觸發組件 A 中的事件
bus.$emit('id-selected', 1) //這裏的 1 做爲參數傳入下面的時間當中

// 在組件 B 建立的鉤子中監聽事件
bus.$on('id-selected', function (id) {
  // ...
})