<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[v-cloak]{display:none;}
</style>
</head>
<body>
<div id="app">
1. <!-- v-cloak 网速不好 能看到表达式 解决 插值表达式闪烁的问题 -->
<p v-cloak>----{{msg}}+++++</p> <!-- 插值表达式 只会替换自己的这个占位符 不会把整个元素的内容清空 -->
2.<!-- v-text 没有闪烁问题 -->
<h2 v-text="msg">---+++</h2>
3.<!-- v-text会覆盖元素中 原有的内容 -->
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
<input type="button" value="按钮" v-bind:title="mytitle">
<!-- v-bind可以写合法的js表达式 v-bind:xxx 简写 :xxx -->
<input type="button" value="按钮" v-bind:title="mytitle+'123456'"> <br>
<!-- v-on:xxxx 缩写 @xxx -->
<input type="button" value="显示" v-on:click="show">
<!--
.stop阻止冒泡
.prevent阻止默认事件
.capture 事件捕获 给元素天际一个监听器 当元素发生冒泡时 先触发改元素的修饰符元素 若有多个该修饰符 由外而内触发
谁有该事件修饰符 就先触发谁
.self 只有点击当前元素 才会触发事件处理函数
.once 事件只触发一次
-->
1.<div class="divHandler" @click="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
2. a href="http://www.baidu.com" @click.prevent="linkClick">有问题去百度</a>
3.<div class="divHandler" @click.capture="divHandler">
<input type="button" value="戳他" @click="btnHandler">
</div>
4. <!-- 点击btnHandler 阻止了 btnHandler的冒泡-->
<div class="divHandler" @click.self="divHandler">
<input type="button" value="戳他" @click="btnHandler">
</div>
5.<!-- once 只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题去百度</a>
6.<!--
stop 和self的区别
self 只阻止自己身上冒泡行为的触发，并不会 真正阻止冒泡行为
-->
<div @click="div1">
<div @click.self="div2">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'123',
msg2:'<h1>我是h1</h1>',
mytitle:'我是新的title'
},
methods:{
show:function(){
alert('hello')
}
}
})
</script>
</body>
</html>
网友评论