样式绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title></title>
<style>
.a{
color: aquamarine;
}
.b{
color: darkorange;
}
.c{
font-size: 30px;
}
</style>
</head>
<body>
<div id="a">
<ul>
<li>
<h3>样式一</h3>
<div :class="xa">{{msg}}</div>
</li>
<li>
<h3>样式二</h3>
<div :class="xb">{{msg}}</div>
</li>
<li>
<h3>样式三</h3>
<div :class="xc">{{msg}}</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#a",
data() {
return {
msg:"hello",
xa:'a',
xb:'b',
xc:['a','c']
};
}
});
</script>
</html>
事件处理器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="a">
<ul>
<li>
<h3>防止事件冒泡</h3>
<div style="height: 400px;width: 400px;background-color:cornflowerblue ;" @click="a">
<div style="height: 300px;width: 300px;background-color:#7FFFD4;" @click="b">
<div style="height: 200px;width: 200px;background-color:#FF8C00;" @click="c">
<div style="height: 100px;width: 100px;background-color:darkolivegreen;" @click.stop="d">
</div>
</div>
</div>
</div>
</li>
<li>
<h3>click 事件只能点击一次</h3>
{{qqmsg}}<br>
<input type="text" v-on:keydown.enter="send" v-model="msg" />
<button @click.once="send">ok</button>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#a",
data() {
return {
msg:"hello",
qqmsg:null
};
},
methods:{
a(){
alert('a');
},
b(){
alert('b');
},
c(){
alert('c');
},
d(){
alert('d');
},
send(){
this.qqmsg=this.msg;
this.msg = null;
}
}
});
</script>
</html>
事件修饰符
在没加上.stop之前点击绿色区域弹出d后,接着又会弹出c,b,a;
在加上.stop后就不会再出现冒泡事件了
@click.stop=“d”
click 事件只能点击一次
在点击ok之后ok就不能再用了
还有一写其他的用法:
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
按键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
Vue为最常用的按键提供了别名
<!-- 同上 -->
<input v-on:keyup.enter="submit">
全部的按键别名:
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="a">
<ul>
<li>
<h3>表单的复选框</h3>
<div v-for="item,index in hobby">
<input type="checkbox" v-model="checkids" name="hobby" :value="item.id"/>
{{item.name}}
</div>
{{checkids}}
</li>
<li>
<h3>表单的下拉框</h3>
<select name="likes" v-model="selectid">
<option v-for="item,index in hobby" :value="item.id">{{item.name}}</option>
</select>
{{selectid}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#a",
data() {
return {
hobby:[{
id:1,name:'吃'
},{
id:2,name:'睡'
},{
id:3,name:'玩'
}],
checkids:[],
selectid:null
};
}
});
</script>
</html>
自定义指令
vue组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="a">
<ul>
<li>
<h3>局部vue组件</h3>
<my-button></my-button>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#a",
data() {
return {
msg:"aaa"
};
},
components:{
'my-button':{
template:'<button @click="doa">自定义按钮,被a点击了{{n}}次</button>',
data() {
return {
n:0
};
},
methods:{
doa(){
this.n++;
}
}
}
}
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="a">
<ul>
<li>
<h3>局部vue组件</h3>
<my-button></my-button>
</li>
<li>
<h3>父组件传值子组件</h3>
<my-button m="狗子"></my-button>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#a",
data() {
return {
msg:"aaa"
};
},
components:{
'my-button':{
props:['m'],
template:'<button @click="doa">自定义按钮,被{{m}}点击了{{n}}次</button>',
data() {
return {
n:0
};
},
methods:{
doa(){
this.n++;
}
}
}
}
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="a">
<ul>
<li>
<h3>局部vue组件</h3>
<my-button></my-button>
</li>
<li>
<h3>父组件传值子组件</h3>
<my-button m="狗子"></my-button>
</li>
<li>
<h3>子组件传值父组件</h3>
<my-button @three-click="dob"></my-button>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#a",
data() {
return {
msg:"aaa"
};
},
methods:{
dob(n,x,y){
alert(n);
alert(x);
alert(y);
}
},
components:{
'my-button':{
props:['m'],
template:'<button @click="doa" >自定义按钮,被{{m}}点击了{{n}}次</button>',
data() {
return {
n:0
};
},
methods:{
doa(){
this.n++;
this.$emit('three-click',this.n,'哪吒','熬丙');
}
}
}
}
});
</script>
</html>
自定义事件
监听事件:
o
n
(
e
v
e
n
t
N
a
m
e
)
触
发
事
件
:
on(eventName) 触发事件:
on(eventName)触发事件:emit(eventName)
注1:Vue自定义事件是为组件间通信设计
vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定
父Vue实例->Vue实例,通过prop传递数据
子Vue实例->父Vue实例,通过事件传递数据
注2:事件名
不同于组件和prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
建议使用“短横线分隔命名”,例如:three-click
全局组件
Vue.component(
'my-button2', {
props: ['m'],
template: '<button @click="doa" >自定义按钮,被{{m}}点击了{{n}}次</button>',
data() {
return {
n: 0
};
},
methods: {
doa() {
this.n++;
this.$emit('three-click', this.n, '哪吒', '熬丙');
}
}
}
)