vue.js实战学习——内置指令(一)

注:此内容摘抄自:梁灏的《Vue.js实战》

注:记得要引入vue.js才能运行哦,文章中贴出的代码直接复制是不行的,html css js 都放在了一起,而且也没有引用vue.js。

 

1.v-cloak

v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none; 配合使用。

<div class="app1" v-cloak>
    {{message}}
</div>
var app1=new Vue({
    el:‘.app1‘,
    data:{
              message:‘这是一段文本‘
    }
});

这时虽然加了v-cloak,但其实并没有起到任何作用,当网速较慢,Vue.js文件还没有加载完时,在页面上会显示{{message}}的字样,直到Vue创建实例、编译模版时,DOM才会被替换,所以这个过程屏幕是有闪动的。只要加一句CSS就可以解决这个问题了:

[v-cloak]{
    display: none;
}        

一般情况下,v-cloak是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用,但在具有工程化的项目里,项目的HTML结构只有一个空的div元素,生于的内容都是由路由去挂在不同的组件完成的,所以不需要v-cloak。

2.v-once

v-once也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。再次渲染后,不再随数据的变化重新渲染,将被视为静态内容。

<div class="app2">
    <span v-once>{{message}}</span>
    <div v-once>
        <span>{{message}}</span>
    </div>
</div>

var app2=new Vue({
    el:‘.app2‘,
    data:{
        message:‘这是一段文本‘
    }
});

v-once在业务中也很少用,当你需要进一步优化性能时,可能会用到。

3.v-if 、v-else-if 、v-else

与JavaScript的条件语句if、else、else if 类似,Vue.js 的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件

<div class="app3">
    <p v-if="status===1">当status为1时显示该行</p>
    <p v-else-if="status===2">当status为2时显示该行</p>
    <p v-else>否则显示该行</p>
</div>

var app3=new Vue({
    el:‘.app3‘,
    data:{
        status:1
    }
});

如果一次判断的是多个元素,可以在Vue.js内置的<template>元素上使用条件指令,最终渲染的结果不会包含该元素。

<div class="app4">
    <template v-if="status===1">
        <p>这是一段文本哦</p>
        <p>这是一段文本哦</p>
        <p>这是一段文本哦</p>
    </template>
</div>

var app4=new Vue({
    el:‘.app4‘,
    data:{
        status:1
    }
});

Vue在渲染元素时,处于效率考虑,会尽可能的复用已有的元素而非重新渲染:

<div class="app5">
    <template v-if="type===‘name‘">
        <label for="">用户名:</label>
        <input type="" name="" id="" value="" placeholder="输入用户名" />
    </template>
    <template v-else>
        <label for="">邮箱:</label>
        <input type="" name="" id="" value="" placeholder="输入邮箱"  />
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
</div>

var app5=new Vue({
    el:‘.app5‘,
    data:{
        type:‘name‘
    },
    methods:{
        handleToggleClick:function(){
            this.type=this.type===‘name‘?‘mail‘:‘name‘;
        }
    }
});

键入内容,点击切换,虽然DOM变了,但是之前在输入框键入的内容并没有改变,只是替换了placeholder的内容,说明<input> 元素被复用了。

如果你不想这样,可以使用Vue.js提供的key属性,它可以让你自己决定是否要复用元素,key的值必须是唯一的。

<input type="" name="" id="" value="" placeholder="输入用户名" key="name-input" /><input type="" name="" id="" value="" placeholder="输入邮箱" key="mail-input" />

给两个<input>元素都增加key后,就不会复用了,切换类型时键入的内容也会被删除,不过<label>元素仍然是被复用的,因为没有添加key属性。

4.v-show

v-show的用法与v-if基本一致,是不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时,元素会隐藏,查看DOM结构会看到元素上加载了内联样式display:none;

<div class="app6">
    <p v-show="status===1">当status为1时显示该行</p>
</div>

