VUE之v-cloak、v-text、v-html、v-bind绑定属性、v-on事件绑定、.stop阻止冒泡.prevent阻止默认.capture捕获触发事件v-model.self、 .once

最新推荐文章于 2024-07-05 11:27:33 发布

古雅学长

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量402

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_46179813/article/details/106361859

版权

VUE 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

1、 VUE之v-cloak、v-text、v-html、v-bind绑定属性、v-on事件绑定机制、.stop阻止冒泡、.prevent阻止默认行为、.capture捕获触发事件、.self只有点击当前元素时候、 .once只触发一次事件处理函数、v-model双向数据绑定

1、v-cloak能够解决插值表达式闪烁的问题
2、v-text默认没有闪烁的问题，会覆盖元素中原有的内容，但是，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空
3、v-html会把内容中的HTML代码进行解析
4、v-bind是Vue中，提供的用于绑定属性的指令，注意：v-bind:指令可以被简写为 :要绑定的属性，v-bind中，可以写合法的JS表达式
5、Vue中提供了v-on:事件绑定机制、v-on缩写@
6、注意：在VM实例中，如果想要获取 data 上的数据，或者想要调用methods中的方法，必须通过this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示我们new出来的VM实例对象
7、使用 .stop 阻止冒泡，使用 .prevent 阻止默认行为，使用 .capture 实现捕获触发事件的机制(先运行装按钮的那个div)，使用 .self 实现只有点击当前元素时候，才会触发事件处理函数(.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为)、使用 .once 只触发一次事件处理函数
8、v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定，注意：v-model 只能运用在表单元素中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<input type="button" value="我用了v-bind:方法" v-bind:title="mytitle + '123'">
			<input type="button" value="我用了v-on:方法" v-on:click="show"><br><!-- v-on缩写@ -->
			<input type="button" value="浪起来" v-on:click="show1"><br><!-- v-on缩写@ -->
			<input type="button" value="停止" v-on:click="show2"><br><!-- v-on缩写@ -->
			<h4>{{msg1}}</h4>
			
			<input type="text" v-model="n1">
			<select name="" id="" v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="n2">
			<input type="button" value="=" @click="calc()">
			<input type="text" v-model="res">
		</div>
		
	</body>
	<script type="text/javascript">
		
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"123",
				mytitle:"这是自己定义的title",
				msg2:"猥琐发育，别浪~~~~",
				n1:"",
				n2:"",
				res:0,
				opt:"+"
			},
			methods:{
//注意：在VM实例中，如果想要获取 data 上的数据，或者 想要调用methods中的方法，
// 必须通过this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们new出来的VM实例对象
				show:function(){
					alert("我用了v-on:方法");
				},
				calc(){
					switch (this.opt) {
						case '+':this.res = parseInt(this.n1) + parseInt(this.n2)
						break;
						case '-':this.res = parseInt(this.n1) + parseInt(this.n2)
						break;
						case '*':this.res = parseInt(this.n1) + parseInt(this.n2)
						break;
						case '/':this.res = parseInt(this.n1) + parseInt(this.n2)
						break;
					}
				
				}
			}
		});
	</script>
</html>

古雅学长

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE之v-cloak、v-text、v-html、v-bind绑定属性、v-on事件绑定、.stop阻止冒泡.prevent阻止默认.capture捕获触发事件v-model.self、 .once

1、 VUE之v-cloak、v-text、v-html、v-bind绑定属性、v-on事件绑定机制、.stop阻止冒泡、.prevent阻止默认行为、.capture捕获触发事件、.self只有点击当前元素时候、 .once只触发一次事件处理函数1、v-cloak能够解决插值表达式闪烁的问题2、v-text默认没有闪烁的问题，会覆盖元素中原有的内容，但是，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空3、v-html会把内容中的HTML代码进行解析4、v-bind是Vue中，提供的
复制链接

扫一扫

专栏目录