三.vue基础-指令大全
文章目录
vue基础-指令大全
一. v-text 更新textContent
v-text主要用来更新textContent,可以等同于JS的text属性.
<span v-text='msg'></span>
//等价于
<span>{{msg}}</span>
二.v-html 解析HTML标签
- {{}}mustache模板语句只能将绑定的数据源以文本字符串的格式进行处理,因此如果需要将数据源按照HTML5结构处理,此时可以使用v-html.
- v-html=“data” : 该指令可以将绑定的数据源data中的HTML标签按照HTML5的网页结构进行解析
//HTML
<div id="app" v-html="msg"></div>
//js
<script>
let vm = new Vue({
el: '#app',
data: {
msg: "<p>我是p标签</p>"
}
})
</script>
三.v-pre 跳过编译过程
-
不需要表达式
-
v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
`{{ this will not be compiled }}`
四.v-cloak 关联实例结束编译
- 不需要表达式
- 这个指令保持在元素上直到关联实例结束编译. 和css规则如[v-cloak]{ display: none }一起使用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕.
//css
[v-cloak] {
display: none;
}
//html
<div id="app">
<h3 v-cloak>{{introduce}}</h3>
</div>
//js
<script>
let timer = setTimeout(function(){
let vm = new Vue({
el: "#app",
data:{
introduce: '我叫张三',
}
})
},5000)
</script>
五.v-once 渲染一次
- 不需要表达式
- v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
<span v-once>This will never change:{{msg}}</span> //单个元素
<div v-once>//有子元素
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //组件
<ul>
<li v-for="i in list">{{i}}</li>
</ul>
例子中,msg,list即使产生改变, 也不会重新渲染.
六.v-if v-else-if v-else判断语句
-
v-if v-else-if v-else:是一个分支结构,可以根据当前指令对应添加的返回结果,决定数据的加载方式,如果返回结果为真,则加载该条件对应的标签结构,否则该结构不加载
-
可以链式的使用多次. 可以更加方便地实现switch语句
-
优点:可以根据条件灵活决定加载某一部分代码, 有效降低代码的冗余度
-
缺点:如果对应的条件判断频繁发生变化, 此时会增加浏览器的系统开销, 影响网页的DOM渲染
-
该结构适用于条件变化频率不是很快的场景
//HTML <div id='app'> <div v-if="type==='A'"> A </div> <div v-else-if="type==='B'"> B </div> <div v-else-if="type==='C'"> C </div> <div v-else> Not A,B,C </div> </div> //js let vm = new Vue({ el: '#app', data: { type:A, } })
七.v-show条件展示元素
-
v-show:也是根据条件展示元素. 和v-if不同的是, 如果v-if的值是false, 则这个元素被销毁, 不再dom中. 但是v-show的元素会始终被渲染并保存在dom中, 它只是简单的切换css的dispaly属性.
-
注意: v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好<p v-show="state == c">c</p>
八.v-for根据遍历数组来进行渲染
-
v-for 循环结构, 后面跟的循环表达式
-
v-for =" item in items"items用来存储每一次从itable变量中提取的一个数据源.item为别名. -
基于源数据多次渲染元素或模板块. 此指令之值, 必须使用特定语法
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, key, index) in object"></div> -
注意: v-for在构建过程中一般需要通过绑定一个特殊的key来区分不同的模块, 原因是vue在进行dom渲染的过程中为了提高页面的渲染速度, 默认使用就近复制的元素, 此时新增加的元素可能出现和上面元素数据相同的情况, 为了避免使用就近复制, 每一次都能重新创建, 此时需要给每一个创建的dom结构绑定一个唯一的key
<div id="app"> <div class="contact" v-for="item in contacts" :key="item.id"> <h3>姓名:{{item.name}}</h3> <form action=""> <input type="radio" value="1" :checked="item.sex == '1' "> <span>1</span> <input type="radio" value="2" :checked="item.sex == '2' "> <span>2</span> </form> <div class="age">{{item.age}}</div> </div> </div>
let vm = new Vue({
el: '#app',
data: {
contacts:[
{id: 1, name: '张三', sex: '1', age: 30},
{id: 2, name: '李四', sex: '1', age: 30},
{id: 3, name: '王二', sex: '1', age: 30},
]
}
})
九.v-bind 动态的绑定一个或者多个特性
- v-bind用来动态的绑定一个或者多个特性. 没有参数时, 可以绑定到一个包含键值对的对象.常用于动态绑定class和style,以及href等.
- 带参指令语法: 指令:参数=数值
- 简写为一个冒号":"
<div id="app">
<h3 :class = "className">{{msg}}</h3>
</div>
let vm = new Vue({
el: '#app',
data: {
className:'active',
msg:'hello world',
}
})
-
示例
<!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg> -
.camel修饰符允许在使用 DOM 模板时将v-bind属性名称驼峰化，例如 SVG 的viewBox属性：<svg :view-box.camel="viewBox"></svg>在使用字符串模板或通过
vue-loader/vueify编译时，无需使用.camel。
十.v-model 双向数据绑定
-
v-model:用来实现form表单控件和model层数据源之间的双向数据绑定, 即view层数据的改变会影响Model层数据源, 同时model层数据源的变换也会影响view层数据的展示.
<div id="app"> <input type="text" name="introduce" v-model:value="introduce"> {{introduce}} </div>let vm = new Vue({ el: "#app", data:{ introduce: '我叫张三', } }) -
v-model修饰符
-
.lazy 默认情况下, v-mode同步输入框的值和数据. 可以通过这个修饰符, 转变在change事件在同步.
<input v-model.lazy="msg"> -
.number 自动将用户的输入值转化为数值类型
<input v-model.number="msg"> -
.trim 自动过滤用户输入的首尾空格
<input v-model.trim="msg">
十一.v-on 监听dom事件
-
v-on主要用来监听dom事件, 以便执行一些代码块. 表达式可以是一个方法名.
-
简写为: @
//html <div id="app"> <button @click="consoleLog"></button> </div> //js <script> var app = new Vue({ el: '#app', methods:{ consoleLog:function (event) { console.log(1) } } }) </script> -
事件修饰符
-
.stop阻止事件继续传播 -
.prevent事件不再重载页面 -
.capture使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -
.self只当在 event.target 是当前元素自身时触发处理函数 -
.once事件将只会触发一次 -
.passive告诉浏览器你不想阻止事件的默认行为
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
下一篇： Vue的学习笔记三：Vue常用指令