V-pre指令

v-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签:

跳过不需要编译的节点,加快编 译的速度

v-cloak  cloak=>斗篷的意思

这个指令保持在元素上直到关联组件实例结束编译

它必须和css一起使用,这个指令可以隐藏未编译的Mustache标签直到组件实例准备完毕

v-memo(新)

指定数据发生改变,才改变其他数据,其他数据发生改变,不会改变

五、绑定class 和style

绑定class介绍

在开发中,我们的元素class也是动态的,如:

        当数据为某个状态时 字体为红色

        当数据为另一个状态时,字体为黑色

绑定class有两种方式:

        对象语法

        数组语法

绑定class-对象语法

对象语法: 我们可以传给 :class一个对象,动态切换class

绑定class-数组语法

数组语法:可以把数组传给:class 以应用一个class列表

绑定style属性介绍

我们可以利用v-bind:style来绑定一些CSS内联样式:

        因为某些样式我们需要根据数据动态来决定

        如某字段的颜色 大小等等

Css property名可以用 驼峰式或短横线分割(短横线分割要用引号括起来)来命名

绑定class有两种方式:

        对象语法

        数组语法

对象语法:

数组语法:

style的数组语法可以将多个样式对象应用到同一个元素上

动态绑定属性

在某些情况下,我们 属性的名称 可能也不是固定的

        前面我们无论绑定src href class style 属性名称都是固定的

        如果 属性名称 不是固定的 我们可以使用 :[属性名]="值"的格式来定义

        这种绑定的方式 我们称之为 动态绑定属性

绑定一个对象

如果我们希望将一个 对象的所有属性 绑定到元素上的所有属性 应该怎么做?

        我们可以直接使用v-bind绑定一个对象;

v-on绑定事件

在前端开发,我们需要经常和用户进行各种各样的交互

        这个时候 我们就必须监听用户发生的事件 如 点击 拖拽 键盘事件等等

        在Vue中如何监听时间呢? 使用v-on指令

v-on的用法

v-on的使用:

        缩写:@

        预期:Function|InIne Statement|Object

        参数:event

        修饰符:

        .stop - 调用event-stopPropagation()

        .prevent - 调用event-preventDefault()

        .capture - 添加事件侦听器时 使用capture模式

        .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调

        .{keyAlias} - 仅当事件从特定键触发时才触发回调

        .once - 只触发一次回调

        .left - 只当点击鼠标左键时触发

        .right - 只当点击鼠标右键时触发

        .middle - 只当点击鼠标中间时触发

        .passive - {passive:true}模式添加侦听器

v-on的基本使用

我们可以使用v-on来监听一下点击事件:

v-on:click可以写成@click 是它的语法糖写法:

当然 我们也可以绑定 其他事件:

如果我们希望一个元素 绑定多个事件 这个时候可以传入一个对象:

v-on参数传递

当通过methods中定义方法,以供@click调用时 需要注意参数问题:

        一:如果该方法不需要额外参数,那么方法后的()可以不添加

                但是:如果方法本身没有一个参数 那么会默认将原生事件event参数传递进去

        二:如果需要同时传入某个参数 同时需要event时 可以通过$event传入事件

v-on的修饰符

v-on支持 修饰符,修饰符相当于对事件进行了一些特殊的处理:

        .stop - 调用event-stopPropagation()

        .prevent - 调用event-preventDefault()

        .capture - 添加事件侦听器时 使用capture模式

        .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调

        .{keyAlias} - 仅当事件从特定键触发时才触发回调

        .once - 只触发一次回调

        .left - 只当点击鼠标左键时触发

        .right - 只当点击鼠标右键时触发

        .middle - 只当点击鼠标中间时触发

        .passive - {passive:true}模式添加侦听器

六、Vue的条件渲染

条件渲染

在某些情况下,我们需要根据当前的条件决定某些元素或组件是否需要渲染,这个时候我们就需要进行条件判断了

Vue提供了下面的指令来进行条件判断:

        V-if

        V-else

        V-else-if

        V-show

        V-if  v-else  v-else-if

它们用于根据条件来渲染某一块内容

        这些内容只有再条件为true时 才会被渲染出来  这三个指令与Js的条件语句if else else if类似

v-if的渲染原理:

template元素

因为v-if是一个指令 所以必须将其添加到一个元素上

        如果我们希望切换的是多个元素呢?

        此时我们渲染div但是我们并不希望 div这种元素被渲染

        这个时候 我们可以选择使用template

template元素可以当做不可见的包裹元素,且在v-if上使用,但最终template不会被渲染出来

        有点类似于小程序中的block

v-show

v-show和v-if的用法 看起来是一致的 也是根据一个条件决定是否显示元素或组件;

v-show和v-if的区别

用法上的区别:

其次 本质的区别:

开发中如何选择?