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只触发一次事件处理函数、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>


你可能感兴趣的:(VUE)