vue2.0

Vue.js是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。本文將介紹一些重要入門(mén)的知識(shí)點(diǎn)，比如：運(yùn)行環(huán)境的搭建、定義組件的方式、引用模板、動(dòng)態(tài)組件和父子組件間數(shù)據(jù)通信等等，希望對(duì)你們有些許幫助！

一、運(yùn)行環(huán)境搭建

Vue引入方式一般有三種：

第一種CDN引入

<script src="[https://cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue)"></script>

第二種使用 NPM 安裝

$ npm install vue//安裝最新穩(wěn)定版

第三種搭建腳手架CLI
所謂腳手架是通過(guò)webpack搭建的開(kāi)發(fā)環(huán)境，用于快速搭建大型單頁(yè)面應(yīng)用程序。能夠?yàn)楝F(xiàn)代前端開(kāi)發(fā)的工作流程，帶來(lái)持久強(qiáng)力的基礎(chǔ)架構(gòu)。只需幾分鐘，就可以建立并運(yùn)行一個(gè)帶有“熱重載、保存時(shí)代碼檢查以及可直接用于生產(chǎn)環(huán)境的構(gòu)建配置”的項(xiàng)目。

首先必須先安裝node.js,Node.js 在 0.6.3 版本開(kāi)始內(nèi)建npm，所以安裝好node.js后,npm也就裝好。然后在通過(guò)git bash 操作以下命令行：

$ node -v//檢查是否已經(jīng)裝好了node
$ npm -v//檢查是否已經(jīng)裝好了npm
$ npm install --global vue-cli //安裝 vue-cli
$ vue init webpack project//進(jìn)入目標(biāo)文件夾創(chuàng)建一個(gè)新項(xiàng)目
$ cd project//進(jìn)入新項(xiàng)目
$ npm install//安裝package.json中依賴(lài)的node_modules
$ npm run dev//運(yùn)行該項(xiàng)目

對(duì)于大陸用戶(hù)，建議將npm的注冊(cè)表源設(shè)置為國(guó)內(nèi)的鏡像，可以大幅提升安裝速度。推薦使用這種安裝腳手架。

npm config set registry https://registry.npm.taobao.org//配置淘寶鏡像
npm config get registry//驗(yàn)證是否成功
npm install -g cnpm --registry=https://registry.npm.taobao.org//安裝cnpm
cnpm install -g vue-cli//cnpm安裝腳手架
vue init webpack my-project
cd my-project
cnpm install
cnpm run dev

最后打開(kāi)http://localhost:8080，就出現(xiàn)下面的頁(yè)面，標(biāo)志著腳手架搭建完成了。

image

二、介紹SRC文件流程及根組件App

腳手架搭建完成后，project里面各個(gè)文件夾及文件，如下圖：

腳手架各個(gè)文件和文件夾

1.src文件流程介紹

index.html(入口文件)=>main.js=>App.vue（根組件），根組件中模板內(nèi)容就直接插入到入口文件中#app處，然后再將頁(yè)面呈現(xiàn)出來(lái)。

2.根組件App介紹

主要由三部分組成，分別為模板（html結(jié)構(gòu)），行為（處理邏輯）和樣式（解決樣式）

三、定義組件的方式

通?？梢苑譃榻M件全局定義和組件局部定義，后者比較常見(jiàn)。

1.組件全局定義

一般以下兩個(gè)步驟：

①main.js引入子組件

②App.vue組件中template調(diào)用

//main.js
import Vue from 'vue'
import App from './App'
import Users from "./components/Users";//引入子組件Users
Vue.config.productionTip = false
Vue.component("users",Users);//自定義名字便于App.vue組件調(diào)用，后者為組件名
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

//App.vue組件
<template>
  <div id="app">
   <users></users>//在這里調(diào)用，自定義名字是小寫(xiě)的
  </div>
</template>

還可以先創(chuàng)建組件構(gòu)造器，然后由組件構(gòu)造器創(chuàng)建組件，不過(guò)這種比較少用：

<div id="itany">
   <hello></hello>
</div>
...
//使用Vue.extend()創(chuàng)建一個(gè)組件構(gòu)造器
var MyComponent=Vue.extend({
    template:'<h3>Hello World</h3>'
});
//使用Vue.component(標(biāo)簽名,組件構(gòu)造器)，根據(jù)組件構(gòu)造器來(lái)創(chuàng)建組件
Vue.component('hello',MyComponent);
var vm=new Vue({ //這里的vm也是一個(gè)組件，稱(chēng)為根組件Root
    el:'#itany',
    data:{
      msg:'前端'
    }
});

2.組件局部定義

一般以下三個(gè)步驟：

①import引入子組件

②export default注冊(cè)子組件

③template模板中加入子組件

根組件App

四、引用模板和動(dòng)態(tài)組件

1.引用模板

通過(guò)標(biāo)簽<template></template>包裹起來(lái)來(lái)創(chuàng)建一個(gè)組件模板，示例如下:

