vue常用指令代码实例总结
vue常用内置指令
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<title 12_指令_内置指令</title
<style
[v-cloak] { display: none }
</style
</head
<body
<!--
常用内置指令
v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
--
<div id="example"
<p v-cloak {{content}}</p
<p v-text="content" </p <!--p.textContent = content--
<p v-html="content" </p <!--p.innerHTML = content--
<p ref="msg" abcd</p
<button @click="hint" 提示</button
</div
<script type="text/javascript" src="../js/vue.js" </script
<script type="text/javascript"
new Vue({
el: '#example',
data: {
content: '<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" 百度一下</a '
},
methods: {
hint () {
alert(this.$refs.msg.innerHTML)
}
}
})
</script
</body
</html <!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title Document</title
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" </script
</head
<body
<div id="app"
<!-- 数据绑定 --
<a v-bind:href="url" rel="external nofollow" 百度一下</a
<!-- 双向数据绑定 --
<input type="text" v-model="name"
<p {{name}}</p
<!-- 绑定回车键 --
<input type="text" @keyup.enter="showEnt"
<!-- 点击事件 --
<button @click="show('888')" 按钮</button
<!-- 获取数组值 --
<p {{arr[1]}}</p
<!-- 获取对象属性 --
<p {{users[1].name}}</p
</div
<script
var app = new Vue({
el: "#app",
data: {
name:'',
url: 'http://www.baidu.com',
arr: ["a", "b", "c", "d"],
users: [
{ name: "aowei", age: 12 },
{ name: "baozi", age: 13 },
{ name: "bbbbb", age: 14 },
]
},
methods: {
// 绑定回车键
showEnt: function () {
alert("666");
},
// 传参
show: function (num) {
alert(num);
}
},
}
)
</script
</body
</html 计算属性和监视
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<title 03_计算属性和监视</title
</head
<body
<!--
1. 计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算
--
<div id="demo"
姓: <input type="text" placeholder="First Name" v-model="firstName" <br
名: <input type="text" placeholder="Last Name" v-model="lastName" <br
<!--fullName1是根据fistName和lastName计算产生--
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1" <br
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2" <br
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3" <br
<p {{fullName1}}</p
<p {{fullName1}}</p
</div
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" </script
<script type="text/javascript"
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A-B'
},
// 计算属性配置: 值为对象
computed: {
fullName1:function() { // 属性的get()
return this.firstName + '-' + this.lastName;
},
fullName3: {
// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
get () {
return this.firstName + '-' + this.lastName
},
// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
set (value) {// fullName3的最新value值 A-B23
// 更新firstName和lastName
const names = value.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
watch: {
// 配置监视firstName
firstName: function (value) { // 相当于属性的set
// 更新fullName2
this.fullName2 = value + '-' + this.lastName
}
}
})
// 监视lastName
vm.$watch('lastName', function (value) {
// 更新fullName2
this.fullName2 = this.firstName + '-' + value
})
</script
</body
</html 列表渲染
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title Document</title
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" </script
</head
<body
<div id="app"
<ul
<li v-for='item in arr'
{{item}}
</li
</ul
<ul
<li v-for="(item,index) in arr"
{{index}} --- {{item}}
</li
</ul
<h3 v-for="user in users" v-bind:title="user.name"
{{user.name}} --- {{user.age}}
</h3
<button @click="add" add按钮</button
<button @click="del" del按钮</button
</div
<script
var app = new Vue({
el: "#app",
data: {
arr: ["a", "b", "c", "d"],
users: [
{ name: "aowei", age: 12 },
{ name: "baozi", age: 13 },
{ name: "bbbbb", age: 14 },
]
},
methods: {
add: function () {
console.log("add");
this.users.push({ name: "hello", age: "3" });
},
del: function () {
console.log("del");
this.users.shift();
}
},
}
)
</script
</body
</html class & style 绑定
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<title 04_class与style绑定</title
<style
.classA {
color: red;
}
.classB {
background: blue;
}
.classC {
font-size: 20px;
}
</style
</head
<body
<!--
1. 理解
在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
xxx是字符串
xxx是对象
xxx是数组
3. style绑定
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize是data属性
--
<div id="demo"
<h2 1. class绑定: :class='xxx'</h2
<p :class="myClass" xxx是字符串</p
<p :class="{classA: hasClassA, classB: hasClassB}" xxx是对象</p
<p :class="['classA', 'classB']" xxx是数组</p
<h2 2. style绑定</h2
<p :style="{color:activeColor, fontSize}" :style="{ color: activeColor, fontSize: fontSize + 'px' }"</p
<button @click="update" 更新</button
</div
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" </script
<script type="text/javascript"
new Vue({
el: '#demo',
data: {
myClass: 'classA',
hasClassA: true,
hasClassB: false,
activeColor: 'red',
fontSize: '20px'
},
methods: {
update () {
this.myClass = 'classB'
this.hasClassA = !this.hasClassA
this.hasClassB = !this.hasClassB
this.activeColor = 'yellow'
this.fontSize = '30px'
}
}
})
</script
</body
</html 条件渲染
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<title 08_条件渲染</title
</head
<body
<!--
1. 条件渲染指令
v-if
v-else
v-show
2. 比较v-if与v-show
如果需要频繁切换 v-show 较好
--
<div id="demo"
<p v-if="ok" 表白成功</p
<p v-else 表白失败</p
<hr
<p v-show="ok" 求婚成功</p
<p v-show="!ok" 求婚失败</p
<button @click="ok=!ok" 切换</button
</div
<script type="text/javascript" src="../js/vue.js" </script
<script type="text/javascript"
new Vue({
el: '#demo',
data: {
ok: true,
}
})
</script
</body
</html 事件处理
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<title 07_事件处理</title
</head
<body
<!--
1. 绑定监听:
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参: event
隐含属性对象: $event
2. 事件修饰符:
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键
--
<div id="example"
<h2 1. 绑定监听</h2
<button @click="test1" test1</button
<button @click="test2('abc')" test2</button
<button @click="test3('abcd', $event)" test3</button
<h2 2. 事件修饰符</h2
<!-- 阻止事件默认行为 --
<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" @click.prevent="test4" 百度一下</a
<div style="width: 200px;height: 200px;background: red" @click="test5"
<div style="width: 100px;height: 100px;background: blue" @click.stop="test6" </div
<!-- 阻止事件冒泡 --
</div
<h2 3. 按键修饰符</h2
<!-- enter键/13 --
<input type="text" @keyup.13="test7"
<input type="text" @keyup.enter="test7"
</div
<script type="text/javascript" src="../js/vue.js" </script
<script type="text/javascript"
new Vue({
el: '#example',
data: {
},
methods: {
test1(event) {
alert(event.target.innerHTML)
},
test2 (msg) {
alert(msg)
},
test3 (msg, event) {
alert(msg+'---'+event.target.textContent)
},
test4 () {
alert('点击了链接')
},
test5 () {
alert('out')
},
test6 () {
alert('inner')
},
test7 (event) {
console.log(event.keyCode)
alert(event.target.value)
}
}
})
</script
</body
</html 表单数据绑定
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<title 08_表单输入绑定</title
</head
<body
<!--
1. 使用v-model(双向数据绑定)自动收集数据
text/textarea
checkbox
radio
select
--
<div id="demo"
<!-- 阻止表单自动提交，手动ajax提交 --
<form action="/xxx" @submit.prevent="handleSubmit"
<span 用户名: </span
<input type="text" v-model="username" <br
<span 密码: </span
<input type="password" v-model="pwd" <br
<span 性别: </span
<input type="radio" id="female" value="女" v-model="sex"
<label for="female" 女</label
<input type="radio" id="male" value="男" v-model="sex"
<label for="male" 男</label <br
<span 爱好: </span
<input type="checkbox" id="basket" value="basket" v-model="likes"
<label for="basket" 篮球</label
<input type="checkbox" id="foot" value="foot" v-model="likes"
<label for="foot" 足球</label
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes"
<label for="pingpang" 乒乓</label <br
<span 城市: </span
<select v-model="cityId"
<option value="" 未选择</option
<option :value="city.id" v-for="(city, index) in allCitys" :key="city.id" {{city.name}}</option
</select <br
<span 介绍: </span
<textarea rows="10" v-model="info" </textarea <br <br
<input type="submit" value="注册"
</form
</div
<script type="text/javascript" src="../js/vue.js" </script
<script type="text/javascript"
new Vue({
el: '#demo',
data: {
username: '',
pwd: '',
sex: '男',
likes: ['foot'],
allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
cityId: '2',
info: ''
},
methods: {
handleSubmit () {
console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
alert('提交注册的ajax请求')
}
}
})
</script
</body
</html 生命周期
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<title 09_Vue实例_生命周期</title
</head
<body
<!--
1. vue对象的生命周期
1). 初始化显示
* beforeCreate()
* created()
* beforeMount()
* mounted()
2). 更新状态
* beforeUpdate()
* updated()
3). 销毁vue实例: vm.$destory()
* beforeDestory()
* destoryed()
2. 常用的生命周期方法
created()/mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器
--
<div id="test"
<button @click="destroyVue" destory vue</button
<p v-if="isShow" 尚硅谷IT教育</p
</div
<script type="text/javascript" src="../js/vue.js" </script
<script type="text/javascript"
new Vue({
el: '#test',
data: {
isShow: true
},
beforeCreate() {
console.log('beforeCreate()')
},
created() {
console.log('created()')
},
beforeMount() {
console.log('beforeMount()')
},
mounted () {
console.log('mounted()')
// 执行异步任务
this.intervalId = setInterval(() = {
console.log('-----')
this.isShow = !this.isShow
}, 1000)
},
beforeUpdate() {
console.log('beforeUpdate()')
},
updated () {
console.log('updated()')
},
beforeDestroy() {
console.log('beforeDestroy()')
// 执行收尾的工作
clearInterval(this.intervalId)
},
destroyed() {
console.log('destroyed()')
},
methods: {
destroyVue () {
this.$destroy()
}
}
})
</script
</body
</html 过渡，动画
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<title 10_过渡&动画1</title
<style
/*指定过渡样式*/
.xxx-enter-active, .xxx-leave-active {
transition: opacity 1s
}
/*指定隐藏时的样式*/
.xxx-enter, .xxx-leave-to {
opacity: 0;
}
.move-enter-active {
transition: all 1s
}
.move-leave-active {
transition: all 3s
}
.move-enter, .move-leave-to {
opacity: 0;
transform: translateX(20px)
}
</style
</head
<body
<!--
1. vue动画的理解
操作css的trasition或animation
vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
1). 在目标元素外包裹<transition name="xxx"
2). 定义class样式
1 . 指定过渡样式: transition
2 . 指定隐藏时的样式: opacity/其它
3. 过渡的类名
xxx-enter-active: 指定显示的transition
xxx-leave-active: 指定隐藏的transition
xxx-enter: 指定隐藏时的样式
--
<div id="demo"
<button @click="show = !show" Toggle</button
<transition name="xxx"
<p v-show="show" hello</p
</transition
</div
<hr
<div id="demo2"
<button @click="show = !show" Toggle2</button
<transition name="move"
<p v-show="show" hello</p
</transition
</div
<script type="text/javascript" src="../js/vue.js" </script
<script type="text/javascript"
new Vue({
el: '#demo',
data: {
show: true
}
})
new Vue({
el: '#demo2',
data: {
show: true
}
})
</script
</body
</html 过滤器
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<title 11_过滤器</title
</head
<body
<!--
1. 理解过滤器
功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 编码
1). 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
2). 使用过滤器
<div {{myData | filterName}}</div
<div {{myData | filterName(arg)}}</div
--
<!--需求: 对当前时间进行指定格式显示--
<div id="test"
<h2 显示格式化的日期时间</h2
<p {{time}}</p
<p 最完整的: {{time | dateString}}</p
<p 年月日: {{time | dateString('YYYY-MM-DD')}}</p
</div
<script type="text/javascript" src="../js/vue.js" </script
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js" </script
<script
// 定义过滤器
Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
return moment(value).format(format);
})
new Vue({
el: '#test',
data: {
time: new Date()
},
mounted () {
setInterval(() = {
this.time = new Date()
}, 1000)
}
})
</script
</body
</html <!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<title 12_指令_自定义指令</title
</head
<body
<!--
1. 注册全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
2. 注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3. 使用指令
v-my-directive='xxx'
--
<!--
需求: 自定义2个指令
1. 功能类型于v-text, 但转换为全大写
2. 功能类型于v-text, 但转换为全小写
--
<div id="test"
<p v-upper-text="msg" </p
<p v-lower-text="msg" </p
</div
<div id="test2"
<p v-upper-text="msg" </p
<p v-lower-text="msg" </p
</div
<script type="text/javascript" src="../js/vue.js" </script
<script type="text/javascript"
// 注册一个全局指令
// el: 指令所在的标签对象
// binding: 包含指令相关数据的容器对象
Vue.directive('upper-text', function (el, binding) {
console.log(el, binding)
el.textContent = binding.value.toUpperCase()
})
new Vue({
el: '#test',
data: {
msg: "I Like You"
},
// 注册局部指令
directives: {
'lower-text'(el, binding) {
console.log(el, binding)
el.textContent = binding.value.toLowerCase()
}
}
})
new Vue({
el: '#test2',
data: {
msg: "I Like You Too"
}
})
</script
</body
</html 本文主要介绍了vue常用指令代码实例，更多关于vue常用指令请查看下面的相关链接
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-09-11
，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
