前端-element-ui

一、element-ui

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

官网： http://element-cn.eleme.io/#/zh-CN

二、创建 06-element-ui.html

将element-ui引入到项目

1、引入css

<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2、引入js

<script src="vue.min.js">script>

<script src="element-ui/lib/index.js">script>

3、编写html

<div id="app">
    <el-button @click="visible = true">Buttonel-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Elementp>
    el-dialog>
div>

关于.sync的扩展阅读
https://www.jianshu.com/p/d42c508ea9de

4、编写js

<script>
    new Vue({
      el: '#app',
      data: function () {//定义Vue中data的另一种方式
        return { visible: false }
      }
    })
script>

测试