精华内容
下载资源
问答
  • Vue常用指令

    千次阅读 2020-06-10 10:49:05
    Vue常用指令 vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令. v-if v-show v-for v-text v-html v-clock v-bind v-on v-model v-if,v-show指令 v-if = “expression” : 根据表达式的真假

    Vue常用指令

    vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.

    • v-if
    • v-show
    • v-for
    • v-text
    • v-html
    • v-clock
    • v-bind
    • v-on
    • v-model

    v-if,v-show指令

    v-if = “expression” : 根据表达式的真假来删除和插入元素
    v-show = “expression” : 不会每次都去删除和创建DOM元素 , 而是通过dispaly:none将元素隐藏起来

    v-if 例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--引入vue-->
        <script src="lib/vue-2.4.0.js"></script>
        <!--引入layui-->
        <script src="layui/layui.js"></script>
        <link rel="stylesheet" href="layui/css/layui.css">
    
    </head>
    <body>
    <div id="app">
        <span v-if="flag">显示</span>
        <button @click="changeData" class="layui-btn">点击</button>
    </div>
    
    </body>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                flag: true
            },
            methods: {
                changeData() {
                    this.flag=!this.flag;
                }
            }
        })
    </script>
    </html>
    

    v-show例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--引入vue-->
        <script src="lib/vue-2.4.0.js"></script>
        <!--引入layui-->
        <link rel="stylesheet" href="layui/css/layui.css">
    
    
    </head>
    <body>
    <div id="app">
        <span v-show="flag">显示</span>
        <button @click="changeData" class="layui-btn layui-icon layui-icon-logout">点击</button>
    </div>
    
    </body>
    <script src="layui/layui.js"></script>
    <script>
    
        let app = new Vue({
            el: "#app",
            data: {
                flag: true
            },
            methods: {
                changeData() {
                    this.flag=!this.flag;
                }
            }
        })
    </script>
    </html>
    

    v-for指令

    v-for = “item in items” : 基于一个数组渲染一个列表

    v-for是Vue中的遍历(循环)指令。

    (item,index) in dataList,item是遍历的每一项名称,index是每一项的索引值

    索引值:{{index}}---数据:{{item}}

    索引值:{{i}}--id:{{obj.id}}--name:{{obj.name}}

    这是第{{count}}次循环,索引为{{index}}

    key是在v-for中表示唯一标识,在任何的v-for中建议都加上key。key一定要保证唯一性

    例子

    <!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">
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <style>
      .red {
        color: red;
      }
    
      .size {
        font-size: 20px;
      }
    
      .back {
        background-color: green;
      }
    </style>
    
    <body>
    
      <div id="app">
        <!-- v-for是vue中的遍历(循环)指令。(item index) in data,item是遍历的每一项名称,index是每一项的索引值 -->
        <!-- <p v-for="(item, index) in simpleList">索引值:{{index}}---数据:{{item}}</p> -->
        <!-- <p v-for="(obj, i) in objectList">索引值:{{i}}--id:{{obj.id}}--name:{{obj.name}}</p> -->
        <!-- <p v-for="(count, index) in 10">这是第{{count}}次循环,索引为{{index}}</p> -->
    
        <div>
          <input type="text" v-model="id">
          <input type="text" v-model="name">
          <button @click="add">添加</button>
    	
        </div>
    
        <!-- key是在v-for中表示唯一标识,在任何的v-for中建议都加上key。key一定要保证唯一性 -->
        <p v-for="item in objectList" :key="item.id">
          <input type="checkbox" name="" id=""> {{item.id}} --- {{item.name}}
        </p>
      </div>
    
      <script>
    
        var vue = new Vue({
          el: '#app',
          data: {
            simpleList: [1, 2, 3, 4, 5, 6],
            objectList: [
              { id: 1, name: '张三' },
              { id: 2, name: '李四' },
              { id: 3, name: '王五' },
              { id: 4, name: '赵六' }
            ],
            id: '',
            name: '',
          },
          methods: {
            add() {
              const obj = {id: this.id, name: this.name}
              this.objectList.unshift(obj)
            }
          }
        })
    
      </script>
    </body>
    
    </html>
    

    v-text,v-html,v-clock指令

    v-text:会覆盖原有标签中的内容,将data中的数据作为字符串处理

    v-html: 会将data作为html标签去渲染

    v-clock: 占位符指令,会替换掉自己的这个占位,不会把整个元素清空

    例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--引入vue-->
        <script src="lib/vue-2.4.0.js"></script>
        <!--引入layui-->
        <link rel="stylesheet" href="layui/css/layui.css">
    
    
    </head>
    <body>
    <div id="app">
        <div v-clock>{{msg1}},你好</div>
        <div v-text="msg">你好</div>
        <div v-html="msg2">你好</div>
    </div>
    </body>
    <script src="layui/layui.js"></script>
    <script>
    
        let app = new Vue({
            el: "#app",
            data: {
                msg: "我是text",
                msg1: "我是clock",
                msg2: "<span style='color: red'>我是html</span>"
            },
        })
    </script>
    </html>
    

    页面展示

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wgZfpEi-1591757039890)(en-resource://database/498:1)]

    v-bind,v-on指令

    v-bind:Vue中提供用户绑定属性的指令,也可以写成:
    v-on:Vue提供的事件绑定指令,也可以简写成@

    例子

    <!DOCTYPE html>
    <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--引入vue-->
        <script src="lib/vue-2.4.0.js"></script>
        <!--引入layui-->
        <link rel="stylesheet" href="layui/css/layui.css">
    
    
    </head>
    <body>
    <div id="app">
        <a v-bind:href="msg">按钮</a>
        <button v-on:click="add" class="layui-btn">点击</button>
    </div>
    </body>
    <script src="layui/layui.js"></script>
    <script>
    layui.use(["layer"],function () {
        let app = new Vue({
            el: "#app",
            data: {
                msg: "www.baidu.com",
            },
            methods:{
                add(){
                    layer.alert("123");
                }
            }
    
        })
    })
    
    </script>
    </html>
    

    v-model指令

    v-model : 数据的双向绑定 , 只能用于表单元素. 一方被修改之后另一方也会同步修改
    v- bind : 数据的单向绑定. 当model中数据被修改是 , bind绑定的数据会被修改. 而bind绑定的位置改变model则不会被修改

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--引入vue-->
        <script src="lib/vue-2.4.0.js"></script>
        <!--引入layui-->
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
    <div id="app">
        <input type="text" v-model="msg">
        <input type="text" :value="msg1">
    
    </div>
    
    </body>
    <script src="layui/layui.js"></script>
    <script>
        layui.use(['layer'], function () {
            let app = new Vue({
                el: "#app",
                data: {
                    msg: "v-model的值",
                    msg1: "V-bind的值"
                },
                methods: {}
    
            })
        })
    
    </script>
    </html>
    
    展开全文
  • vue常用指令

    2021-04-29 11:06:28
    vue常用指令有:v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。 vue.js官方给自己的定为是数据模板引擎,并给出...

    vue常用指令有:v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。

    vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令。

    Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。

    指令的作用是当表达式的值改变时,相应地将某些行为应用到 DOM 上。

    vue常用指令总结

    1.v-once

    能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <div id="app">

            <p v-once>原始值: {{msg}}</p>

            <p>后面的: {{msg}}</p>

            <input type="text" v-model="msg">

    </div>

    <script src="js/vue.js"></script>

    <script>

        new Vue({

           el: '#app',

            data: {

               msg: '今天的天气很好!'

            }

        });

     

    加了 v-once指令 不会改变了

    2.v-show

    和v-if一样 区别是if是注释掉 v-show是给一个display:none的属性 让它不显示! 用法 参考下一个v-if指令.

    v-show和v-if的区别:

    v-if 是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件; v-show 则只是简单地基于 CSS 切换。

    v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。

    3.v-if

    v-if后面的是一个表达式或者也可以是返回true或false的表达式。 且值为true和fasle false的话就会被注释 v-show是给一个display:none的属性 让它不显示! true就正常显示。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    <div id="app">

    <p v-if="show">要显示出来!</p>

    <p v-if="hide">不要显示出来!</p>

    <p v-if="height > 1.55">小明的身高: {{height}}m</p>

    <p v-if="height1 > 1.55">小明的身高: {{height1}}m</p>

    <p v-if="3>2">打死你: {{height1}}m</p>

    </div>

    <script src="js/vue.js"></script>

    <script>

       new Vue({

                       el: '#app',

                     data: {

                               show: true,

                                hide: false,

                               height: 1.68,

                                height1: 1.50

                               }

    });

    </script>

    4.v-else

    必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <div id="app">

      <p v-if="height > 1.7">小明的身高是: {{height}}m</p>

      <p v-else>小明的身高不足1.70m</p>

    </div>

    <script src="js/vue.js"></script>

    <script>

      new Vue({

            el: '#app',

            data: {

            height: 1.88

        }

    });

    </script>

    5.v-else-if

    这个比较简单 直接看代码就可以了 哈哈哈 输入成绩多少 就显示相应的等级

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    <div id="app">

            <p>输入的成绩对应的等级是:</p>

            <p v-if="score >= 90">优秀</p>

            <p v-else-if="score >= 75">良好</p>

            <p v-else-if="score >= 60">及格</p>

            <p v-else>不及格</p>

            <input type="text" v-model="score">

        </div>

        <script src="js/vue.js"></script>

        <script>

            new Vue({

               el: '#app',

                data: {

                   score: 90  // 优秀 良好 及格 不及格

                }

            });

        </script>

    6.v-for

    基于数据渲染一个列表,类似于JS中的遍历。其数据类型可以是 Array | Object | number | string

    该指令之值,必须使用特定的语法(item, index) in items, index是索引,可以省略。item是 为当前遍历元素提供别名(可以自己随便起名字) 。v-for的优先级别高于v-if之类的其他指令

    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

    <body>

            <div id="app">

                <!-- 遍历数组 -->

                <p v-for="(d,index) in msg">

                    {{index +':'+d}}

                </p>

                <!-- 遍历对象 -->

                <div v-for="(dd,index) in obj">

                    {{index+':'+dd}}

                </div>

                <!-- 遍历对象 也可以不要index索引 -->

                <div v-for="dd2 in obj">

                    {{dd2}}

                </div>

                <!-- 遍历num和string -->

                <p v-for="gg in num2">{{gg}}</p>

                <p v-for="gg2 in string2">{{gg2}}</p>

                  

            </div>

        </body>

        <script src="vue/vue.js"></script>

        <script type="text/javascript">

            new Vue({

                el:'#app',

                data:{

                    msg:[123,98,25,63],

                    obj:{name:'敏敏',age:'21',height:'160'},

                    num2:'1335454'//注意这里不要写成了num2:1335154

                    string2:'xvzhiming'

                }

            })

        </script>

      

    7.v-html

    双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 而且给一个标签加了v-html 里面包含的标签都会被覆盖。

    注意v-html要慎用 因为会出现安全问题 官网解释为:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    <div id="app" v-html="html">

      <p v-text="msg">哈哈哈</p> 

    </div>

    <script type="text/javascript">

      new Vue({

            el:'#app',

            data:{

                msg:'我爱敏敏!!',

                html:'<p>大海森林我都不爱!</p>'

                }

        })

    </script> 

    8.v-text

    给一个便签加了v-text 会覆盖标签内部原先的内容 如下面的例子 哈哈哈不会显示

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    <div id="app">

        <p v-text="msg">哈哈哈</p>

    </div>

    <script type="text/javascript">

        new Vue({

              el:'#app',

              data:{

                msg:'我爱敏敏'

                }

            })

    </script>

    9.v-bind

    用法

     

    1

    2

    3

    <!-- 完整语法 -->

    <a v-bind:href="url">...</a>

    <!-- 缩写 --> <a :href="url">...</a>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    <div id="app">

         改变src alt等属性

            <img v-bind:src="imgSrc" :alt="alt">

            <img :src="imgSrc1" :alt="alt">

        </div>

        <script src="js/vue.js"></script>

        <script>

            new Vue({

               el: '#app',

                data: {

                   imgSrc: 'img/img_01.jpg',

                   imgSrc1: 'img/img_02.jpg',

                   alt: '我是美女'

                }

            });

        </script>

    还可以绑定类名和css样式等

    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

    <div id="app">

            //v-for是一个遍历                 给他一个calss 如果index===cative class名是active,如果不等就为空

            //index 是v-for的索引

            <p v-for="(college, index) in colleges" :class="index === activeIndex ? 'active': ''">

                {{college}}

            </p>

            <p :style="{color: fontColor}">今天的天气很好!</p>

        </div>

      

        <script src="js/vue.js"></script>

        <script>

            new Vue({

               el: '#app',

                data: {

                   colleges: [

                       'iOS学院',

                       'Java学院',

                       'HTML5学院',

                       'UI学院',

                       'VR学院'

                   ],

                    activeIndex: 0,

                    fontColor: 'green'

                }

            });

        </script>

    注意input里面 用了v-blnd 写法不在是{{}}包着了;

    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

    <body>

            <div id="app"> <br>              //加粗的内容刚刚学时 很容易出错 注意不要加{{}};

                原始值<input type="" name="" id="" <strong>:value=name</strong> />

                 模板<input type="" name="" id="" <strong>:value=name.split('').reverse().join()</strong> />

                methods<input type="" name="" id="" <strong>:value=fz()</strong> />

                conputed<input type="" name="" id="" <strong>:value=fz2</strong> />

            </div>

        </body>

        <script type="text/javascript">

            new Vue({

                el:'#app',

                data:{

                    name:'chenglianjie'

                },

                methods:{

                    fz(){

                        return this.name.split('').reverse().join('');

                    }

                },<br>              //这是vue的计算属性 在我的博客vue分类里面有介绍

                computed:{

                    fz2(){

                        return this.name.split('').reverse().join('');

                    }

                }

            })

        </script>

    10.v-on

    绑定事件的 还有些用法在后面的博客中会提到

     

    1

    2

    3

    4

    5

    <!-- 完整语法 -->

     <a v-on:click="doSomething">...</a>

      

    <!-- 缩写 -->

    <a @click="doSomething">...</a>

    11.v-model

    v-model是一个指令,限制在<input>、<select>、<textarea>、components中使用 用于数据的双向绑定操作.

    展开全文
  • Vue 常用指令

    2019-09-22 18:01:40
    Vue 常用指令 vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令Vue.js 使用了基于 HTML 的模板语法,最简单的使用vue的方式是渲染数据,渲染数据最常见的形式...

    Vue 常用指令

    vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。

    Vue.js 使用了基于 HTML 的模板语法,最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue插值</title>
    </head>
    <body>
        <div id="app-01">
            {{ message }}
        </div>
        <!--安装方式一-->
        <script src="../../statics/vue.js"></script>
        <!--安装方式二-->
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>-->
        <script>
            // 原生js
            let odiv = document.getElementById("app-01");
            odiv.innerText = "Hello Vue!";
    
            // vue的核心之一是允许采用简洁的模板语法来将数据渲染进DOM系统
            let app01 = new Vue({
                el: "#app-01",
                data: {
                    message: "Hello Vue!"
                }
            });
        </script>
    
    </body>
    </html>

    首先创建一个vue实例,并在创建实例的过程中传入一个对象。

    该对象的第一个属性名为el,它的值是我们需要渲染的目标标签,我们通过属性查找定位这个标签。

    该对象的第二个属性名为data,里面就是我们要渲染给浏览器标签的数据,另外还有其他属性,我们在后面的章节中一一介绍。

    看了上面的代码,可能大家觉得vue也不过如此,原生js代码两行就能完成的事情,vue需要6行代码来实现,还是原生js比较简洁,其实,上面的代码只是给大家演示了挂档的技术,究竟是汽车比较快,还是骑马比较好,我们通过后面的不断学习,来解释这个问题。

    接下来,我们来介绍踩油门的技术。

    上面的代码中,我们演示了如何将数据渲染进DOM标签,vue帮助我们找到标签并且渲染,对于程序员来说,我们不再需要重复的找标签,绑定事件,然后再找标签,再绑定事件这样的工作了,vue帮我们都做好了,我们只需要关注具体的数据,以及业务逻辑。这也是vue给自己的定位,数据模板引擎。

    它是引擎,引擎帮助我们驱动数据渲染到模板。

    所以,vue的大部分内容,都是为了渲染数据用的,接下来,我们介绍vue中用来渲染数据的常用指令。


    一、vue.js模板语法之常用指令

    常用指令: v-html

    双大括号语法无法渲染HTML标签,我们需要使用v-html。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-html</title>
    </head>
    <body>
        <div id="app01">
            <div v-html="vue"></div>
        </div>
    
        <script src="./vue.js"></script>
        <script>
            let app01 = new Vue({
                el: "#app01",
                data: {
                    vue: '<h1>Hello Vue!</h1>'
                }
            })
        </script>
    
    </body>
    </html>


    常用指令:v-text

    类似双大括号语法渲染数据的另一种方式是使用v-text。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-html</title>
    </head>
    <body>
        <div id="app01">
            <div v-text="name"></div>
        </div>
    
        <script src="./vue.js"></script>
        <script>
            let app01 = new Vue({
                el: "#app01",
                data: {
                    name: "dogfa"
                }
            })
        </script>
    
    </body>
    </html>


    常用指令:v-for

    接下来,我们看看数组和对象的渲染方式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-for</title>
        <script src="../vue模板语法之插值/vue.js"></script>
    </head>
    <body>
        <div id="app01">
            <h2>dogfa的爱好</h2>
            <ul>
                <li v-for="item in qianqian">{{ item }}</li>
            </ul>
            <h2>学生的爱好</h2>
            <ul>
                <li v-for="stu in students">{{ stu.name }}的爱好是{{ stu.hobby}}</li>
            </ul>
        </div>
    
        <script>
            let app01 = new Vue({
                el: "#app01",
                data: {
                    qianqian: [
                        "学习",
                        "逛街",
                        "美甲"
                    ],
                    students: [
                        {
                            name: "dogfa",
                            hobby: "girls"
                        },
                        {
                            name: "djb",
                            hobby: "girls"
                        },
                        {
                            name: "oldniu",
                            hobby: "study"
                        }
                    ]
                }
            })
        </script>
    </body>
    </html>


    常用指令:v-if

    渲染数据的时候,同样也可以使用条件判断,我们来看看。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app01">
            <div v-if="role == 'shanshan'">
                <h2>欢迎小美女</h2>
            </div>
            <div v-else-if="role == 'longting'">
                <h2>欢迎小龙女</h2>
            </div>
            <div v-else>
                <h2>滚~~~</h2>
            </div>
        </div>
    
        <script>
            // 请注意看HTML标签元素,v-if底层使用appendChild实现
            let app01 = new Vue({
                el: "#app01",
                data: {
                    role: "shanshan"
                }
            })
        </script>
    </body>
    </html>

    通过上面的代码我们可以看出,v-if的作用是控制标签的显示,它通过判断添加标签,底层采用的是appendChild来实现的,下面我们来看一个同样也是控制标签显示的另一个指令v-show。


    常用指令:v-show

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-show</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app01">
            <h1 v-show="isShow">Hello Vue!</h1>
        </div>
    
        <script>
            // v-show的实现原理是通过控制样式的display
            let app01 = new Vue({
                el: "#app01",
                data: {
                    isShow: true
                }
            })
        </script>
    
    </body>
    </html>

    与v-if不同的是,v-show通过样式的display控制标签的显示。

    v-if和v-show的性能比较

    我们简单比较一下二者的区别:

    实现方式:v-if底层采用的是appendChild来实现的,v-show通过样式的display控制标签的显示,正因为实现方式上面有差异,导致了他们的加载速度方面产生了差异;

    加载性能:v-if加载速度更快,v-show加载速度慢

    切换开销:v-if切换开销大,v-show切换开销小

    v-if是惰性的,它是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,v-show 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

    一般来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好,如果在运行时条件很少改变,则使用v-if较好。


    常用指令:v-bind

    绑定属性,不多说了,注意冒号后面跟标签的属性,属性后面的等号指向数据,它可以简写为 :class, :href。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind</title>
        <style>
            .active {
                background-color: #2b84da;
            }
        </style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app01">
            <a v-bind:href='link' v-bind:class="{active: isActive}">去百度</a>
        </div>
    
        <script>
            // 绑定属性,简写冒号:
            let app01 = new Vue({
                el: "#app01",
                data: {
                    link: "https://www.luffycity.com",
                    isActive: true
                }
            })
        </script>
    
    </body>
    </html>


    常用指令:v-on

    另一个非常重要的指令是v-on,使用v-on我们可以在标签上面绑定事件,注意我们新建的vue实例app01中多了一个属性,methods,在methods中,是我们具体事件的实现方式。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-on</title>
        <style>
        </style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app01">
            <!--方式一: 绑定一个事件-->
            <a v-bind:href='link'
               v-bind:class="{active: isActive}"
               v-on:click="myClick"
               >去百度</a>
            <!--方式二: 绑定多个事件-->
            <button v-on="{click: myClick,
                           mouseenter: mouseEnter,
                           mouseleave: mouseLeave}">
                点我今晚吃鸡~~~
            </button>
        </div>
    
        <script>
            // 绑定属性,简写冒号:
            let app01 = new Vue({
                el: "#app01",
                data: {
                    link: "https://www.baidu.com",
                    isActive: false
                },
                methods: {
                    myClick: function () {
                        console.log("大吉大利,今晚吃鸡~~~")
                    },
                    mouseEnter: function () {
                        console.log("鼠标来了~~~");
                    },
                    mouseLeave: function () {
                        console.log("鼠标走了~~~");
                    }
                }
            })
        </script>
    
    </body>
    </html>


    常用指令:v-model

    上面演示的是通过vue实例将数据渲染进模板,并且在控制台,我们修改数据之后,修改后的数据能够及时(官方称之为响应式)的渲染到模板层,那么,如果有这样的需求,比如有一个input标签,当用户修改渲染的原始数据后,打印修改后的数据,简单说,我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改,同时我们还需要监听用户行为,如果用户在标签上面修改了数据(之前的修改,指的是通过vue实例app01进行的数据修改),我们需要获取到数据,针对这个需求,我们可以使用v-mode指令。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
    </head>
    <body>
        <div id="app01">
            <p>请选择你的性别</p>
            <br>
            <input v-model="name"/>
            <p><input type="text" v-model="name"/></p>
            <p>
                <input type="checkbox" value="男" v-model="gender"/>
                <input type="checkbox" value="女" v-model="gender"/>
            </p>
            <br>
            {{ name }}
            {{ gender }}
    
            <p>请选择你的女朋友</p>
            <select name="" id="" v-model="girlFriends">
                <option>dogfa</option>
                <option>djb</option>
                <option>oldniu</option>
            </select>
            <br>
            {{ girlFriends }}
    
            <p>
                <textarea v-model="article"></textarea>
            </p>
            <br>
            {{ article }}
        </div>
        <script src="./vue.js"></script>
        <script>
            let app01 = new Vue({
                el: "#app01",
                data: {
                    name: "dogfa",
                    gender: [],
                    girlFriends: [],
                    article: "这是一篇文章",
                }
            })
        </script>
    </body>
    </html>


    常用指令:指令修饰符

    用户可以输入任何数据类型,但有时候,我们需要限定用户输入的数据类型,可以在指令后面加上number修饰符。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app01">
            <table border="1">
                <thead>
                    <tr>
                        <th>学科</th>
                        <th>成绩</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Python基础</td>
                        <td><input type="text" v-model.number="python"/></td>
                    </tr>
                    <tr>
                        <td>前端</td>
                        <td><input type="text" v-model.lazy="web"/></td>
                    </tr>
                    <tr>
                        <td>Django</td>
                        <td><input type="text" v-model.trim="django"/></td>
                    </tr>
                </tbody>
            </table>
        </div>
    
        <script>
            let app01 = new Vue({
                el: "#app01",
                data: {
                    python: 75,
                    web: 98,
                    django: 88
                }
            })
        </script>
    
    </body>
    </html


    常用指令:计算属性

    计算属性用来监听多个数据,每次页面加载,计算属性中的函数立即执行,但是只要原数据不被修改,那么,就不会触发重新计算,计算属性会使用计算后的缓存结果,只当原数据修改时,才会重新计算并将结果缓存起来。计算属性的计算结果可以当做data中的数据一样使用。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app01">
            <table border="1">
                <thead>
                    <tr>
                        <th>学科</th>
                        <th>成绩</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Python基础</td>
                        <td><input type="text" v-model.number="python"/></td>
                    </tr>
                    <tr>
                        <td>前端</td>
                        <td><input type="text" v-model.trim="web"/></td>
                    </tr>
                    <tr>
                        <td>Django</td>
                        <td><input type="text" v-model.lazy="django"/></td>
                    </tr>
                    <tr>
                        <td>总分</td>
                        <td>{{ python + web + django }}</td>
                    </tr>
                    <tr>
                        <td>平均分</td>
                        <td>{{ avgScore }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
        <script>
            // 计算属性放在缓存当中,只有数据修改时才重新计算
            let app01 = new Vue({
                el: "#app01",
                data: {
                    python: 75,
                    web: 98,
                    django: 88
                },
                computed: {
                    sumScore: function () {
                        return this.python + this.web + this.django;
                    },
                    avgScore: function () {
                        return this.sumScore/3;
                    }
                }
            })
        </script>
    
    </body>
    </html>

    计算属性是通过过滤多个数据之后的结果,不一定是data中已存在的数据。


    常用指令:侦听属性

    计算属性用来监听多个属性,我们也可以使用它来监听一个属性,但是页面加载即执行计算并不符合我们的需求,如何只在数据被修改后出发相应事件,vue提供给我们的是watch,即侦听属性。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../statics/vue.min.js"></script>
    </head>
    <body>
      <div id="app">
        <p>Original message: {{ message }}</p>
        <p>Computed message: {{ reversedMessage }}</p>
        <p>Full name: {{ fullName }}</p>
        <p><input type="text" v-model="firstName"/></p>
        <p><input type="text" v-model="lastName"/></p>
      </div>
    
      <script>
        new Vue({
          el: "#app",
          data: {
            message: "Hello Vue!",
            firstName: "Foo",
            lastName: "Bar",
            fullName: "Foo Bar",
          },
          computed: {
            reversedMessage: {
              get: function () {
                console.log(1);
                // 多次刷新reversedMessage不会改变, 除非message发生改变
                return this.message.split('').reverse().join('');
              }
            }
          },
          watch: {
            firstName: function (value) {
              console.log(value);
              this.fullName = value + ' ' + this.lastName
            },
            lastName: function (value) {
              console.log(value);
              this.fullName = this.firstName + ' ' + value
            }
          }
        })
      </script>
    </body>
    </html>

    侦听属性必须是data中的已存在的数据。


    常用指令:自定义指令

    遇到一些复杂的需求,vue提供的指令不能完美的处理,有时候我们需要自定义指令,针对这一需求,vue提供了自定义指令,如下所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义属性</title>
        <style>
            .box {
                width: 100px;
                height: 100px;
                border: 1px;
                background-color: #ff0000;
            }
        </style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app01" class="box" v-pos.left.bottom="post">
    
        </div>
    
        <script>
            Vue.directive("pos", function (el, bindding) {
                let decorators = bindding.modifiers;
                if (bindding.value) {
                    el.style['position'] = 'fixed';
                    for (let key in decorators) {
                        el.style[key] = 0;
                    }
                } else {
                    el.style.position = "static";
                }
            });
            // 自定义属性
            let app01 = new Vue({
                el: "#app01",
                data: {
                    post: true
                }
            })
        </script>
    
    </body>
    </html>

    el是我们自定义指令所在的DOM元素;

    bindding是自定义指令的一些具体数据,请记住,最重要的一点是,不管是现在还是将来,任何情况下,我们都需要根据数据进行业务处理,所以,此处最关键的也是数据,即bindding.value。


    常用指令:获取DOM元素

    某些情况下,我们需要直接获取DOM元素,并对元素进行一些加工处理。vue提供给我们$refs来获取DOM元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取DOM</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app01">
            <div ref="myBox">dogfa</div>
            <button v-on:click="dogfa">点击dogfa变红</button>
        </div>
    
    
        <script>
            // 错误实例button放在div外面
            let app01 = new Vue({
                el: "#app01",
                methods: {
                    dogfa: function () {
                        this.$refs.myBox.style.color = "red";
                    }
                }
            })
        </script>
    </body>
    </html>

    在DOM元素上面绑定了ref之后,vue根实例上面就会出现$refs变量,它是一个object类型,key为ref后面的自定义名称,而value为DOM元素。我们通过this.$refs拿到object,之后就可以通过自定义的key名,来找到DOM元素


    二、案例:todoList

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>使用Vue实现todoList</title>
      <script src="../statics/vue.min.js"></script>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .container {
          width: 500px;
          height: auto;
          margin: 0 auto;
        }
        .container .header {
          text-align: center
        }
        li {
          list-style-type: none
        }
        div.left {
          float: left;
          margin-left: 50px;
        }
        div.right {
          float: right;
          margin-right: 50px;
        }
        li {
          margin-top: 5px;
        }
      </style>
    </head>
    <body>
    
      <div id="app">
        <div class="container">
          <!--头部添加待办-->
          <div class="header">
            <input id="addthings" @keyup.enter="todoEnter" v-model="todo">
            <span @click="todoEnter">添加待办</span>
          </div>
    
          <!--已办和待办最外层的盒子-->
          <div class="box">
            <!--已办事项-->
            <div class="left">
              <span>待办事项</span>
              <div class="todos">
                <ul>
                  <li v-for="(todo, index) in todoThings" :key="index">
                    <input type="radio" name="todo" v-on:click="addThing(index)"><span>{{ todo }}</span>
                  </li>
                </ul>
              </div>
            </div>
    
            <!--待办事项-->
            <div class="right">
              <span>已办事项</span>
              <div class="dones">
                <ul>
                  <li v-for="(done, index) in doneThings" :key="index">
                      <input type="radio" name="done" v-on:click="delThing(index)"><span>{{ done }}</span>
                  </li>
                </ul>
              </div>
            </div>
    
          </div>
    
        </div>
    
      </div>
      <script>
        new Vue({
          el: "#app",
          data: {
            todo: '',
            addDone: '',
            todoThings: ['写代码', '五道口吃火锅', '超市买鸡蛋', '图书馆看书', '看电影', '看演唱会', '游泳', '跑步'],
            doneThings: ['看书', '写博客', '散步', '跟朋友聊天', '打电话给父母', '学炒菜', '洗衣服', '打扫房间']
          },
          methods: {
            todoEnter: function () {
              if (this.todo) {
                this.todoThings.push(this.todo);
                this.todo = '';
              }
            },
            addThing: function (index) {
              event.currentTarget.checked = false;
              things = this.todoThings.splice(index, 1)[0];
              this.doneThings.push(things);
            },
            delThing: function (index) {
              event.currentTarget.checked = false;
              things = this.doneThings.splice(index, 1)[0];
              this.todoThings.push(things);
            }
          }
        })
      </script>
    </body>
    </html>


    三、案例:轮播图

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="../statics/vue.min.js"></script>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .container {
          margin: 0 auto;
          width: 800px;
          height: 500px;
          position: relative;
          top: 80px;
        }
        .img {
          width: 800px;
          height: 500px;
          position: absolute;
    
        }
        img {
          width: 800px;
          height: 500px;
        }
        .circle {
          width: 130px;
          height: 2px;
          position: absolute;
          left: 50%;
          margin-left: -65px;
          bottom: 30px;
        }
        .circle span {
          padding: 1px 10px;
          background-color: #c2ccd1;
          border-radius: 50%;
          margin-left: 5px;
          cursor: pointer;
        }
        .circle span.current {
          background-color: #F90;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <div class="container">
          <div class="img"><img :src="imageArray[currentIndex].imgSrc" v-on="{ mouseenter: mouseEnter, mouseleave: mouseLeave}"></div>
          <div class="circle">
            <span v-for="(circle, index) in circleCount" :class="{current: currentIndex===index}" v-on:click="changePic(index)"></span>
          </div>
        </div>
      </div>
    
      <script>
        new Vue({
          el: "#app",
          data: {
            imageArray: [
              { id: 1, imgSrc: "../images/timg1.jpg" },
              { id: 2, imgSrc: "../images/timg2.jpg" },
              { id: 3, imgSrc: "../images/timg3.jpg" },
              { id: 4, imgSrc: "../images/timg4.jpg" },
              { id: 5, imgSrc: "../images/timg5.jpg" },
            ],
            currentIndex: 0,
            circleCount: 5
          },
          methods: {
            prevImg: function () {
              this.currentIndex = this.currentIndex - 1;
              if (this.currentIndex < 0) {
                this.currentIndex = this.imageArray.length - 1;
              }
            },
            nextImg: function () {
              this.currentIndex = this.currentIndex + 1;
              if (this.currentIndex === this.imageArray.length) {
                this.currentIndex = 0;
              }
            },
            mouseEnter: function () {
              clearInterval(this.interval);
            },
            mouseLeave: function () {
              this.setInterVal();
            },
            setInterVal: function () {
              this.interval = setInterval(() => {
                this.currentIndex = this.currentIndex + 1;
                if (this.currentIndex === this.imageArray.length) {
                  this.currentIndex = 0;
                }
              }, 3000)
            },
            changePic: function (index) {
              this.currentIndex = index;
            }
          },
          created(){
            this.setInterVal();
          }
        })
      </script>
    
    </body>
    </html>


    四、案例:音乐播放器

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>使用Vue实现音乐播放器</title>
      <script src="../statics/vue.min.js"></script>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .active {
          background-color: red;
        }
      </style>
    </head>
    <body>
    
      <div id="app">
        <audio :src="songs[currentIndex].songSrc" controls="controls" loop="loop" autoplay="autoplay"></audio>
        <ul>
          <li v-for="song in songs" :key="song.id" @click="playSong(song.id)" :class="{ active: song.id===currentIndex+1 }">
            <h2>歌手:{{ song.artist }}</h2>
            <p>歌名:{{ song.name }}</p>
          </li>
        </ul>
      </div>
    
      <script>
        new Vue({
          el: "#app",
          data: {
            songs: [
              { id: 1, songSrc: '../medias/不再让你孤单.mp3', artist: "李必胜", name: '不再让你孤单' },
              { id: 2, songSrc: '../medias/漂洋过海来看你.mp3', artist: "Pizza Li", name: '漂洋过海来看你' },
              { id: 3, songSrc: '../medias/成都.mp3', artist: '必胜', name: '成都' },
              { id: 4, songSrc: '../medias/晚风.mp3', artist: 'Pizza', name: '晚风' },
            ],
            currentIndex: 0
          },
          methods: {
            playSong(index) {
              this.currentIndex = index - 1;
            }
          }
        })
      </script>
    
    </body>
    </html>

    好了,以上就是vue常用指令介绍。




    转载于:https://www.cnblogs.com/wangyueping/p/11437776.html

    展开全文
  • VUE常用指令

    2020-03-17 13:52:56
    VUE常用指令 在学习前端的过程中,学了一段时间的VUE,先说手为啥要学习VUE,很直白,想找工作,想赚钱! 然后学习VUE的好处是,不用过多地去操作DOM元素,可以花更多的时间去关注业务逻辑 v-on vue使用最频繁的指令...

    VUE常用指令

    在学习前端的过程中,学了一段时间的VUE,先说手为啥要学习VUE,很直白,想找工作,想赚钱!
    然后学习VUE的好处是,不用过多地去操作DOM元素,可以花更多的时间去关注业务逻辑

    v-on

    vue使用最频繁的指令之一,用于绑定事件
    使用方法一: <input type=“button” value=“开启” v-on:click="go">
    使用方法二(简写): <input type=“button” value=“开启” @:click="go">

    v-bind

    vue使用最频繁的指令之一,用于绑定属性
    使用方法一: <input type=“button” value=“开启” v-bind:title="btnTitle + ‘, 这是追加的内容’">
    使用方法二(简写): <input type=“button” value=“开启” :btnTitle + ‘, 这是追加的内容’">

    在使用v-bing的过程中

    会使用到事件修饰符
    使用方法
    在这里插入代码片 div class="inner" @click.capture="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div>”1.stop 阻止冒泡
    2.prevent 阻止默认事件
    3.capture 添加事件侦听器时使用事件捕获模式
    4 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
    5 .once 事件只触发一次

    v-model

    双向绑定数据的指令,使用最频繁的指令之一

    //绑定msg数据
    <p v-model="msg"></p>
    

    v-cloak

    使用v-cloak可以解决插值表达式闪烁的问题

    <p v-cloak>++++++++ {{ msg }} ----------</p>
    

    v-text

    默认v-text没有闪烁问题,但是v-text会覆盖原本的内容

    <h4 v-text="msg">==================</h4>
    

    ##v-html
    v-html会自动解析属性值内的html标签,如下v-html会自动解析msg2的h1标签
    列子:

    <div v-html="msg2">1212112</div>
     data: {
            msg2: '<h1>哈哈,我是H1</h1>',
          },
    
    

    v-for

    v-for指令用于循环迭代列表或者数据的元素

    <ul>
    //迭代数组
      <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}</li>
    </ul>
    
    !-- 循环遍历对象身上的属性 -->
    
        <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
    
    //迭代数字
    <p v-for="i in 6">这是第 {{i}}P标签</p>
    

    v-if

    每次使用v-if的时候,都会创建或者删除dom元素
    需要创建或者使用次数少的时候可以使用v-if

     <h3 v-if="flag">这是用v-if控制的元素</h3>
    

    v-show

    使用v-show的时候,会使用display:none去切换元素的隐藏或者显示
    涉及到元素的频繁切换建议使用v-show

    <h3 v-show="flag">这是用v-show控制的元素</h3>
    
    展开全文
  • vue 常用指令

    2020-09-16 21:44:27
    vue常用指令 1.v-model 多用于表单元素实现双向数据绑定 2.v-for 格式: v-for="(item,index) in/of 数组json" 循环数组或json 3.v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 4.v-hide 隐藏内容 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,163
精华内容 1,265
关键字:

vue常用指令

vue 订阅