一、初始Vue-Cli
Vue CLI是一个基于 Vue.js 进行快速开发的完整系统。
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、创建项目
安装完成后，创建项目。项目名为demo
vue create demo
执行完成后会自动生成项目的基本结构
二、创建组件
1、单文件组件
单文件组件：把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾，这个文件就是单文件组件。xxx.vue是vue的单文件组件。
每个vue的单文件组件由三个部分组成：template里面放置模板内容，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定义属性，接收父组件传过来的数据。
- props中定义的属性是只读、不可修改的，不过可以在data中对父组件传递过来的值进行中转，修改data中的数据。如果属性是一个对象，可以通过 obj.属性名 修改对象的属性值。
子组件通过$emit()触发自定义事件，将最新的数据作为事件对象传回去。
<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、父组件
父组件可以通过绑定属性，将数据传给子组件。
父组件通过绑定自定义事件，更新数据。
<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选项定义组件的数据
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>
