Vue 指令

VUE
创建时间:
字数:3.3k 阅读:
  1. 数据引用
  2. 基础指令

数据引用

‘‘大括号内可以写变量也可以写表达式
举例：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app01">
        <!--{{}}表达式-->
        <h3>{{ msg }}</h3>
        <h3>{{ score + 1}}</h3>
    </div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app01",
        data: {
            msg: "HELLO WORLD",
            score: 99,
        }
    })
</script>
</body>
</html>

基础指令

Vue中的指令都是以”v-“开头的，写在标签内

  • v-once 一次性插值,不会随着变量的改变而改变

    1
    <h3 v-once>{{ msg }}</h3>

  • v-html 选人html字符串为html代码，但是并不会渲染script代码，防止XSS工具

    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <body>
        <div id="app01">
            <!--{{}}表达式-->
            <h3>{{ msg }}</h3>
            <h3>{{ score + 1}}</h3>
            <h3 v-once>{{ msg }}</h3>
            <span>{{ contentHtml }}</span><br/>
            <h1 v-html="contentHtml"></h1>
        </div>

    <script>
        var vue = new Vue({
            el: "#app01",
            data: {
                msg: "HELLO WORLD",
                score: 99,
                contentHtml: "<span style='color: red'>红色</span>"
            }
        })
    </script>
    </body>

    ````  
    * v-bind 数据绑定
       * 完整格式： v-bind:元素属性='variable'
       * 缩写：:元素属性='variable'
    ````html
    <body>
        <div id="app01">
            <img v-bind:src="imgurl">
            <!--缩写形式-->
            <img :src="imgurl">
            <a v-bind:href="baidu">baidu</a>
        </div>

    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app01",
            data: {
                imgurl: "https://cn.vuejs.org/images/logo.png",
                baidu: "https://www.baidu.com/"
            }
        })
    </script>
    </body>

  • v-on 绑定事件

    • 完整格式： v-on:事件=’method’
    • 缩写 @:事件=’method’
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
<body>
    <div id="app01">
        Hello, {{ count }} <br/>
        <!-- v-model进行数据双向绑定 -->
        <input type="text" v-model="count">
        <button v-on:click="add">加1</button>
        <button @click="add ">加1</button>

    </div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app01", //指定被管理VUE的入口，el其实是一个标签选择器，可以选择其他元素标签，但是不允许选择body，html
        data: { //初始化数据
            msg: 'World',
            count: 0
        },
        methods: {// 指定事件处理函数 v-on:事件="函数"进行调用
            add: function () {
                this.count++
            }
        }
    })
