Day 8: third-party component element-ui

pass value between components

Components can provide data from internal Data, or pass values ​​from parent components through props.
Data sharing can be provided between sibling components through a unified data source such as Vuex.

Differences between vue2 and vue3:
① The construction method of the vm object in main.js is different
② All components of vue2 must be included under a parent tag, while vue3 does not have this restriction

Example:
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>

Introduction to element-ui

• Element is a set of open source front-end framework provided by the domestic Ele.me company. It is simple and elegant, and provides multiple versions such as Vue, React, and Angular.
• Document address: https://element.eleme.cn/#/zh-CN
• Install: npm i element-ui
• Import Element:
  complete import, write the following content in 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)
});

Component usage

Refer to the official document: https://element.eleme.cn/#/zh-CN/component
example:

<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>

operation result:

Use of Icons

• Since Element ui provides fewer font icons, other icon libraries, such as the famous Font Awesome, are generally used.
• Font Awesome provides 675 scalable vector icons that can be changed using all the features CSS has to offer, including size, color, shadow, or any other supported effect.
• Document address: http://fontawesome.dashgame.com/
• Installation: npm install font-awesome
• Use: (in main.js import) import 'font-awesome/css/font-awesome.min.css'

Example usage :

    <!-- 图标 -->
    <!-- 前面的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

operation result:

Precautions

• The downloaded dependencies are all in the node_modules directory, but the node_modules directory does not need to be uploaded during multi-person collaborative development, because the downloaded dependencies have been recorded in the package.json file. You only need to run the "npm install" command on the terminal, and the project can run successfully.
• There can only be one root tag under the template of vue2, and there can be multiple tags under the template of vue3.