博主微信:xiaoyu1213hao 加微信,备注:前端Tree

解读–vue中的常用指令

vue框架 admin 101℃ 0评论

vue中有很多指令,有的是常用的,有的是不常用的,还有一些是自定义的。

那么什么是指令呢?

指令: 是一个特殊标记,Vue通过这个标记来增强HTML标签,也就是:让HTML具备了一些原本不具备的功能

一、v-model指令

解读 : v-model 用在表单元素中,用来实现双向数据绑定

作用:将文本框的值与 data中msg数据,绑定到一起,只要 文本框的值或msg 发生了改变,另一方都会自动改变

v-model 用在不同的表单元素中,有不同的功能 。。也就是input中的type等其他

当然v-model不能用在div这种非表单元素中。

代码:

<!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>
</head>
<body>
<div id=”app”>
<input type=”text” v-model=”msg” />
<input type=”checkbox” v-model=”isChecked” />
</div>

<script src=”./vue.js”></script>
<script>
const vm = new Vue({
el: ‘#app’,
data: {
msg: ‘Hello vue’,
isChecked: true
}
})
</script>
</body>
</html>

二、v-text和v-html指令

v-text:设置文本内容,类似于 innerText 的功能

v-html:设置html内容,类似于 innerHTML 的功能

这两个指令可以用在div标签中

<div v-text=”msg”></div>

<div v-html=”msg1″></div>

三、v-bind指令

如果要使用data中的数据,来动态绑定html属性的值,应该通过 v-bind 指令来绑定,而不是使用 插值表达式!!!

这个指令和v-model不同的是,v-model是用来动态绑定表单元素的,而v-bind是用来绑定普通标签的值

例如 :

<a v-bind:href=”msg”>标签</a> <img v-bind:src=”img” />

v-bind:href=”msg” 可以省略前面的v-bind 直接:href=”msg”来绑定

<!– 简化语法: –>
<a :href=”msg”>标签</a> <img :src=”img” />

<!– 错误演示: –>
<!– <img src=”img” /> –>
<!– <a href=”{{ msg }}”>标签</a> –>

vue实例中的数据 :展示

const vm = new Vue({
el: ‘#app’,
data: {
msg: ‘http://itcast.cn’,
img: ‘./imgs/a.png’
}
})

三、使用vue操作样式

使用vue我们可以操作class  还可以操作style 但是推荐使用 class

语法介绍:v-bind:class=“{}”

值是一个对象,对象中的键表示要添加的类名称键的值是一个布尔值,如果为true表示添加这个类;如果为false,表示移除这个类

例如:<p v-bind:class=”{ red: isRed, fz: true }”>{{ msg }}</p>

简写模式 : 可以省略v-bind <p :class=”{ red: isRed, fz: true }”>{{ msg }}</p>

<script>
const vm = new Vue({
el: ‘#app’,
data: {
msg: ‘操作样式’,
isRed: true,

activeColor: ‘green’,
fontSize: 50
}
})
</script>

四、使用vue绑定事件

绑定单击事件语法: v-on:click click表示事件名称
fn 表示 methods 配置项中的一个方法名字

例如 :<button v-on:click=”fn”>点我</button>

简化语法 :<button :click=”fn”>点我</button>

<script>
const vm = new Vue({
el: ‘#app’,
data: {
msg: ‘默认值’
},
// Vue中所有的方法,都应该放在 methods 配置项中
methods: {
fn: function() {
// 事件中的this为:当前Vue实例
// 在事件中,直接通过 this.数据名称 就可以使用 data 中的数据了
console.log(‘事件触发了’, this === vm, this.msg)
this.msg = ‘修改后的数据’
}
}
})
</script>

绑定事件的参数说明 :

1 如果不需要给事件传递参数,就不要添加小括号 ()
2 如果要给事件传递参数,应该添加小括号

例如 : <button @click=”fn(1, ‘a’, true)”>点我</button>

<script>
const vm = new Vue({
el: ‘#app’,
data: {
msg: ‘默认值’
},
methods: {
fn: function(arg1, arg2, arg3) {
console.log(‘参数:’, arg1, arg2, arg3)
// this.msg = ‘修改后的数据’
this.msg = arg2
}
}
})
</script>

注意:1 如果绑定事件的时候,没有添加小括号传递参数,在事件处理程序中直接通过第一个参数 e 就获取到事件对象了

2 如果绑定事件的时候,添加了小括号,此时无法直接在事件处理程序中获取到事件对象。如果要获取到事件对象,应该传入一个参数叫: $event。这个 $event 是Vue内部约定好的一个标记,就表示事件对象

<button @click=”fn($event, 123)”>点我</button>

<script>
const vm = new Vue({
el: ‘#app’,
data: {
msg: ‘默认值’
},
methods: {
fn: function(e, arg1) {
console.log(‘事件触发了’, e, arg1)
// console.log(‘事件触发了’, e.target.innerText)
}
}
})
</script>

四、使用vue中的指定 v-for

v-for的作用一般用于遍历数据用的,就是将data中的数据渲染的也页面中,使用v-for的时候,我们一定要使用:key=”item.id”

v-for=”item in list” 语法类似于 for-in
item 是我们自己随意执行的一个名称,表示数组的每一项
list 表示 data 中的数据

在标签中使用例子 :

<p v-for=”item in list”>{{ item }}</p>  in 也可以换成of

如果我们使用v-for想要获取 索引值 可以这么写 :

<p v-for=”(it, i) in list”>{{ i }} — {{ it }}</p>
<p v-for=”(item, index) in list”>{{ index }} — {{ item }}</p>

<script>
const vm = new Vue({
el: ‘#app’,
data: {
// list: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]
list: [
{ id: 1, name: ‘抽烟’ },
{ id: 2, name: ‘喝酒’ },
{ id: 3, name: ‘烫头发’ }
]
}
})
</script>

 

转载请注明:前端Tree » 解读–vue中的常用指令

喜欢 (1)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址