var app6=new Vue({
    el:‘.app6‘,
    data:{
        status:1
    }
});

注意:v-show不能在<template>上使用。

v-if和v-show具有类似的功能,不过v-if才是真正的条件渲染,它会根据表达式适当的销毁或重建元素及绑定的事件或子组件。若表达式初始值为false,则一开始元素/组件并不会渲染,只有当条件第一次变为真时才开始编译。

而v-show只是简单的CSS属性切换,无论条件真与否,都会被编译。相比之下,v-if更适合条件不经常改变的场景,因为他切换开销相对较大,而v-show适用于频繁切换条件。

原文地址:https://www.cnblogs.com/sxdct/p/8116706.html

时间: 2024-10-23 17:17:14

vue.js实战学习——内置指令(一)的相关文章

vue.js实战学习——指令与事件

注:此内容摘抄自:梁灏的<Vue.js实战> 1.指令是Vue.js模版中最常用的一项功能,它带有前缀 v- ,比如:v-if , v-html ,v-pre 等.指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上. <div class="app1"> <p v-if="show">哈喽?</p> </div> var app=new Vue({ el:'.app1', data:{

vue.js实战学习——v-bind 及class与 style绑定

注:此内容摘抄自:梁灏的<Vue.js实战> 注:记得要引入vue.js才能运行哦,文章中贴出的代码直接复制是不行的,html css js 都放在了一起,而且也没有引用vue.js. DOM元素经常会动态的绑定一些class类名或style样式. 1.了解v-bind指令 它的主要用法是动态更新HTML元素上的属性. 在数据绑定中,最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定,他们也是HTML的属性,因此可以使用v-bind指令.我们只需要用v-bind计算出表

Vue.js 实例和内置组件 入门

首先来看看实例的概述: 实例就是在构造器外部操作操作构造器内部的属性和方法. 实例的作用就是给Vue提供与其它js及其框架结合使用的接口. 进入实例阶段: 首先来看 Vue.js 搭配 jQuery 使用: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Early Examples Demo</title&g

vue内置指令详解——小白速会

指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  等等 主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="ur

Vue源码后记-其余内置指令(2)

-- 指令这个讲起来还有点复杂,先把html弄上来: <body> <div id='app'> <div v-if="vIfIter" v-bind:style="styleObject"> <input v-show="vShowIter" v-model='vModel' /> <span v-once>{{msg}}</span> <div v-html=&qu

vue内置指令与自定义指令

一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例如:v-on:click  v-on:keyup 3.v-model:数据双向绑定:用于表单输入等:例如:<input v-model="message"> 4.v-show:条件渲染指令,为DOM设置css的style属性 5.v-if:条件渲染指令,动态在DOM内添加或删除

热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!

课程简介 课程地址:https://ke.qq.com/course/432961 机构名称:大华软件学院 授课讲师:大强老师 课程名称:Vue.js 实战教程 V2.x(一)基础篇 课程简介:包括前端发展史.Vue.js简介.第一个Vue.js程序.安装环境和Vue.Vue实例.模板语法.计算属性和侦听器.Class与Style绑定.条件渲染.列表渲染.事件处理.表单输入绑定.组件基础等等. 适合人群: 1.初出茅庐,想学习前端开发的同学: 2.没用过Vue.js,想学习更多框架的同学: 3.

Vue08 -- 内置指令

v-cloak 描述:v-cloak不需要表达式,在Vue实例结束编译时从绑定的html元素中移除,通常和css的display:none;配合使用.当网速慢时,Vue没有加载出来时会出现“{{xxx}}”的字样,直到vue创建完实例,DOM才会被替换,所以屏幕会出现闪烁,还需要在css代码中加上:[v-cloak]:{display: none!important;} 联合使用即可,但在工程化的项目中使用webpack和vue-router时,项目的vue结构只有一个空的div,剩余的内容都是

Angular中的内置指令和自定义指令

NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互. How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用. 内置指令 在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的.简单看一下一些