写篇文章之必须马上精通vue——（4）Vue指令

银雨星空
208 阅读4分钟

vue的指令（属性）是vue实现各种vue特性的最基础的代码。

Vue指令

当我们实例化vue实例时，vue实例会将模板中的v-指令和变量进行处理并移除（替换）。

        let vm = new Vue({
            el:'#app',
            data:{
                msg:'123'
                ,test:{
                    msg:'321'
                }
            }
        })

v-html和v-text

我们将vue实例 data中的数据展示到页面中时常用插值表达式{{}}。

    <div id="app">
        {{msg}}-{{test.msg}}
        <input type="text" v-model='test.msg'>
    </div>

除了{{}}我们还可以使用v-text属性达到相同的效果。

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

如果我们想变量中的html结构能够被识别，这个时候我们就要用v-html属性。

<div v-html="html"></div>

data:{
    html:'<hr>'
}
  • 依次的效果：

image.png

我们使用v-html和v-text可以减少闪屏效果（{{}}没有被替换）。

——重叠性

        <div v-text="msg">{{html}}</div>
        <div v-text="msg">321</div>

v-指令高于插值表达式。

image.png

v-pre

v-pre使得当前html节点及其后代节点内的插值表达式{{}}不被识别。

        <div v-pre>{{html}}
            <div>{{html}}</div>
        </div>

同时v-指令也全部不产生作用

        <div v-pre>{{html}}
            <div v-text="msg">2</div>
            <div v-html="html">1</div>
        </div>

image.png

v-cloak

虽然是vue的语法，但是本身没有实质作用，但是我们可以利用这个属性处理首屏效果。

    <style>
        [v-cloak]{
            display: none;    
        }
    </style>
    <div id="app" v-cloak>
        {{msg}}-{{test.msg}}
        <input type="text" v-model='test.msg'>
        <div v-text="msg"></div>
        <div v-html="html"></div>
    </div>

前面我们提到的vue实例移除v-属性的特点，这里便利用了vue未实例时v-cloak属性存在，在vue实例之前利用属性选择器进行css处理。

我们可以暂时移除id="app"属性来体验效果（如同一直首屏）。

v-bind

v-bind属性就是将data绑定html属性，用于响应式地更新 HTML attribute。

        <input v-bind:type='btn' value="绑定"></input>

    btn:'button'

image.png

——简写

v-bind:简写为:

        <input :type='btn' value="绑定"></input>

——绑定class和style属性

这里我们拓展语法，通过额外的格式完成更加动态的绑定效果，比如便捷的实现弹出效果。

<!-- class1 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>
<!-- class2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>
<!-- class3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>

<!-- style1 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- style2 将多个 样式对象 应用到一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        activeColor: 'red',
        fontSize: 30,
        baseStyles: {
          color: 'red',
          'font-size': '30px'
        },
        overridingStyles: {
          color: 'green',
        }
      }
    })
</script>

{}对象结构中，属性名默认是字符串，所以{ active: true }等于{ "active": true }

v-on

v-on用于绑定事件与vue实例的 methods中的方法。和v-bind的语法类似，特定用于事件上。

        <button v-on:click='fn'>+1</button>
        <button @click='fn()'>+1</button>
        <button onclick='vm.fn()'>+1</button>
        {{count}}

        let vm = new Vue({
            el:'#app',
            data:{
                count:1,
            },
            methods: {
                fn(){
                    this.count++;
                }
            },
        })

我们通过上面的内容知道了原生事件和vue语法的区别。v-on不仅支持行内js语法（执行函数），还支持函数名字。

v-on同样支持简写，简写为@。

——事件对象

vue不建议我们手动操作dom(vue优化了dom操作)。事件处理函数默认参数为事件对象。如果改变传参则需要手动添加事件对象参数$event。

<button v-on:click='fn'>event</button>
<button v-on:click='fn2(5,$event)'>event</button>

            methods: {
                fn(e){
                    console.log(e);
                }，
                fn2(x,e){
                    console.log(e)
                }
            }

image.png

v-on绑定的事件，获取到的事件对象是原生事件对象的封装。

——事件修饰符

原生的事件语法中我需要阻止冒泡、阻止默认事件等等操作，对应的函数繁杂并且难以阅读。在vue语法中我们可以通过事件修饰符极大的简化写法，阅读性极佳。

基本的修饰符：

  • .stop————阻止冒泡
  • .prevent————阻止默认事件（submit、a标签）
  • .capture——内部元素触发的事件先在此处理，然后才交由内部元素进行处理——脱离冒泡先执行（仍然被捕获）
  • .self——脱离捕获冒泡事件（子元素被点击不影响自己）——针对但对捕获冒泡中单个元素的处理——点击的东西必须是自己而不是子元素
  • .once——事件将只会触发一次，执行一次之后就会解除事件绑定。
  • .passive

——多重修饰符

支持链式的修饰符使用，同时存放

<a href="baidu.com" v-on:click.stop.prevent>默认点击事件被阻止且不冒泡-修饰符v-on:click.stop.prevent</a>
<br>
<a href="baidu.com" v-on:click.prevent.stop>饰符链式对顺序有没有要求看具体的修饰符功能</a>

修饰符顺序饰符链式对顺序有没有要求看具体的修饰符功能
prevent.stop== stop.prevent
prevent.self阻止所有的点击 != self.prevent只会阻止对元素自身的点击

v-model

v-model用在表单值绑定，是响应式数据双向绑定的应用。v-model默认绑定的是value属性。

v-model是语法糖，是:value和@input的组合。

<input v-model="message" placeholder="edit me"> 
<p>Message is: {{ message }}</p>
  • 等价写法
<com1 v-model="num"></com1> 
<!--它等价于--> 
<com1 :value="num" @input="(val)=>this.num=val"></com1>

v-if和v-show

  • v-if控制的dom产生和销毁，而v-show是修改dom是否渲染，控制display属性。
  • v-if为true时开始渲染，v-show开始一定渲染。
  • v-if切换开销更高，v-show首次生成渲染开销更高。
  • v-if可以搭配template，v-show不可以。

v-if和v-show的选用依据应用的使用场景。追求首屏效果，我们使用v-if，如果频繁切换组件显示，我们使用v-show。

——v-else和v-else-if

本质上就是else if语法。可以看成js代码中if和else进行设计和分析：

v-for

——v-for和v-if以及嵌套

v-for和v-if一起使用，在后续vue版本中会报错。不建议用在同一个标签节点上，可以使用template标签来处理这种情况会方便很多。

avatar
文章
阅读
粉丝