基本指令

v-cloak

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

<div id="app" v-cloak>{{message}}
</div>
<script>var app = new Vue({el:'#app',data:{message:'这是一段文本'}})
</script>

当网速较慢Vue.js 文件还没加载完时，在页面上会显示{{message }}的字样，直到 Vue 创建实例、编译模板时， DOM 才会被替换，所以这个过程屏幕是有闪动的。只要加一句 css 就可以解决这个问题。

[v-cloak]{display:none;
}

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

v-once

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

<div id="app"><span v-once>{{message}}</span><div v-once><span v-once>{{message}}</span></div>
</div>
<script>var app = new Vue({el:'#app',data:{message:'这是一段文本'}})
</script>

条件渲染指令

v-if、 v-else-if、 v-else

<div id="app"><p v-if="status==1">当status为1时显示该行</p><p v-else-if="status===2">当status为2时显示该行</p><p v-else>否则显示该行</p>
</div>
<script>var app = new Vue({el:'#app',data:{status:1}})
</script>

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

<div id="app"><template v-if="status===1"><p>这是一段文本</p><p>这是一段文本</p><p>这是一段文本</p></template>
</div>
<script>var app = new Vue({el:'#app',data:{status:1}})
</script>

Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，如果你不希望这样做，可以使用 Vue扣提供的 key 属性，它可以让你自己决定是否要复用元素， key 的值必须是唯一的

<div id="app"><template v-if="type==='name'"><label>用户名：</label><input placeholder="输入用户名" key="name-input"></template><template v-else><label>邮箱：</label><input placeholder="输入邮箱" key="mail-input"></template><button @click="handleToggleClick">切换输入类型</button>
</div>
<script>var app = new Vue({el:'#app',data:{type:'name'},method:{handleToggleClick:function(){this.type = this.type==='name'?'mail':'name';}}})
</script>

v-show

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

<div id="app"><p v-show="status===1">当status为1时显示该行</p>
</div>
<script>var app = new Vue({el:'#app',data:{status:2}})
</script>
<!--渲染结果-->
<p style="display:none;">当status为1时显示该行</p>

列表渲染指令 v-for

基本用法

<div id="app"><ul><li v-for="book in books">{{book.name}}</li></ul>
</div>
<script>var app = new Vue({el:'#app',data:{books:[{name:'《西游记》'},{name:'《三国演义》'},{name:'《红楼梦》'},{name:'《水浒传》'}]}})
</script><!-- v-for 的表达式支持一个可选参数作为当前项的索引-->
<div id="app"><ul><li v-for="(book,index) in books">{{index}}-{{book.name}}</li></ul>
</div>
<script>var app = new Vue({el:'#app',data:{books:[{name:'《西游记》'},{name:'《三国演义》'},{name:'《红楼梦》'},{name:'《水浒传》'}]}})
</script><!-- v-for 也可以用在内置标签＜template＞上 ，将多个元素进行渲染-->
<div id="app"><ul><template v-for="book in books"><li>书名：{{book.name}}</li><li>作者：{{book.author}}</li></template></ul>
</div>
<script>var app = new Vue({el:'#app',data:{books:[{name:'《西游记》',author:'吴承恩'},{name:'《三国演义》',author:'罗贯中'},{name:'《红楼梦》',author:'曹雪芹'},{name:'《水浒传》',author:'施耐庵'}]}})
</script><!-- 对象的属性也是可以遍历的 -->
<div id="app"><span v-for="value in user">{{value}}</sapn>
</div>
<script>var app = new Vue({el:'#app',data:{user:{name:'Aresn',gender:'男’,age:20}})
</script><!--遍历对象属性时，有两个可选参数，分别是键名和索引-->
<div id="app"><span v-for="(value,key,index) in user">{{value}}</sapn>
</div>
<script>var app = new Vue({el:'#app',data:{user:{name:'Aresn',gender:'男’,age:20}})
</script><!--v-for 迭代整数-->
<div id="app"><span v-for="n in 10">{{n}}</span>
</div>
<script>var app = new Vue({el:'#app'})
</script>

数组更新

Vue 的核心是数据与视图的双向绑定，当我们修改数组时，Vue 会检测到数据变化，所以用v-for 渲染的视图也会立即更新。 Vue 包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新：
• push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse(）
    • filter()
    • concat()
    • slice()

<div id="app"><ul><template v-for="book in books"><li>书名：{{book.name}}</li><li>作者：{{book.author}}</li></template></ul>
</div>
<script>var app = new Vue({el:'#app',data:{books:[{name:'《Vue.js实战》',author:'梁灏'},{name:'《JavaScript语言精粹》',author:'Douglas Crockford'},{name:'《JavaScript高级程序设计》',author:'Nicholas C.Zakas'}]}});app.books = app.books.filter(function(item){return item.name.match(/JavaScript/);});
</script>

Vue.js入门 0x2 内置指令（1）相关推荐

Vue 基础之常用内置指令
Vue 基础之常用内置指令描述指令内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
Vue中常用的内置指令及自定义指令
内置指令 v-bind [单向数据绑定] [格式:v-bind:属性名="data中定义的属性"] [简写::属性名="data中定义的属性"] <div ...
vue学习篇--02内置指令计算属性侦听属性
文章目录 18个指令 v-text v-html: v-show: v-if: v-for: 可以遍历数组对象数字字符串 v-bind: 解析属性:title src href type alt ...
Vue.js 学习笔记第5章内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车回顾一下第2.2节,我们己经介绍过指令(Di ...
Vue.js实战——内置指令（二）
参考<Vue.js实战>梁灏 Vue内置指令第一部分:Vue.js实战--内置指令(一) 1 方法与事件 1.1 基本用法直接上代码,这样最实在: <!DOCTYPE html&g ...
08.vue.js实战笔记（计算属性、v-bind及class和style的绑定、内置指令、方法与事件）
1.计算属性所有的计算属性都以函数的形式写在vue实例的computed选项内,最终返回计算后的结果 <!DOCTYPE html> <html lang="en&quo ...
Vue.js 内置指令
回顾一下第2.2节,我们己经介绍过指令(Directive)的概念了,Vue.js的指令是带有特殊前缀v-的HTML特性,它绑定一个表达式,并将一些特性应用到DOM上. 其实我们已经用到过很多Vue内 ...
2.0 vue内置指令与自定义指令
一.概述模板在解析之前指令是存在的,但是解析完成以后就不存在了. 1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHT ...
vue2入门---＞过滤器，内置指令，自定义指令
1. 过滤器 1.1 介绍过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器:Vue.filter(name,callback) 或 new Vue ...

Vue.js入门 0x2 内置指令（1）

基本指令

v-cloak

v-once

条件渲染指令

v-if、 v-else-if、 v-else

v-show

列表渲染指令 v-for

基本用法

数组更新

Vue.js入门 0x2 内置指令（1）相关推荐

最新文章

热门文章