</script>
</body>

  • methods和computed

    • method会监听属性值，只支持getter属性所以是单项的,如果给method方法赋值会报错，没有缓存不管监听的属性值是否发生改变都会重新执行函数，调用方法必须添加小括号()
    • computed监听属性值是双向的,并且有缓存，当监听的属性值没有改变并不会重新调用，计算函数是作为属性存在的所以调用的时候不需要添加小括号()
      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
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      <body>
          <div id="app">
              Meth <input type="text" v-model="meth"><br>
              English <input type="text" v-model="english"><br>
              <!--绑定函数的时候一定要添加（）-->
              Total（函数） <input type="text" v-model="sum()"><br>
              <!--计算属性是作为一个属性的所以不需要添加（）-->
              Total（计算属性） <input type="text" v-model="sum01"><br>
              Total（计算属性双向） <input type="text" v-model="sum02"><br>

          </div>
      <script src="node_modules/vue/dist/vue.js"></script>
      <script>
         var vm = new Vue({
              el: "#app",
              data: {
                  meth: 0,
                  english: 0,
              },
              methods: {// 函数只支持单项绑定
                  sum: function () {
                      console.log('sum函数 被执行 ')
                      // -0是为了将字符串传唤为数字
                      return (this.meth-0) + (this.english-0)
                  }
              },
              computed: {// 定义计算属性,默认为单项绑定，只有getter
                  sum01:function () {// 计算属性有缓存,如果计算属性属性内的属性值没有发生改变则不会执行
                      console.log('sum属性 被执行 ')
                      return (this.meth-0) + (this.english-0)
                  },
                  sum02:{
                      get:function () {
                          console.log('sum01.get')
                          return (this.meth-0) + (this.english-0)
                      },
                      // 当sum02计算属性更新之后, 则会调用set
                      set: function (newValue) {// newValue是  sum02更新后的新值
                          console.log('sum01.set')
                          var avgScore = newValue/2
                          this.meth = avgScore
                          this.english = avgScore
                      }
                  }
              }
          })
      </script>
      </body>

  • watch监听器

    • 当属性发生改变的时候执行对应的函数
    • 通过watch选项或vue实例对象的$watch来监听属性
      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
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      <body>
          <div id="app">
              Meth <input type="text" v-model="meth"><br>
              English <input type="text" v-model="english"><br>
              <!--绑定函数的时候一定要添加（）-->
              Total（函数） <input type="text" v-model="sum()"><br>
              <!--计算属性是作为一个属性的所以不需要添加（）-->
              Total（计算属性） <input type="text" v-model="sum01"><br>
              Total（计算属性双向） <input type="text" v-model="sum02"><br>
              watch 监听器 <input type="text" v-model="sum03"><br>

          </div>
      <script src="node_modules/vue/dist/vue.js"></script>
      <script>
         var vm = new Vue({
              el: "#app",
              data: {
                  meth: 0,
                  english: 0,
                  sum03: 0
              },
              methods: {// 函数只支持单项绑定
                  sum: function () {
                      console.log('sum函数 被执行 ')
                      // -0是为了将字符串传唤为数字
                      return (this.meth-0) + (this.english-0)
                  }
              },
              computed: {// 定义计算属性,默认为单项绑定，只有getter
                  sum01:function () {// 计算属性有缓存,如果计算属性属性内的属性值没有发生改变则不会执行
                      console.log('sum属性 被执行 ')
                      return (this.meth-0) + (this.english-0)
                  },
                  sum02:{
                      get:function () {
                          console.log('sum01.get')
                          return (this.meth-0) + (this.english-0)
                      },
                      // 当sum02计算属性更新之后, 则会调用set
                      set: function (newValue) {// newValue是  sum02更新后的新值
                          console.log('sum01.set')
                          var avgScore = newValue/2
                          this.meth = avgScore
                          this.english = avgScore
                      }
                  }
              },
             watch: {
                  // 监听meth属性,当meth发生改变时执行函数
                  meth: function (newValue, oldValue) {
                      // newValue更新后的值，oldValue更新前的值d
                      this.sum03 = (newValue-0) + (this.english-0)
                  }
             }
          })
         // 监听方式二，通过实例vm.watch进行监听
          vm.$watch('english', function (newValue, oldValue) {
              console.log('english 发生改变')
              this.sum03 = (newValue-0) + (this.meth-0)
          })

      </script>
      </body>

  • 条件渲染 v-if

    • v-if 当条件为真时渲染元素
    • v-else-if
    • v-else
    • v-show 与v-if类似,渲染后元素会始终存在，支持通过display属性进行控制显示或隐藏,如果频繁显示或隐藏使用v-show减少渲染开销
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <body>
          <div id="app">
              <input type="checkbox" v-model="seen">
              <p v-if="seen" class="fk">xxx</p>
              <p v-else>小黄块隐藏</p>
              <p v-show="seen" class="fk">xxx</p>
              <p v-if="al === 'A'">A</p>
              <p v-else-if="al === 'B'">B</p>
              <p v-else-if="al === 'C'">C</p>
              <p v-else>Not A,B,C</p>
          </div>
          <script src="node_modules/vue/dist/vue.js"></script>
          <script>
              var vm = new Vue({
                  el: '#app',
                  data: {
                      seen: true,
                      al:'A'
                  }
              })

          </script>
      </body>

  • v-for 迭代列表

    • 语法: v-for=”(item, index) [in|of] items”,in|of 是分隔符都可以使用，item为元素，index为元素下表从0开始
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
32
33
<body>
    <div id="app">
        <ul>
            <!--使用key特殊属性,它会基于key的变化重新排列元素
            并且会移出key不存在的元素，所有列表中最好存在id属性-->
            <li v-for="e in maps" v-bind:key="e.id">
                {{ e.id }} {{ e.name }} {{ e.age }}
            </li>
        </ul>
        <ul>
            <li v-for="(value,key,index) in person">
               {{index}}: {{ key }} ==> {{ value }}

            </li>
        </ul>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                maps:[
                    {id:1,name:'Aaron',age:19},
                    {id:2,name:'elana',age:18},
                    {id:3,name:'xixi',age:8},
                    {id:4,name:'baola',age:19},
                ],
                person:{name:'xiaoxin',age:33}
            }
        })

    </script>
</body>
  • v-on事件处理
    • 完整格式：v-on:事件=”函数(参数。。。)”
    • 缩写：@事件=”函数(参数。。。)”
    • event: 原生的dom事件，函数中的默认参数,如果函数中有其他参数时需要显示的使用$event传参
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
<body>
    <div id="app">
        <button v-on:click="say">Say {{msg}}</button><br>
        <button @click="say01('hello,xiaoxin',$event)">Say something</button>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'hello,world'
            },
            methods:{
                // event是dom的原生事件，当函数没有参数时默认传递
                // event.target代表元素本事
                say: function (event) {
                    alert(event.target.innerHTML)
                },
                say01: function (msg,event) {
                    alert(msg + ','+event.target.innerHTML)
                }
            }
        })
    </script>
