第三方组件element-ui
组件间的传值
组件可以由内部的Data提供数据，也可以由父组件通过prop的方式传值。
兄弟组件之间可以通过Vuex等统一数据源提供数据共享。
vue2与vue3的差异：
① main.js里面vm对象的构建方式不同
② vue2所有组件必须包含在一个父标签下，vue3则没有这个限制
示例：
Movie.vue
<template>
<div>
<h1>{
{ title }}</h1>
<span>{
{ rating }}</span>
<button @click="fun">点击</button>
</div>
</template>
<script>
export default {
name:"Movie",
props:["title","rating"],
data:function(){
return{
// title:"金刚狼"
}
},
methods:{
fun(){
alert("收藏成功")
}
}
}
</script>
<style scoped>
</style>
App.vue
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- <Movie title="ahhhhh" rating="8.7"></Movie> -->
<!-- 组件里面使用v-for必须有key属性 -->
<Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>
<!-- 兄弟组件 -->
<Hello></Hello>
</div>
</template>
<script>
//导入
import Movie from './components/Movie.vue'
import Hello from './components/Hello.vue'
//导出
export default {
name: 'App',
components: {
Movie,
Hello
},
data:function(){
return{
movies:[
{
id:1,title:"金刚1",rating:8.7},
{
id:2,title:"金刚2",rating:8.8},
{
id:3,title:"金刚3",rating:8.9},
]
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
element-ui介绍
- Element是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了Vue，React，Angular等多个版本。
- 文档地址：https://element.eleme.cn/#/zh-CN
- 安装：npm i element-ui
- 引入Element：
完整引入，在main.js写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
组件的使用
参考官方文档：https://element.eleme.cn/#/zh-CN/component
示例：
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</template>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
export default {
methods: {
tableRowClassName({
row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
}
}
</script>
运行结果：
图标的使用
- 由于Element ui提供的字体图标较少，一般会采用其他图标库，如著名的Font Awesome。
- Font Awesome提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括大小、颜色、阴影或者其他任何支持的效果。
- 文档地址：http://fontawesome.dashgame.com/
- 安装：npm install font-awesome
- 使用：（在main.js导入）import ‘font-awesome/css/font-awesome.min.css’
使用示例：
<!-- 图标 -->
<!-- 前面的fa是固定的，引入不同的图标只需要更改名字即可 -->
<i class="fa fa-camera-retro"></i> fa-camera-retro
<br>
<i class="fa fa-home"></i>fa-home
<br>
<i class="fa fa-address-book"></i>fa-address-book
运行结果：
注意事项
- 下载的依赖都在node_modules目录下，但是多人协作开发时不需要传node_modules目录，因为package.json文件里面已经记录了下载的依赖，只需要在终端运行“npm install”命令，项目则可以成功运行。
- vue2的template下只能有一个根标签，vue3的template下可以有多个。