- v-text
<span v-text="msg"></span>
//其用法与 {{msg}} 一样
<span>{{msg}}</span>
那为什么不用{{msg}}要用v-text。因为直接用字面量会出现bug。网速慢的时候，先加载出HTML，在加载js,在js未加载出来的时候，{{msg}}没数据，所以会直接在页面上显示出{{msg}}。工作中用v-text用的多。
- v-html
用法与v-text一样,但是v-html会识别出数据当中的HTML标签。但少用，会引起XSS攻击。
<div v-html="message">{{message}}</div>
//message可以包含html标签，来展示一个页面的内容。
export default {
data () {
return {
message: "<h1>这里可以包含html标签<h1>"
}
}
}
- v-show
v-show的值为true，表示元素显示；如果v-show值为false，表示元素隐藏。等同于display:none;
- v-if
v-if的值为true，表示元素显示；如果v-if值为false，表示元素隐藏。但隐藏是会删除dom。
-
v-else
紧跟着v-if或v-if-else无语法要求。 -
v-else-if
紧跟v-if 没啥好说的。 -
v-for
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。
//此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：
<div v-for="item in items"> {{ item.text }} </div>
//另外也可以为数组索引指定别名 (或者用于对象的键)：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
- v-on(缩写@)
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。类似于小程序的bindtab事件绑定。
如果是点击事件可以用缩写，如果不是要写全。
v-on:keyup.13 绑定键盘回车键
- v-bind(缩写：)
v-bind指令被用来响应地更新标签上的属性。(img标签上的src就是属性)动态地绑定一个或多个特性，或一个组件prop 到表达式.可以很方便的渲染DOM。
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
- v-model
在表单控件或者组件上创建双向绑定。
//v-model绑定输入框的内容给数据源的message
<input v-model="message" >
//在从数据源的message获取数据
<p>Message is: {{ message }}</p>
修饰符：
-
v-model.lazy = "message"并不会实时显示，而是在输入框失去焦点的时候会显示。 -
v-model.number,输入的内容是数字才会显示，非数字不予显示。 -
v-model.trim去空格。输入多少个空格都不予显示。
-
v-slot(缩写#)
插槽
Vue.js 你需要知道的 v-slot （译) -
v-pre
原样输出。
//跳过这个元素和它的子元素的编译过程。跳过大量没有指令的节点会加快编译。
// 原样输出：{{ this will not be compiled }}
<span v-pre>{{ this will not be compiled }}</span>
- v-clock
渲染完成之后才显示。
指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] { display: none;}
<div v-cloak> {{ message }}</div>
不会显示，直到编译结束。
- v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<span v-once>This will never change: {{msg}}</span>
网友评论