vue2.0 day2
基础模板
{{}}-绑定text/data
v-html-绑定html
v-text-绑定text
v-cloak - 解决浏览器闪烁/解决vm实例加载失败的情况。
[v-cloak]{display:none}属性
v-bind:style="color:red"
:style="color:red"
span[ref=role] --vue里面的自定义属性事件
v-on:click="doTab"
@click="doTab"
事件进阶-修饰符
事件冒泡：事件向上传递.prevent
告诉 v-on 指令对于触发的事件调用 event.preventDefault()
.stop
阻止默认:event.stopPropagation()
.capture
即元素自身触发的事件在此处理，然后才交由内部元素进行处理
.self
self可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行
.once
.passive
v-on:click.prevent.self 会阻止所有的点击
v-on:click.self.prevent 只会阻止对元素自身的点击
总结
1 .模板：{{}}语法,除了绑定数据，也可能绑定html
2.div[v-bind:title=msg]/div[:title=msg] --绑定属性的缩写
3.button[v-on:click=submit]/button[@click=submit]{click} -绑定那个事件/绑定事件的缩写
4.事件修饰符 --阻止事件默认 --event.preventDefault() --.prevent
5.事件修饰符 --阻止事件冒泡 --event.stopPropagation()/非IE --.stop
6.其他事件操作符 --.capture --.self --.once --passive
7.
v-on:click.prevent.self 会阻止所有的点击
v-on:click.self.prevent 只会阻止对元素自身的点击
demo2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2.0 day2</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<style>
[v-cloak]{display: none;}
*{margin:0;padding: 0;}
body{font-size: 16px;color: black;}
a{text-decoration: none; color: black;}
#app{}
#app form p label{
display: inline-block;
width: 64px;
height: 20px;
text-align: right;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div :style="style">{{msg}}</div>
<form action="#">
<p>
<label for="username">用户名：</label>
<input type="text" v-model="json.username" name="username" id="username">
</p>
<p>
<label for="passworld">密码：</label>
<input type="passworld" v-model="json.passworld" name="passworld" id="passworld">
</p>
<p>
<input type="submit" name="submit" v-model="json.submit" @click.prevent="check()">
</p>
</form>
<div v-html="html">
</div>
<button v-on:click="submit">点击</button>
<button @click="submit">click</button>
<p @click="submit" style="padding: 20px;border:1px solid black; width: 200px;">
<a href="http://www.baidu.com" target="_blank" @click.prevent.stop="submit">baidu</a>
</p>
</div>
<script>
window.onload=function(){
new Vue({
el:'#app',
data:{
json:{
submit:'提交',
passworld:'',
username:''
},
style:'color:red',
html:'<span>123</span>',
msg:'hello vue'
},
filters:{
// 码值表
},
methods:{
submit:function(){
alert(this.msg)
},
check:function() {
if(this.json.username=='') {
alert("请输入用户名!");
return false;
}
if(this.json.password==''){
alert("请输入登录密码!");
return false;
}
return true;
}
}
});
}
</script>
</body>
</html>