Vue基础教程

Mark in HangZhou

2018-05-06

导语：今天给大家讲解vue的基础知识点。

# 目录

引入vue
声明式渲染
创建vue实例
数据绑定
方法
插值
指令
缩写

# 引入vue

下载vue.js文件：点击下载

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

CDN线上，引入地址：https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.common.js

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.common.js"></script>

新建html文件，在head标签内引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>引入vue</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
    <!-- //内容 -->
    </div>

    {{ 1+2 }}
    <script>
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

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

# 声明式渲染

两个花括号中间可以写表达式，判断，数据类型，就是不能写循环。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>引入vue</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
    {{ msg }}
    </div>
    {{ msg }}
    <script>
      new Vue({
       el: '#app',
       data: {
         msg: '111'
       }
      })
    </script>
  </body>
</html>

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

# 创建vue实例

首先引入vue.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue(2)</title>
    <script src="js/vue.js">
    </script>
</head>
<body>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

然后实例化一个vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue(2)</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <script>
        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

最后定义vue的管理边界

注意：如果你不定义管理边界，就可能无法应用vue中的属性和方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue(2)</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 在这里写vue.js -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>
</html>

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

# 数据绑定

数据：这里的数据就是你要渲染到页面中的值,这个数据发生变化，视图中的数据也会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue(2)</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 在这里写vue.js -->
        <input type="text" v-model="str">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                str: ''
            }
        })
    </script>
</body>
</html>

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

# 方法

方法：就是js中的函数和事件监听。

例如：弹出一个信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue(2)</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 在这里写vue.js -->
        <input type="text" v-model="str">
        <p>{{ str }}</p>
        <button @click="alertInfo">弹出信息</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                str: ''
            },
            methods: {
                alertInfo () {
                    alert('这就是vue');
                }
            }
        })
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 插值

# 文本插值

这是数据绑定最常见的形式，使用的Mustache语法 (双大括号) 。

例如：<span>这个将不会改变: </span>

# 原生html内容

这个你需要使用v-html来实现。

例如：

<p>这是html内容：</p>

2.<p v-html="str"></p>

注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。

# 指令

指令 (Directives) 是带有 v- 前缀的特殊特性，响应式的作用于DOM。

# v-if

含义：这个是根据传入的值来决定是否移除绑定的元素，它的值是true或者false

例如：<p v-if="true">我是vue</p>

# 修饰符

修饰符：以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<form v-on:submit.prevent="onSubmit">表单内容</form>

# 缩写

v- 作为一种识别特性，常常会缩写，以便提高代码效率。

v-on

v-on是绑定元素要触发的各种事件的，可以缩写成@<事件名>="<触发的函数名>"

例如：

//1.原样：
<button v-on:click="checkForm"></button>
//2.缩写：
<button @click="checkForm"></button>

1
2
3
4

v-bind

v-bind是绑定元素属性的一种指令，可以缩写成:<属性名>="<属性值>"

例如：

<!-- 1.原样： -->
<a v-bind:href="url">链接</a>
<!-- 2.缩写： -->
<a :href="url">链接</a>

1
2
3
4

本文永久链接是：

如需转载，请注明《》转自，原作者