Vue指令

最新推荐文章于 2024-03-08 19:18:48 发布

lj深

最新推荐文章于 2024-03-08 19:18:48 发布

阅读量92

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/qq_37970097/article/details/102642718

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

v-text

v-text的作用跟插值表达式是一样的，但是不同的地方在于：v-text会覆盖元素中原本的内容，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空，而且v-text默认是没有闪烁问题的

<h4 v-text="msg"></h4>

v-html

v-html会解析字符串中的html代码

<h4 v-html="msg2"></h4>

v-bind（单向数据绑定）

是Vue中提供的用于绑定属性的指令
简写为：要绑定的属性

	<input type="button" value="按钮" v-bind:title="mytitle">
	//绑定title属性后，将会从data中找到mytitle，并将它的值赋值给title属性
	//简写
	<input type="button" value="按钮" :title="mytitle">

v-on

v-on是Vue里的事件绑定指令
格式：v-on:事件类型=“方法名” 例：v-on:click="show"
简写：@:事件类型="方法名"

<input type="button" value="按钮" v-on:click="show">
//简写
<input type="button" value="按钮"  @:click="show">

<script>
	var VM=new Vue({
		data:{
			mytitle:"这是我自定义的一个title"	
		}.
		methods:{
			show:function(){
				alert("hello");
			}
		}		
	})
</script>

事件修饰符

.stop      阻止冒泡
.prevent   阻止默认行为
.capture   实现捕获触发事件的机制
.self      实现只有点击当前元素的时候，才会触发事件处理函数
.once      只触发一次的处理函数 

.stop和.self的区别在于：.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为

//阻止a标签的默认行为
<!-- <a href="http://www.baidu.com" @click.prevent="linkClick">百度</a> -->

v-model（双向数据绑定）

v-bind 只能实现数据的单向绑定，从 M 自动绑定到  V ，无法实现数据的双向绑定
使用 v-model 指令，可以实现表单元素和  Model 中数据的双向数据绑定
注意：v-model 只能运用在表单元素中

<body>
	//当文本框输入数据时，n1的值会发生改变，p标签里的文本也会自动更新
	<p>{{n1}}</p>
	<input type="text" v-model="n1">
	<script>
		var VM = new Vue({
			data:{
				n1:""
			}
		})
	</script>
</body>

lj深

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令

v-textv-text的作用跟插值表达式是一样的，但是不同的地方在于：v-text会覆盖元素中原本的内容，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空，而且v-text默认是没有闪烁问题的<h4 v-text="msg"></h4>v-htmlv-html会解析字符串中的html代码<h4 v-html="msg2"></h4...
复制链接

扫一扫

专栏目录