Vue绑定（一）

最新推荐文章于 2024-04-19 18:32:11 发布

你比纸巾还能扯

最新推荐文章于 2024-04-19 18:32:11 发布

阅读量638

点赞数

分类专栏： Vue 文章标签： javascript vue.js es6

本文链接：https://blog.csdn.net/qq_43583920/article/details/105534319

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.插值绑定

插值绑定的方式比较简单，只要用大括号将要绑定的变量、值、表达式括住就可以实现，Vue将会获取计算后的值，并以文本的形式将其展示出来。

<p>{{ text }}</p>	//text为变量，若为10，则输出10

文本插值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>变量：{{ num }}</p>	 //10
			<p>表达式：{{ 5+5 }}</p>		//10
			<p>三目运算符：{{ true ? 10 : 100 }}</p>		//10
			<p>html代码（变量）：{{ html }}</p>	//html代码（变量）：<span>10</span>
			<p>html代码（表达式）：{{ '<span>10</span>' }}</p>	//html代码（表达式）：{{ '10' }}
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					num : 10,
					html : '<span>10</span>'
				}
			})
		</script>
	</body>
</html>

html代码（变量）和html代码（表达式）的区别

可以看到两者绑定的内容是一样的，但是输出的值却存在差异。对于后者来说，Vue优先解释了DOM节点的span，并且将“{{”和“}}”进行隔离，变成“ {{ ‘10’ }} ”，所以插值语法并没有生效，“ {{ ”和“ }} ”还被当做了p节点的文本内容。
可以看到，无论是变量、表达式、执行函数还是DOM代码，Vue都只将结果当做文本处理。另外，如果插值绑定的内容是变量或者与变量有关，当变量的值改变时，视图也会同步更新。

2.属性绑定

指令v-bind

Vue中提供的用于绑定属性的指令。其缩写形式为：

<input type="button" value="鼠标放在我上面试试" v-bind:title="title"/>

<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					title : '我出现啦!'
				}
			})
</script>

3.事件绑定

3.1指令v-on

Vue使用v-on指令监听DOM事件。其缩写形式为 @

<input type="button" value="点击我" v-on:click="press"/>

<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
				},
				methods:{
					press(){
						alert('你好')
					}
				}
			})
		</script>

3.2常见修饰符

名称	说明
.stop	当事件触发时，阻止事件冒泡
.prevent	当事件触发时，阻止元素默认行为
.capture	当事件触发时，阻止事件捕获
.self	限制事件仅作用于节点自身
.once	事件被触发一次后即解除监听
.passive	移动端，限制事件永不调用preventDefault()方法

3.3按键修饰符

对于键盘事件，Vue允许将按键键值作为修饰符来使用，如监听回车键（键值13）是否被按下，可以写成：

<input type="text" @keyup.13="console/.log($event)" />

别名修饰符	键值修饰符	对应按键
.delete	.8/.46	回格/删除
.tab	.9	制表
.enter	.13	回车
.esc	.27	退出
.space	.32	空格
.left	.37	左
.up	.38	上
.right	.39	右
.down	.40	下

使用按键别名，我们无须记住按键的键值即可实现对特定按键的监听事件，如监听回车键还可以这么写：

<input type="text" @keyup.enter="console.log($event)" />

你比纸巾还能扯

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Vue绑定（一）

1.插值绑定插值绑定的方式比较简单，只要用大括号将要绑定的变量、值、表达式括住就可以实现，Vue将会获取计算后的值，并以文本的形式将其展示出来。<p>{{ text }}</p> //text为变量，若为10，则输出10文本插值<!DOCTYPE html><html> <head> <meta charset="...
复制链接

扫一扫