Vue指令

男娘i 2023-06-09 07:59 20阅读 0赞

## v-text ##

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

## v-html ##

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

## 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标签的默认行为

## 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>