[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 ...
随机推荐
- RPA自定义脚本打开文件夹
import os import subprocess from rpa.web.common.utils import convert_2_unicode def startfile(filenam ...
- Python中的with语句（上下文管理协议）
在平时工作中总会有这样的任务,它们需要开始前做准备,然后做任务,然后收尾清理....比如读取文件,需要先打开,读取,关闭 这个时候就可以使用with简化代码,很方便 1.没有用with语句 f = o ...
- 【AC自动机】文本生成器
[题目链接] https://loj.ac/problem/10063 [题意] 给出长度为m,n个模式串,请问只要长度为m的串中有一个模式串就算是可读. [分析] 其实如果直接分析全部可读的情况,一 ...
- Ansible 自动化工具入门
Ansible 配置 Ansible 简单管理 下面的小实验,我们将采用以下的IP地址规划,请自行配置好. [实验环境] [状态] [主机列表] [python版本] 控制机 192.168.1.10 ...
- 使用haystack实现django全文检索搜索引擎功能
前言 django是python语言的一个web框架,功能强大.配合一些插件可为web网站很方便地添加搜索功能. 搜索引擎使用whoosh,是一个纯python实现的全文搜索引擎,小巧简单. 中文搜索 ...
- Delphi编译器属性（特别修饰符Ref，Unsafe，Volatile，Weak）
1 Refdelphi中常量参数就像一个本地常量,或者说只读变量.常量参数与值参数类似,除了不能在过程或函数体内给常量参数赋值,并且不能将常量参数传给另一个var类型参数.(但是,如果你常量参数传递的 ...
- luogu1018乘积最大--区间DP
题目链接 https://www.luogu.org/problemnew/show/P1018 分析 这道题套路跟山区建小学差不多,可以先去看看那篇题解 \(f[i][j]\)表示枚举到第\(i\) ...
- Vue-img-preload
预加载页面上的图片资源,提高用户体验 效果预览 使用方法 下载vue-img-preload插件 npm install vue-img-preload 配置参数 eachLoaded(functio ...
- struts访问jsp api内置对象的集中方式
1 default-action-ref元素改元素用来配置默认的action,如果struts找不到对应的action,就会调用这个默认的action 2 dmi处理方式是通过请求action中的一个 ...
- js 扁平化输出数组
1.使用数组的flat方法 [1,2,[3,[4,5]]].flat(Infinity) //[1, 2, 3, 4, 5] 2.实现方式二: var arr = [[1, 2, 23], [13, ...