[Day27] Web 前端概述 - Element 和 Bootstrap 的使用 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 27

自我挑戰組

30天學python系列第 27 篇

[Day27] Web 前端概述 - Element 和 Bootstrap 的使用

11th鐵人賽

Min

團隊菜雞自學

2019-10-13 00:53:04

2870 瀏覽

分享至

前端框架

UI框架 - Element

基於 Vue 2.0 的組件庫，用於構造用戶界面，支持響應式佈局。

引入 Element 的 CSS 和 JavaScript 文件。

<!--引入樣式--> 
< link  rel = " stylesheet "  href = " https://unpkg.com/element-ui/lib/theme-chalk/index.css " >
<!--引入組件庫- -> 
< script  src = " https://unpkg.com/element-ui/lib/index.js " ></ script >

範例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <el-button @click="visible = true">點我</el-button>
  		  <el-dialog :visible.sync="visible" title="Hello world">
  			  <p>開始使用 Element </p>
  		  </el-dialog>
            </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
  	  new Vue({
  		  el: '#app',
  		  data: {
  			  visible: false,
  		  }
  	  })
    </script>
</html>

使用元件。

<!DOCTYPE html>
<html>
    <head>
  	  <meta charset="UTF-8">
  	  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
  	  <div id="app">
  		  <el-table :data="tableData" stripe style="width: 100%">
  		   	  <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>
  	  </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
  	  new Vue({
  		  el: '#app',
  		  data: {
  			  tableData:  [
  			  	  {
  				  	  date: '2016-05-02',
  					  name: 'Andy',
  					  address: 'New Taipei City'
  				  }, 
  				  {
  				  	  date: '2016-05-04',
  					  name: 'Alan',
  					  address: 'Taipei City'
  				  }, 
  				  {
  					  date: '2016-05-01',
  					  name: 'Adam',
  					  address: 'Taichung City'
  				  }, 
  				  {
  					  date: '2016-05-03',
  					  name: 'Amy',
  					  address: 'Tainan City'
  				  }
  			  ]
  		  }
  	  })
    </script>
</html>