无需脚手架使用element Ui

前言

最近在做毕业设计，需要一点点好看的UI，但是boostrap已经快看腻了，故花了一点点时间学习了一下Vue，然后想使用Element-UI这个框架，但是学到了脚手架感觉太难了。但我还想使用Element-ui怎么办呢？请看下文

此刻心情：问君能有几多愁，恰似一江春水向东流。

教程

如果不使用脚手架，我们只能直链的方式引入Vue了，正好Element UI可以直链引入。

通过这三行引入一下Vue以及Element-UI

1
2
3
4
5


<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <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>
</head>

接下来我们直接把Element-ui的开关组件引入，注意这里的div是有id的，方便我们后期绑定元素

1
2
3
4
5
6


<div id="app">
    {{ value }}
    <el-switch style="display: block" v-model="value" active-color="#13ce66" inactive-color="#ff4949"
        active-text="按月付费" inactive-text="按年付费">
    </el-switch>
</div>

接下来使用下面代码进行绑定元素，data中的value用来控制按钮的开关

1
2
3
4
5
6
7
8


<script>
    var app = new Vue({
        el: "#app",
        data: {
            'value': true,
        },
    })
</script>

可以使用在线的菜鸟教程试试，看看效果哦。

全部代码如下

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


<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <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>
</head>
<body>
    <div id="app">
        {{ value }}
        <el-switch style="display: block" v-model="value" active-color="#13ce66" inactive-color="#ff4949"
            active-text="按月付费" inactive-text="按年付费">
        </el-switch>
    </div>
   <script>
        var app = new Vue({
            el: "#app",
            data: {
                'value': true,
            },
        })
    </script>
</body>
</html>

无需脚手架使用element Ui

前言

教程

相关文章：