vue指令相关的
阅读目录
- 1.v-text
- 2.v-html
- 3.v-show
- 4.v-if
- 5.v-if vs v-show
- 6.v-else
- 7.v-for
- 8.v-on
- 9.v-bind 和 v-model
- 10.v-pre
- 11.v-once
1.v-text
1. v-text {string} 更新元素的textContent 如下代码：
<span v-text='msg'></span>
<!-- 其实和下面的写法一样的 -->
<span>{{ msg }}</span>
如下demo代码：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
img { width: 180px; height: 180px; overflow: hidden;}
</style>
</head>
<body>
<div id='demo'>
<span v-text='msg'></span>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script> <script type="text/javascript">
new Vue({
el: '#demo',
data: {
msg: 'aa'
}
})
</script>
</html>
2.v-html
2. v-html {string} 更新元素的 innerHTML.
作用是：在网站上动态渲染任意的html是非常危险的，因为容易导致XSS攻击，在可信的内容使用v-html,可以防止发生。
还有一个地方就是后端返回的json数据，如果包含html这些标签的话，如果按照普通的html文本插入的话，会把html标签显示出来，但是使用v-html可以
很好的解决这个问题，如下demo：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
img { width: 180px; height: 180px; overflow: hidden;}
</style>
</head>
<body>
<div id='demo'>
<span v-html='innerhtml'></span>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script> <script type="text/javascript">
new Vue({
el: '#demo',
data: {
innerhtml: 'aaaaaa<i style="color: red;">122334</i>'
}
})
</script>
</html>
3.v-show
作用是： 根据表达式是否有值，切换元素的 display css属性。
如下代码空字符串的话，就不显示内容，但是如果字符串有任何值的话，都显示内容。
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
img { width: 180px; height: 180px; overflow: hidden;}
</style>
</head>
<body>
<div id='demo'>
<span v-show='msg'>1111111</span>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script> <script type="text/javascript">
new Vue({
el: '#demo',
data: {
msg: ''
}
})
</script>
</html>
4.v-if
作用：根据表达式的是否有值来渲染元素，在切换元素时及它的数据绑定/组件被销毁并且重建。
如下demo
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
img { width: 180px; height: 180px; overflow: hidden;}
</style>
</head>
<body>
<div id='demo'>
<span v-if='msg'>1111111</span>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script> <script type="text/javascript">
new Vue({
el: '#demo',
data: {
msg: ''
}
})
</script>
</html>
5.v-if vs v-show
他们之间的区别是：v-if 是真正的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
比如如下代码：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
img { width: 180px; height: 180px; overflow: hidden;}
</style>
</head>
<body>
<div id='demo'>
<span v-show='msg'>1111111</span>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script> <script type="text/javascript">
new Vue({
el: '#demo',
data: {
msg: ''
}
})
</script>
</html>
v-show 显示和隐藏直接 display:none, 页面的代码不会被销毁，如下代码：
<div id="demo"><span style="display: none;">1111111</span></div>
但是 v-if 不一样，它会重新创建和重新销毁，比如如果为false的话，span标签不会显示出来。
所以如果需要频繁的切换显示和隐藏的话，使用v-show比较好，如果使用的条件不太可能发生变化的情况下，使用v-if比较好。
6.v-else
作用是：前一兄弟元素必须有 v-if，含义是：如果.... 否则....
如下代码：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
img { width: 180px; height: 180px; overflow: hidden;}
</style>
</head>
<body>
<div id='demo'>
<div v-if='msg'>1111</div>
<div v-else>2222</div>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script> <script type="text/javascript">
new Vue({
el: '#demo',
data: {
msg: ''
}
})
</script>
</html>
7.v-for
7. v-for {Array | Object | number | string }
基于源数据多次渲染元素或模板块，就是遍历元素的意思；
如下代码：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
img { width: 180px; height: 180px; overflow: hidden;}
</style>
</head>
<body>
<div id='demo'>
<div v-for='item in msg'>
{{ item.text }}
</div>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script> <script type="text/javascript">
new Vue({
el: '#demo',
data: {
msg: [{'text': 1}, {'text': 2}]
}
})
</script>
</html>
当然也可以对数组进行遍历，我们可以为数组索引指定别名。
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
img { width: 180px; height: 180px; overflow: hidden;}
</style>
</head>
<body>
<div id='demo'>
<div v-for='(item, index) in msg'>
{{ item }}
</div>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script> <script type="text/javascript">
new Vue({
el: '#demo',
data: {
msg: [1, 2, 3]
}
})
</script>
</html>
// 总之可以如下遍历：
<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 的特殊属性:
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
8.v-on
8. v-on
缩写：@
类型 Function
参数： event(required)
修饰符：
.stop 调用 event.stopPropagation()
.prevent 调用 event.preventDefault()
.capture 添加事件使用 capture模式
.self 只当事件是从监听器元素本身触发时才触发回调。
.{keyCode | keyAlias} 只当事件是从特定键触发时才触发的回调。
.native 监听组件根元素的原生事件。
.once 只触发一次回调。
.left 当点击鼠标左键时触发
.right 当点击鼠标右键时触发。
.middle 当点击鼠标中键时触发。
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button> // 在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>
如下代码：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
img { width: 180px; height: 180px; overflow: hidden;}
</style>
</head>
<body>
<div id='demo'>
<div v-for='(item, index) in msg' :key='item.id' @click='dothis'>
{{ item }}
</div>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script> <script type="text/javascript">
new Vue({
el: '#demo',
data: {
msg: [1, 2, 3]
},
methods: {
dothis: function() {
alert(1)
}
}
})
</script>
</html>
9.v-bind 和 v-model
9. v-bind
缩写： :
类型 {any}
作用：动态地绑定一个或多个特性。
如下代码：
<!-- 绑定一个属性 -->
<img v-bind:src="data:imageSrc">
<!-- 缩写 -->
<img :src="data:imageSrc">
<!-- with inline string concatenation -->
<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>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
v-model 指令用在<input>, <select>, <textarea> 上可以实现双向绑定，vue实例中的data与其渲染的dom元素上的内容保持一致。
10.v-pre
10. v-pre
作用是：跳过这个元素和它的子元素的编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点会加快编译。
如下代码demo：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
img { width: 180px; height: 180px; overflow: hidden;}
</style>
</head>
<body>
<div id='demo'>
<span v-pre>{{ msg }}</span>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script> <script type="text/javascript">
new Vue({
el: '#demo',
data: {
msg: 'aaa'
}
})
</script>
</html>
当加上 v-pre 时，代码标签没有编译，直接显示 msg内容，如果去掉v-pre时候，就会编译。
11.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>
vue指令相关的的更多相关文章
- 一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx
一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
- vue指令详解和自定义指令
在vue中,指令以v-开头,是一种特殊的自定义行间属性,指令的职责就是其表达式的值改变时相应地将某些行为应用到DOM上 指令使用的示例 在下面的运行结果中可以看到,v-html是可以解析html标签的 ...
- (尚016)Vue指令(11个自带指令+自定义指令)
1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果 ...
- Vue学习笔记【4】——Vue指令之v-on
Vue指令之v-on v-on指令介绍 直接使用指令v-on 使用简化指令@ 绑定事件代码:@事件名="methods中的方法名称" <!DOCTYPE html> & ...
- 第三篇：Vue指令
Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...
- 02 Vue指令
Vue指令 1.文本相关指令 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> < ...
- Vue指令总结---小白同学必看
今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
- MySQL Desc指令相关
MySQL Desc指令相关 2011-08-09 11:25:50| 分类: my基本命令 |举报 |字号 订阅 1.desc tablename; 例如 :mysql> desc jo ...
随机推荐
- Java坦克大战（二）
本文紧接上一篇讲解坦克大战这个项目,因为当初在学习的时候,是以这个案例逐步学习Java基础的,过程是先讲知识点,再将知识点逐步的融入到项目中,即给坦克添加新的功能.之前的Demo练习,想都记录下来.这 ...
- 【Redis】5、Redis事务处理
MULTI .EXEC .DISCARD 和WATCH 是 Redis 事务的基础 1.MULTI 命令用于开启一个事务,它总是返回 OK .MULTI 执行之后,客户端可以继续向服务器发送任意多条 ...
- EL表达式和JSTL的使用
一:EL表达式 1.概述:在jsp开发中,为了获取Servlet域对象中存储的数据,经常要写很多java代码,这样的做法会使JSP页面混乱,难以维护,为此,在JSP2.0规范中提供了EL表达式.它是E ...
- 《Head First设计模式》批注系列（一）——观察者设计模式
最近在读<Head First设计模式>一书,此系列会引用源书内容,但文章内容会更加直接,以及加入一些自己的理解. 观察者模式(有时又被称为模型-视图(View)模式.源-收听者(List ...
- C++桥接模式【转】
https://www.cnblogs.com/jiese/p/3164940.html 将抽象部份与它的实现部份分离,使它们都可以独立地变化. 桥接模式号称设计模式中最难理解的模式之一,关键就是这个 ...
- 2018-01-11 Antlr4的分析错误处理
中文编程知乎专栏原文地址 (前文通用型的中文编程语言探讨之一: 高考, 即使是这"第一步", 即使一切顺利达到列出的功能恐怕也需要个人数年的业余时间. 看到不少乎友都远更有资本和实 ...
- NopCommerce 根据手机浏览器和桌面浏览器切换 Theme
自从 NopCommerce 升级到 3.x 以来,默认的 ViewName.Mobile.cshtml 方式就被响应式的默认 Theme 取代了. 但是在今天各种手机专用前端库大行其道的情况下,响应 ...
- 自定义ScrollView 实现上拉下拉的回弹效果--并且子控件中有Viewpager的情况
onInterceptTouchEvent就是对子控件中Viewpager的处理:左右滑动应该让viewpager消费 public class MyScrollView extends Scroll ...
- sysbench对MySQL的压测,使用sysbench压测磁盘io
QPS - query per secondTPS - transaction per second 不是特别关注,每个业务场景中事务标准是不一样的 Ⅰ.sysbench测试框架 Ⅱ.常用测试脚本 [ ...
- mysql覆盖索引详解
覆盖索引的定义: 如果一个索引包含(或覆盖)所有需要查询的字段的值,称为‘覆盖索引’.即只需扫描索引而无须回表. 只扫描索引而无需回表的优点: 1.索引条目通常远小于数据行大小,只需要读取索引, ...