前端页面 cdn引入 elementUI和vuejs使用_淘宝 cdn 地址 element-ui

H5直接使用cdn引入 elementUI vue(照常使用)

1、cdn引入 （建议下载到本地）

<script type="text/javascript" src="../js/vue.js"></script>
<!--
<script type="text/javascript" src=".../js/element.js"></script>
<link rel="stylesheet" href=".../style/element.css" type="text/css" />
-->
<!-- 引入样式 -->
<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>

1
2
3
4
5
6
7
8
9
10

2、html标签使用elementUi

 <a href="javascript:void(0);" @click="modifyTopics(<?php echo $d['id']; ?>)" ><?php echo $d['topics']; ?></a>
<el-dialog
        :visible.sync="visible"
        title="话题修改"
        width="80%"
        :append-to-body="true"
        :lock-scroll="false"
        :close-on-click-modal="false">
  <el-form :model="form">
  <el-form-item label="">
    <el-checkbox-group v-model="form.topics">
      <el-checkbox v-for="item in topic_list" :key="item.id" :label="item.id" name="type">{{item.name}}</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="submitTopic()">确 定</el-button>
  </div>

</el-dialog>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3、正常使用vue初始化

<div id="app">

</div>
1
2
3

new Vue({
      el: '#app',
        data: {
            api:'hsBack.php',
            form:{
                post_id:0,
                topics:[]
                },
            visible: false,
            topic_list:[]
        },
        created: function() {
                var that = this;
                that.getTopicList();
        },
		 methods: {
		
			}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果图

图片: