Vue组件使用入门

第三方组件

组件之间的传值

• 组件可以用内部的Data提供数据，也可以使用父组件提供prop方式传值
  • 使用export default
• 兄弟组件之间可以通过Vuex等统一数据源提供数据共享
  • vue无能为力，需要其他辅助如vuex

组件的引入

需要修改三个地方

• 在script标签中import组件和对应的路径

• 在components中注册组件名称

• 在template在对应位置使用组件名称的标签来引用组件

  <template>
    <div id="app">
      <Movie></Movie>
      <img alt="Vue logo" src="./assets/logo.png">
    </div>
  </template>
  
  <script>
  import Movie from './components/Movie.vue'
  export default {
    name: 'App',
    components: {
      Movie,
    }
  }
  </script>
  

组件的编写

• 使用template编写主要内容，如数据的渲染等

• 在script中编写脚本和数据

  • export default：导出数据，之后可以在引入该组件的地方使用导出的数据
  • props:设置一些该vue自己的属性，在其他组件引用时可以使用这个属性传值给本vue

  <template>
      <div>
          <!-- 给子组件的对应位置传值，当调用的组件传值给对应属性时，则可以被渲染 -->
          <h1>{{title}}</h1>
          <span>{{ rating }}</span>
          <button @click="like">收藏</button>
      </div>
  </template>
  
  <script>
  export default {
      // 导出组件的名称
      name: "Movie", 
      //自定义一个标签，使得Movie被其他vue引入时，标签中有title属性
      props:["title","rating"],
      data: function(){
          return {
              title:"No Film"
          }
      },
      //定义按键的方法
      methods:{
          like() {
              alert("Ok!")
          }
      }
  }
  </script>
  

  <template>
      <div>
          <!-- 给子组件的对应位置传值，当调用的组件传值给对应属性时，则可以被渲染 -->
          <h1>{{title}}</h1>
          <span>{{ rating }}</span>
          <button @click="like">收藏</button>
      </div>
  </template>
  
  <script>
  export default {
      // 导出组件的名称
      name: "Movie", 
      //自定义一个标签，使得Movie被其他vue引入时，标签中有title属性
      props:["title","rating"],
      data: function(){
          return {
              title:"No Film"
          }
      },
      //定义按键的方法
      methods:{
          like() {
              alert("Ok!")
          }
      }
  }
  </script>
  

Element-ui

这是饿了么提供的一套前端开源框架

• 文档 https://element.eleme.cn/#/zh-CN

• 安装

  npm install element-ui -S
  

  安装完成后所有第三方资源会放在node_modules目录，也会被记录在package.json中，如果项目中不存在node_modules目录，则可以安装后再运行

  npm install
  

• 引入

  可以直接使用全局注册，使得在项目任何位置可以使用

  import Vue from 'vue'
  import App from './App.vue'
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  
  Vue.config.productionTip = false
  Vue.use(ElementUI)
  new Vue({
    render: h => h(App),
  }).$mount('#app')
  

• 使用组件

  如创建一个表格，可以在文档中选择对应样式并拷贝

  <template>
      <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <!-- 在每行结束时调用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>
  </template>
  
  <script>
  export default {
      methods: {
          // 隔行改变颜色
        tableRowClassName({row, rowIndex}) {
          if (rowIndex % 2 === 0) {
            return 'warning-row';
          } else if (rowIndex % 2 === 1) {
            return 'success-row';
          }
          return '';
        }
      },
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }]
        }
      }
    }
  </script>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }
  
    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
  

第三方图标库

• Font Awesome 4.0

  https://fontawesome.dashgame.com/

  • 安装

    npm install font-awesome
    

  • 使用

    import "font-awesome/css/font-awesome.min.css"
    

• Element-ui 也提供了一些简单的图标