[Vue] : Vue指令
Vue指令之 v-cloak
v-cloak是解决解决插值表达式的闪烁问题 。
给插值表达式的元素加上v-cloak
<p v-cloak>{{ msg }}</p>
为v-cloak定义样式
[v-cloak] {
display: none;
}
Vue指令之v-text
用法：
<h4 v-text="msg"></h4>
v-text和插值表达式的相同与区别
v-text和插值表达式类似，但没有闪烁问题v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空
<!-- 输出时，插值表达式前后的字符会保留 -->
<p v-cloak>++++{{msg }}----</p>
<!-- 输出时，msg会替换掉其他符号 -->
<h4 v-text="msg">-------</h4>
Vue指令之v-html
如果需要将msg以html的形式输出，需要使用v-html，v-html也会覆盖掉元素中原本的内容
例如：msg: '<h3>这是一个h3标签</h3>'
<p v-html="msg"></p>
Vue指令之v-bind
v-bind是用于绑定属性的指令，当使用v-bind:title以后，会将"title"当做一个变量来使用，引号中的字符当做js代码来处理，因此还支持表达式运算。
<input type="button" value="按钮" v-bind:title="mytitle">
<input type="button" value="按钮" v-bind:title="mytitle + ‘123’">
<input type="button" value="按钮" :title="mytitle + ‘123’">
...
data: {
mytitle:'这是自定义的title'
}
- 直接使用指令
v-bind - 使用简化指令
: - 在绑定的时候，拼接绑定内容：
:title="btnTitle + ', 这是追加的内容'"
Vue指令之v-on
Vue 中提供了v-on事件绑定机制，v-on: 可以缩写为@
<div id="app">
<input type="button" value="按钮" v-on:click="show">
<input type="button" value="按钮" @click="show">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
show: function () {
alert('hello')
}
}
})
</script>
绑定函数是，如果加()可以为函数传参，如果无需传参可以省略()
指令v-on练习 - 跑马灯
注意事项：
- 函数start内部调用setInterval会有this指向问题，使用箭头函数改变this指向，是setInterval内部的this指向Vue实例
- 应当使用一个全局的intervalID，保证stop函数能够访问到
- 防止启动按钮连续点击，启动多个定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h4>{{msg}}</h4>
<input type="button" value="启动" @click="start">
<input type="button" value="停止" @click="stop">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '这是一个跑马灯',
intervalID: null
},
methods: {
start: function () {
if (this.intervalID != null) return
this.intervalID = setInterval(() => {
// 在vm实例中访问data中的数据，必须是this.的方式
var head = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + head
}, 400)
},
stop() {
clearInterval(this.intervalID)
this.intervalID = null
}
}
})
</script>
</body>
</html>
Vue指令之事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只有当事件在该元素本身（比如不是子元素）触发时触发回调，只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为
- .once 事件只触发一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue-2.4.0.js"></script>
<style>
.inner {
height: 150px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click="div1Handler">
<!-- 使用.stop阻止冒泡 -->
<input type="button" value="按钮" @click.stop="btnHandler">
</div>
<!-- 使用.prevent阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>
<!-- 使用.capture实现捕获触发的机制，点击按钮，先输出div的点击事件，在输出btn的事件 -->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="按钮" @click="btnHandler">
</div>
<hr>
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<div class="inner" @click.self="div1Handler">
<input type="button" value="按钮" @click="btnHandler">
</div>
<!-- 使用.once 只触发一次，第一次阻止默认行为，以后不再阻止 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
btnHandler() {
console.log('btn点击事件')
},
div1Handler() {
console.log('div1点击事件')
},
linkClick() {
console.log('a链接的点击事件')
}
}
})
</script>
</body>
</html>
Vue指令之v-model和双向数据绑定
使用v-model指令，可以实现表单元素和 Model 中数据的双向数据绑定。v-bind只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定。
注意：v-model只能运用在 表单元素中: input(radio, text, address, email....) select checkbox textarea
<body>
<div id="app">
<H4>{{msg}}</H4>
<input type="text" style="width:100%;" v-model="msg">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'v-model双向数据绑定实例'
}
})
</script>
</body>
Vue指令练习 - 简易计算器案例
- HTML 代码结构
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" @click="calc">
<input type="text" :value="result">
</div>
- Vue实例代码：
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt:'+'
},
methods:{
calc(){
switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
}
}
}
})
在Vue中使用样式
使用class样式
- 数组，注意： 这里的 class 需要使用
v-bind做数据绑定
<h1 :class="['red', 'thin']">这是一个H1</h1>
- 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个H1</h1>
- 数组中嵌套对象，对象来代替三元表达式，提高代码的可读性
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个H1</h1>
- 直接使用对象，由于对象的属性可带引号，也可不带引号，所以这里我没写引号。属性的值是一个标识符
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个H1</h1>
使用内联样式
- 直接在元素上通过
:style的形式，书写样式对象，对象的键如果是'-'连起来的，必须加单引号
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个H1</h1>
- 将样式对象，定义到
data中，并直接引用到:style中
- 2.1 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- 2.2 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">这是一个H1</h1>
- 在
:style中通过数组，引用多个data上的样式对象
- 3.1 在data上定义样式，注意：
fontStyle也可以写成'font-style'
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
- 3.2 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个H1</h1>
Vue指令之v-for和key属性
- 迭代普通数组
- 1.1 data中定义数组
data: {
list: [1, 2, 3, 4, 5, 6]
}
- 1.2 循环普通数组
<p v-for="(item, i) in list">索引值：{{i}}, 每一项：{{item}}</p>
- 迭代对象中的属性
- 2.1 在
data中定义对象数组
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
}
- 2.2 循环对象数组
<p v-for="(user, i) in list">索引值：{{i}}, id：{{user.id}}, name: {{user.name}}</p>
- 遍历对象
- 3.1 data中定义对象
data: {
user: {
id: 1,
name: '张三',
gender: '男'
}
}
- 3.2 遍历对象
<p v-for="(val, key, i) in user">{{key}} -- {{val}} -- 索引: {{i}}</p>
- 迭代数字，注意，这里的
i是从1开始
<p v-for="i in 10">这是第 {{i}} 个P标签</p>
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的，key用来标识当前循环这一项的唯一身份
当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。
- Key必须是string或number类型
- key 在使用的时候，必须使用
v-bind属性绑定的形式，指定key的值
在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型:key值
Vue指令之v-if和v-show
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
- v-if 的特点：每次都会重新删除或创建元素
- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的
display:none样式
一般来说，
v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好。
[Vue] : Vue指令的更多相关文章
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue的指令
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element(元素) 当前作 ...
- vue自定义指令用法总结及案例
1.vue中的指令有哪些?
- vue之指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错：Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- vue.js指令v-model实现方法
原文链接:http://www.jb51.net/article/99097.htm V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个 ...
- vue之指令篇 ps简单的对比angular
这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...
随机推荐
- 标准库中最值得关注的两个 装饰器是 lru_cache 和全新的 singledispatch（Python 3.4 新增）
clock 装饰器 def clock(func): @functools.wraps(func) def clocked(*args, **kwargs): t0 = time.perf_count ...
- spark调优篇-数据倾斜(汇总)
数据倾斜 为什么会数据倾斜 spark 中的数据倾斜并不是说原始数据存在倾斜,原始数据都是一个一个的 block,大小都一样,不存在数据倾斜: 而是指 shuffle 过程中产生的数据倾斜,由于不同的 ...
- 怎样判断浏览器是否支持canvas
1. 如果网页必须使用canvas, 则需要告知用户更换或更新浏览器. 这时可以通过在<canvas>标签之间添加替代元素进行 <canvas id="c1"&g ...
- linux 安装redis 完整步骤
最近在linux服务器上需要安装redis,来存放数据,增加用户访问数据的速度,由于是第一次安装,于是在百度上搜了一篇文章,按照这篇博客,顺利安装好了,因此将博主的文章拷过来记录一下,方便以后使用,也 ...
- 事件处理程序EventUtil
/**********事件处理程序***********EventUtil.js*浏览器兼容,<高三>13章 P354*2014-12-8************************* ...
- caffe prototxt分析
测试用prototxt name: "CIFAR10_quick"layer { name: "data" type: "MemoryData&quo ...
- 函数——es6函数扩展(二)
一.声明 1. let(变量) 可以只声明不给值(默认为undefined),或者是先声明后给值,但是必需声明后再使用,可以重复赋值,可以防止变量泄露: 同一作用域里不能重复的声明,不同作用域里可以, ...
- centos 中 Java环境变量配置
一.安装java 1.搜索java包 yum search java 2.安装java包 -openjdk.x86_64 3.查看java安装目录 whereis java #找到Java目录 一般在 ...
- Asp.net Core 微信小程序支付
最近要做一个微信小程序支付的功能 在网上找了一下 .net Core做微信支付的博客 和 demo 几乎没有 自己研究了好几天 参考了 很多 大牛的博客 勉强做出来了 因为参数都没有 比如 opid ...
- 安卓App自动升级
procedure _InstallApk(Apk: string); var LFile: JFile; LIntent: JIntent; begin LFile := TJFile.JavaCl ...