一、初始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í)行完成后會自動生成項目的基本結構
二彻犁、創(chuàng)建組件
1、單文件組件
單文件組件：把一個組件全部內(nèi)容匯合到一個文件中凰慈，文件名字是以 .vue 結尾，這個文件就是單文件組件驼鹅。xxx.vue是vue的單文件組件微谓。
每個vue的單文件組件由三個部分組成：template里面放置模板內(nèi)容，script里面放置js代碼输钩，style里面放置樣式豺型。
<template>
<div>
</div>
</template>
<script>
export default {
name:'App'
}
</script>
<style>
</style>
2、使用組件的步驟
（1）導入組件
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中對父組件傳遞過來的值進行中轉功戚，修改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>
// 每個組件乘粒，其實就是一個導出的對象
export default {
name:'Child',
props:['car','planeName','planePrice'],
// 注意：組件里面的data一定要是一個方法豌注，由方法返回一個對象
data() {
return {
title:'我是Child組件',
// 中轉父組件傳遞過來的值
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他爸、導入
// 導入element-ui組件庫
import ElementUI from 'element-ui';
// 導入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>
