一、初始Vue-Cli

Vue CLI是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)。

1、安裝

全局安裝Vue-Cli

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

查看版本號

vue --version

升級

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

2、創(chuàng)建項目

安裝完成后，創(chuàng)建項目。項目名為demo

vue create demo

執(zhí)行完成后會自動生成項目的基本結(jié)構(gòu)

二、創(chuàng)建組件

1、單文件組件

單文件組件：把一個組件全部內(nèi)容匯合到一個文件中，文件名字是以 .vue 結(jié)尾，這個文件就是單文件組件。xxx.vue是vue的單文件組件。
每個vue的單文件組件由三個部分組成：template里面放置模板內(nèi)容，script里面放置js代碼，style里面放置樣式。

<template>
  <div>
  </div>
</template>
<script>
  export default {
    name:'App'
  }
</script>
<style>
</style>

2、使用組件的步驟

（1）導(dǎo)入組件

import Child from './components/Child.vue'

（2）注冊組件

export default {
  // name選項定義組件的名稱
  name: 'App',
  components:{
    Child
  }
}

（3）使用組件

  <div id="app">
    <Child></Child>
  </div>

三、父子組件之間傳值

1、子組件

子組件通過props定義屬性，接收父組件傳過來的數(shù)據(jù)。

• props中定義的屬性是只讀、不可修改的，不過可以在data中對父組件傳遞過來的值進行中轉(zhuǎn)，修改data中的數(shù)據(jù)。如果屬性是一個對象，可以通過 obj.屬性名 修改對象的屬性值。

子組件通過$emit()觸發(fā)自定義事件，將最新的數(shù)據(jù)作為事件對象傳回去。

    <div class="child">
        <h3>{{title}}</h3>
        <hr>
        <p>車名：<input type="text" v-model="car.name"></p>
        <p>車價：<input type="text" v-model="car.price"></p>
        <hr>
        <p>飛機名稱：<input type="text" v-model="myPlaneName"></p>
        <p>飛機價格：<input type="text" v-model="myPlanePrice"></p>
    </div>

// 每個組件，其實就是一個導(dǎo)出的對象
export default {
    name:'Child',
    props:['car','planeName','planePrice'],
    // 注意：組件里面的data一定要是一個方法，由方法返回一個對象
    data() {
        return {
            title:'我是Child組件',
            // 中轉(zhuǎn)父組件傳遞過來的值
            myPlaneName : this.planeName,
            myPlanePrice : this.planePrice
        }
    },
    watch:{
        myPlaneName(val){
            this.$emit('updatePName',val)
        },
        myPlanePrice(val){
            this.$emit('updatePPrice',val)
        }
    }
}

2、父組件

父組件可以通過綁定屬性，將數(shù)據(jù)傳給子組件。
父組件通過綁定自定義事件，更新數(shù)據(jù)。

  <div id="app">
    <h2>{{title}}</h2>
    <p>汽車信息：{{car}}</p>
    <p>飛機信息：{{planeName}}-{{planePrice}}</p>>
    <Child :car="car" :planeName="planeName" :planePrice="planePrice"
    @updatePName="planeName=$event" @updatePPrice="planePrice=$event"></Child>
  </div>

import Child from './components/Child.vue'
export default {
  // name選項定義組件的名稱
  name: 'App',
  // data選項定義組件的數(shù)據(jù)
  data() {
    return {
      //定義一輛車的信息
      car:{
        name:'奔馳',
        price:'50W'
      },
      //飛機信息
      planeName:'波音747',
      planePrice:'10Y'
    }
  },
  components:{
    Child
  }
}

四、Element-UI

1、安裝

npm i element-ui -S

2、導(dǎo)入

// 導(dǎo)入element-ui組件庫
import ElementUI from 'element-ui';
// 導(dǎo)入element-ui組件庫的樣式
import 'element-ui/lib/theme-chalk/index.css';
// 注意：element-ui組件庫，是一個插件，所有的插件都要由Vue去use
Vue.use(ElementUI);

2、使用

<template>
  <div class="el">
    <h3>Element-UI組件庫</h3>
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "Element"
};
</script>
<style>
.el {
  border: green solid 1px;
  padding: 10px;
  margin-top: 10px;
}
</style>