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 ...
随机推荐
- HTML暗黑料理之a标签执行请求不跳转页面
不是被逼无奈不建议用这HTML暗黑料理. <iframe id="></iframe> <a class="large green button&qu ...
- JMeter JMeter自身运行性能优化
JMeter自身运行性能优化 by:授客 QQ:1033553122 测试环境 apache-jmeter-2.13 1. 问题描述 单台机器的下JMeter启动较大线程数时可能会出现运行 ...
- ScrollView与ListView的事件冲突
布局文件 当ListView嵌套在ScrollView中时,会发生冲突,导致ListView控件的拉动效果消失‘ 解决办法: 重写ListView的onTouchEvent(),并在返回前调用getP ...
- WTL汉化版
基于 WTL90_4060 仅汉化了Windows部分,CE和Mobile未汉化 AppWizard和rc文件已全部汉化 如果不需要汉化则将所有的2052目录删除即可 如有问题可以给我留言 点我下载
- go xorm增删改查
1.增加 如果传入的bean不是完整的bean,并且传入了地址,则调用结束后会被赋值// InsertOne insert only one struct into database as a rec ...
- npm install node-sass 本地安装失败
$ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taob ...
- Linux 查看本机串口方法
最近在了解嵌入式方面的知识,就随笔记录一下: 查看Linux本机串口: 1.查看串口是否可用 可以对串口发送数据比如对com1口,echo /dev/ttyS02.查看串口名称使用 ls -l /de ...
- python socket 套接字编程 单进程服务器 实现多客户端访问
服务器: import socket #单进程服务器 实现多客户端访问 IO复用 #吧所有的客户端套接字 放在一个列表里面,一次又一次的便利过滤 server = socket.socket(sock ...
- Python描述符 (descriptor) 详解
1.什么是描述符? python描述符是一个“绑定行为”的对象属性,在描述符协议中,它可以通过方法重写属性的访问.这些方法有 __get__(), __set__(), 和__delete__().如 ...
- HDU ACM 1224 Free DIY Tour （SPFA）
Free DIY Tour Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...