当前位置: 首页 > news >正文

VUE的10个常用指令

01 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>
<!-- `v-for` 指令 -->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>

 

02 v-text
说明: v-text 指令用于更新标签包含的文本,它的作用跟双大括号的效果一样
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
03 v-html
说明: 帮助我们绑定一些包含 html 代码的数据在视图上,比如: “<b>hello,vue</b>” ,这个字符串包含了<b> 标签,要想 <b> 不被当作普通的字符串渲染出来,就得用 v-html
说明: <div v-html="html"></div>

 

04 v-show
说明: v-show 指令的取值为 true/false ,分别对应着显示 / 隐藏它就是用来控制元素的 display css
性的 [display:none]
<div id="app">
<p v-show="show1"> 我是 true</p>
<p v-show="show2"> 我是 false</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
show1:true,
show2:false }
});
</script>
渲染后

 

05 v-if
说明: 设置为 true 的标签,成功渲染出来,而设置为 false 的标签,直接被一行注释代替了,并没有
被解析渲染出来。
v-show v-if 两者的区别
如果需要 频繁切换显示 / 隐藏 的,就用 v-show
如果运行后 不太可能切换显示 / 隐藏 的,就用 v-if
<p v-if="if_1"> 我是 true</p>
<p v-if="if_2"> 我是 true</p>
let app = new Vue({
el:"#app",
data:{
if_1:true,
if_2:false
}
});
06  v-else
说明: 两个标签 : 第一个使用 v-if 指令,并取值为 false ,第二个使用 v-esle 指令 , 一旦第一个标签的
v-if 指令的值为 true ,被忽视的就是第二个 <p> 标签了。 v-if v-else 只有一个会被渲染出来。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>

 

07 v-else-if:
用法同 js 原生中的 if…elseif…elseif…else
<div id="app">
<input type="text" v-model="type" />
<p v-if="type === 'A'">
A
</p>
<p v-else-if="type === 'B'">
B
</p> <p v-else-if="type === 'C'">
C
</p>
<p v-else>
Not A/B/C
</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
type:""
}
})
</script>
08  v-for
说明: 我们用 v-for 指令根据一组数组 / 对象的选项列表进行渲染。 v-for 指令需要使用 item in items
式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。
08-1 基本用法
<ul>
<li v-for=" item in items ">{{item}}</li>
</ul>
data: {
items : [' ', ' ', ' ', ' ']
}
08-2 v-for 应用于数组
<div v-for="(item,index) in list">
{{index}}.{{item}}
</div>
data:{
list:['Tom','John','Lisa']
}
08-3 v-for 应用于对象
<div v-for="(item,index) in list">
{{index}}.{{item}}
</div>
data:{
list:['Tom','John','Lisa']
}
Eg2:

 

 

let vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"a"},
{id:2,name:"b"},
{id:3,name:"c"},
{id:4,name:"d"},
{id:5,name:"e"},
{id:6,name:"f"}
],
id:"",
name:""
},
methods:{
add(){
this.list.push({id:this.id,name:this.name})
}
}
})

 

09  v-bind
<!-- 绑定一个属性 -->
<img v-bind:src="imgUrl" />
<!-- 缩写 -->
<img :src="imgUrl" />
<!-- 内联字符串拼接 -->
<img :src="'../images/' + fileName" />
<!-- class 绑定 -->
<div :class="{ 'red' : isRed}"></div> 布尔值绑定模式 对象方式
<span v-bind:class="{'class-a': isA ,'class-b': isB }">VUE</span>
var vm = new Vue({
el: "#demo",
data: {
isA : true, isB : true
}
})
<div :class="[classA, classB]"></div> 变量绑定模式:数组绑定
<span :class=[ classA ,classB]>VUE</span>
var vm = new Vue({
el: "#demo",
data: {
classA : "class-a",
classB: "class-b"
}
})
<div :class="[classA, {‘classB’: isB, ‘classC’: isC}, classD]"></div> 综合绑定模式
<span :class="[one,{'classA':classa,'classB':classb}]">Be good at VUE</span>
var vm = new Vue({
el: "#demo",
data: {
one: "string", // string--> 类名
classa: true,
classb: false
}
})
<!-- style 绑定 -->
<div :style="{fontSize: size + 'px'}">div</div> 内嵌绑定
<div v-bind:style="{width:'200px', height:'200px', 'background-color':'red',fontSize: size + 'px'}">
new Vue({
el: "#app",
data: {
size:60
}
})
<div v-bind:style="styleObject"></div> 直接绑定到一个样式对象
<!-- 绑定一个有属性的对象 -->
<div v-bind="{id:someProp, 'other-attr': otherProp}"></div>
<span v-bind:style="styleObject">VUE</span>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
<!-- 通过 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>
10 v-on
作用:
用在普通元素上时,只能监听 原生 DOM 事件 。用在自定义元素组件上时,也可以监听子组件触发的 自定义事件
修饰符:
. stop - 调用 event.stopPropagation()
. prevent - 调用 event.preventDefault()
. capture - 添加事件侦听器时使用 capture 模式。
. self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
. { keyCode | keyAlias } - 只当事件是从特定键触发时才触发回调。
. native - 监听组件根元素的原生事件。
. once - 只触发一次回调。
. left - (2.2.0) 只当点击鼠标左键时触发。
. right - (2.2.0) 只当点击鼠标右键时触发。
. middle - (2.2.0) 只当点击鼠标中键时触发。
. passive - (2.3.0) { passive: true } 模式添加侦听器
API: https://v2.cn.vuejs.org/v2/api/?#v-on

相关文章:

  • java毕业生设计忆居民宿管理计算机源码+系统+mysql+调试部署+lw
  • Amazon Braket 与量子计算
  • Open3D(C++)快速欧式聚类分割
  • (附源码)计算机毕业设计JavaJava毕设项目电脑小白网站
  • 移动端开发之混合开发模式优劣势综述
  • 【Dense Res2net:两个非局部注意模型:IVIF】
  • 基于无人机的气象数据采集系统设计(Matlab代码实现)
  • SpringCloud - 服务调用
  • 理解 ROC 和 PRC
  • Python集合类型详解(二)——集合处理方法与应用场景
  • 【算法基础】(一)基础算法 --- 快速排序
  • 蓝桥杯实战应用【算法代码篇】-基于数组实现线性表
  • 晶圆盒RF载具ID读取器CK-S650-PA60E的1协议和N协议通信说明
  • Grails SpringBoot国际化不生效
  • JNDI注入的理解、JDK给出的修复
  • WPF项目实战布局--通用固件下载 C#
  • java EE初阶 — 计算机工作原理
  • 零时科技 || 分布式资本创始人4200万美金资产被盗分析及追踪工作
  • [附源码]java毕业设计医院预约挂号管理系统
  • 上游模式用于实验室用冷冻机压力和真空度的高精度控制
  • Springboot魅力乡村管理系统srb4s计算机毕业设计-课程设计-期末作业-毕设程序代做
  • 【星球】【slam】 研讨会(5)VINS:Mono+Fusion 重点提炼
  • 机器学习笔记之受限玻尔兹曼机(三)推断任务
  • 机器学习之过拟合和欠拟合
  • 【Linux网络编程】服务端编程初体验
  • 《人类简史》笔记四—— 想象构建的秩序
  • 锅炉烟气脱硫除尘器_燃煤锅炉
  • 卧式燃油锅炉_燃油锅炉 燃煤锅炉
  • 四川乐山乐锅锅炉有限公司_先锋锅炉制造有限公司招聘