<template id="app">
<!-- <template>必須有且只有一個(gè)根元素 -->
    <h1>hello</h1>
</template>
Vue.component("component-name",{
    template:'#app'//在此引入
})   

2.動(dòng)態(tài)組件

多個(gè)組件使用同一個(gè)掛載點(diǎn)，然后動(dòng)態(tài)的在它們之間切換。根據(jù) v-bind:is="組件名" 中的組件名去自動(dòng)匹配組件，如果匹配不到則不顯示。

動(dòng)態(tài)切換掉的組件（非當(dāng)前顯示的組件）是被移除掉了，如果想把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染，可以添加一個(gè)keep-alive 指令參數(shù)。

<div id="itany">
    <button @click="flag='my-hello'">顯示hello組件</button>
    <button @click="flag='my-world'">顯示world組件</button>
    <div>
      <!-- 使用keep-alive組件緩存非活動(dòng)組件，可以保留狀態(tài)，避免重新渲染，默認(rèn)每次都會(huì)銷(xiāo)毀非活動(dòng)組件并重新創(chuàng)建 -->
      <keep-alive>
        <component :is="flag"></component>
      </keep-alive>
    </div>
</div>

  <script>
    var vm = new Vue({
      el: '#itany',
      data: {
        flag: 'my-hello'
      },
      components: {
        'my-hello': {
          template: '<h3>我是hello組件：{{x}}</h3>',
          data() {
            return {
              x: Math.random()
            }
          }
        },
        'my-world': {
          template: '<h3>我是world組件：{{y}}</h3>',
          data() {
            return {
              y: Math.random()
            }
          }
        }
      }
    });
  </script>

五、父組件向子組件傳值

在一個(gè)組件內(nèi)部定義另一個(gè)組件，稱(chēng)為父子組件。子組件只能在父組件內(nèi)部使用。
默認(rèn)情況下，子組件無(wú)法訪(fǎng)問(wèn)父組件中的數(shù)據(jù)，每個(gè)組件實(shí)例的作用域是獨(dú)立的。

接下來(lái)我們通過(guò)一個(gè)例子，說(shuō)明父組件如何向子組件傳遞值：在子組件Users.vue中如何獲取父組件App.vue中的數(shù)據(jù) users:["Henry","Bucky","Emily"]

1.創(chuàng)建子組件，在src/components/文件夾下新建一個(gè)Users.vue子組件

2.在App.vue中注冊(cè)Users.vue組件，并在template中加入users標(biāo)簽

//App.vue父組件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定義名稱(chēng)便于子組件調(diào)用，后者要傳遞數(shù)據(jù)名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

3.Users.vue的中創(chuàng)建props，然后創(chuàng)建一個(gè)users的屬性

//users子組件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍歷傳遞過(guò)來(lái)的值，然后呈現(xiàn)到頁(yè)面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //這個(gè)就是父組件中子標(biāo)簽自定義名字
      type:Array,
      required:true
    }
  }
}
</script>

總結(jié)：父組件通過(guò)props向下傳遞數(shù)據(jù)給子組件。注：組件中的數(shù)據(jù)共有三種形式：data、props、computed

六、子組件向父組件傳值（通過(guò)事件形式）

接下來(lái)我們通過(guò)一個(gè)例子，說(shuō)明子組件如何向父組件傳遞值：
當(dāng)我們點(diǎn)擊“Vue.js Demo”后，子組件向父組件傳遞值，文字由原來(lái)的“傳遞的是一個(gè)值”變成“子向父組件傳值”，實(shí)現(xiàn)子組件向父組件值的傳遞。

子組件向父組件傳值之前

1.在子組件（header組件）中文字部分綁定一個(gè)點(diǎn)擊事件

<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//綁定一個(gè)點(diǎn)擊事件
  </header>
</template>
<script>

2.子組件中響應(yīng)該點(diǎn)擊事件的函數(shù)中使用$emit來(lái)觸發(fā)一個(gè)自定義事件，并傳遞一個(gè)參數(shù)

<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父組件傳值");//自定義事件  傳遞值“子向父組件傳值”
    }
  }
}
</script>

3.在父組件（App根組件）中的子標(biāo)簽中監(jiān)聽(tīng)該自定義事件并添加一個(gè)響應(yīng)該事件的處理方法

<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//與子組件titleChanged自定義事件保持一致，updateTitle($event)接受傳遞過(guò)來(lái)的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"傳遞的是一個(gè)值"
    }
  },
  methods:{
    updateTitle(e){   //聲明這個(gè)函數(shù)
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

總結(jié)：子組件通過(guò)events給父組件發(fā)送消息，實(shí)際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。

七、總結(jié)

在通信中，無(wú)論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個(gè)共同點(diǎn)就是都有中間介質(zhì)，子向父的介質(zhì)是自定義事件，父向子的介質(zhì)是props中的屬性。
如果覺(jué)得文章對(duì)你有些許幫助，歡迎在我的GitHub博客點(diǎn)贊和關(guān)注，感激不盡！