一段代码，入门，vue、element-ui，

天魔老师

已于 2023-04-28 18:18:45 修改

阅读量183

点赞数

分类专栏：前端文章标签：一段代码入门 vue element-ui element

于 2019-12-06 16:05:10 首次发布

本文链接：https://blog.csdn.net/weixin_39990025/article/details/103424686

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <link rel="stylesheet" 
			  href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">-->
    <title>Title</title>
</head>
<body>
	<div id="app">
	
	    <div style="padding: 20px;">
	        <!--   这个div内是vue的示例代码，最简单的双向绑定     -->
	        {{ message }}
	    </div>
	    
	    <div style="padding: 20px;">
	        <!--   这个div内是vue结合element-ui的示例代码，最简单的无数据的几个按钮     -->
	        <el-row>
	            <el-button>默认按钮</el-button>
	            <el-button type="primary">主要按钮</el-button>
	            <el-button type="success">成功按钮</el-button>
	            <el-button type="info">信息按钮</el-button>
	            <el-button type="warning">警告按钮</el-button>
	            <el-button type="danger">危险按钮</el-button>
	        </el-row>
	    </div>
	    
	    <div style="padding: 20px;">
	        <!--   这个div内是vue结合element-ui的属性、方法调用的示例代码，最简单的     -->
	        <el-transfer
	                filterable
	                :filter-method="filterMethod"
	                filter-placeholder="请输入城市拼音"
	                v-model="value"
	                :data="data01">
	        </el-transfer>
	    </div>
	    
	</div>

</body>

<!--这是引入vue：上面的是vue官网的js；下面是element-ui的js；都可以使用-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->

<!-- 引入element-ui的样式：上面是固定版本的；下面是不固定版本的；推荐使用固定版本，防止更新出bug -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->

<!-- 引入element-ui的组件库：上面是固定版本的；下面是不固定版本的；推荐使用固定版本，防止更新出bug -->
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

<!--脚本内容-->
<script>
    var app = new Vue({
        // 选定id==app的元素，做为vue作用的范围
        el: '#app',
        // data: {
        //     message: 'Hello Vue!'
        // },
        data() {
            
            const generateData = _ => {
                const data = [];
                const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
                const pinyin = ['shanghai', 'beijing', 'guangzhou', 
                'shenzhen', 'nanjing', 'xian', 'chengdu'];
                cities.forEach((city, index) => {
                    data.push({
                        label: city,
                        key: index,
                        pinyin: pinyin[index]
                    });
                });
                return data;
            };
            return {
                // 返回给元素，需要动态展示的数据及函数
                data01: generateData(),
                value: [],
                message: 'Hello Vue!',
                filterMethod(query, item) {
                    return item.pinyin.indexOf(query) > -1;
                }
            };
        }
    })
    // export default {
    // };
</script>
</html>

效果图：在这里插入图片描述

天魔老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
一段代码，入门，vue、element-ui，

上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><!-- <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/ind...
复制链接

扫一扫