</body>
  • 事件修饰符
    • .stop 阻止单击传播
    • .prevent 阻止事件的默认行为
    • .once一次性事件
      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
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      <body>
          <div id="app">
              <button v-on:click="say">Say {{msg}}</button><br>
              <button @click="say01('hello,xiaoxin',$event)">Say something</button>
              <div @click="todo">
                  <!--.stop阻止事件传播，如果没有.stop "dothis"执行完之后就会继续执行todo-->
                  <button @click.stop="dothis">dothis</button>
              </div>
              <!--.prevent阻止默认行为-->
              <a href="https://www.baidu.com/" @click.prevent="doStop">baidu</a><br>
              <!--.once只会执行一次，适合提交表单场景-->
              <button @click.once="once">一次事件</button><br>
              <!--keyup表示键入任何值都会调用对应的函数-->
              <input type="text" @keyup="ks"><br>
              <!--.enter表示只有在敲回车键时触发函数-->
              <input type="text" @keyup.enter="keyEnter"><br>
          </div>
          <script src="node_modules/vue/dist/vue.js"></script>
          <script>
              var vm = new Vue({
                  el: "#app",
                  data: {
                      msg: 'hello,world'
                  },
                  methods:{
                      // event是dom的原生事件，当函数没有参数时默认传递
                      say: function (event) {
                          alert(event.target.innerHTML)
                      },
                      say01: function (msg,event) {
                          alert(msg + ','+event.target.innerHTML)
                      },
                      todo: function () {
                          alert('todo')
                      },
                      dothis: function () {
                          alert('do this')
                      },
                      doStop: function () {
                          alert('do stop...')
                      },
                      once: function () {
                          alert('do once')
                      },
                      ks: function () {
                          alert('key anything..')
                      },
                      keyEnter: function () {
                          alert('key Enter..')
                      },

                  }
              })
          </script>
      </body>
  • 表单双向绑定示例
    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <body>
        <div id="app">
            .prevent阻止了默认提交事件
            <form action="#" v-on:submit.prevent="submitFunc">
                姓名:<input type="text" v-model="name"><br>
                性别:<input type="radio" name="sex" value="0" v-model="sex"> 女
                <input type="radio" name="sex" value="1" v-model="sex"> 男<br>
                技能：<br><input type="checkbox" name="skills" value="java" v-model="skills">Java开发<br>
                <input type="checkbox" name="skills" value="vue" v-model="skills">vue.js开发<br>
                <input type="checkbox" name="skills" value="python" v-model="skills">python开发<br>
                <input type="checkbox" name="skills" value="php" v-model="skills">PHP开发<br>
                城市:<select  v-model="city">
                    <option v-for="city in cities" v-bind:VALUE="city.code">{{city.name}}</option>
                    </select><br>
                说明：<textarea v-model="desc"></textarea><br>
                <input type="submit" value="submit">
            </form>
        </div>
        <script src="node_modules/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    name: "",
                    sex: 0,
                    // skills对应的是多选框所以是一个列表
                    skills: [],
                    // city表示下拉列表中默认选中的值
                    city:"bj",
                    cities:[
                        {code:'bj',name:'北京'},
                        {code:'tj',name:'天津'},
                        {code:'hn',name:'河南'},
                    ],
                    desc: ""
                },
                methods:{
                    submitFunc: function () {
                        // 实际环境应该是ajax异步调用接口
                        alert(
                            this.name + "," + this.sex + "," + this.skills + "," + this.city + "," + this.desc
                        )
                    }
                }

            })

        </script>
    </body>
  • v-pre 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!--用于显示双大括号"{{}}",并跳过这个元素和它子元素的编译过程，加快编译-->
    <body>
        <div id="app">
            <!--
            1,用于显示双大括号{{}}}
            2,跳过这个元素和子元素的编译过程,可以提高性能
            -->
            <span v-pre>{{ hello }}</span><br>
        </div>

        <script src="node_modules/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "hello, world!"
                }
            })
        </script>

    </body>
  • v-text
    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
    32
    33
    34
    35
        <!-- 等价于"{{}}"用于显示内容,区别在于"{{}}"会造成闪烁,v-text不会,如果还想使用"{{}}"又不想有闪烁问题可以使用v-clock-->

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <!--
            1,用于显示双大括号{{}}}
            2,跳过这个元素和子元素的编译过程,可以提高性能
            -->
            <span v-pre>{{ hello }}</span><br>
            <!--使用双大括号会有闪烁问题-->
            <span>{{msg}}</span><br>
            <span>{{msg}}</span><br>
            <span>{{msg}}</span><br>
        </div>

        <script src="node_modules/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "hello, world!"
                }
            })
        </script>

    </body>
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com

赏

文章标题:Vue 指令

文章字数:3.3k

本文作者:Aaron

发布时间:2019-11-30, 14:03:39

最后更新:2020-01-01, 22:28:09

原始链接:http://blog.linuxerbulo.com/2019/11/30/Vue-%E6%8C%87%E4%BB%A4/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

©2019-2020 Aaron

Built with Hexo and 3-hexo theme

目录
×

喜欢就点赞,疼爱就打赏