1. 样式绑定
- 基本样式绑定
v-bind
<span class="a">111</span><br>
<span class="b">222</span><br>
<span :class="a">111</span><br>
<span :class="b">222</span><br>
<style>
.a {
font-size: 36px;
}
.b {
color: red;
}
</style>
data() {
return {
a: 'a',
b: 'b'
}
}
- 样式二
使用驼峰命名法的格式 :style=“{fontSize:e}”
<span style="font-size: 60px;">111</span>
<span :style="{fontSize:e}">111</span>
data() {
return {
e: '60px'
}
}
2. 事件处理器
.stop
阻止单击事件冒泡.prevent
提交事件不再重载页面.capture
使用事件捕获模式.self
只当事件在该元素本身(而不是子元素)触发.once
事件只触发击一次
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<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>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
注: 什么是事件冒泡?
当事件发生后,事件源没有处理事件的能力,即处理事件的方法没有绑定到该事件源上,这个事件就会开始传播
例如: 当我们点击一个按钮,会产生一个事件,但这个按钮本身不能处理这个事件,事件必须从这个按钮传播出去,从而达到能够处理这个事件的代码中
在上图中存在四个嵌套的div
每个div都绑定有不同的点击事件
当我们点击最小的div时
依次的触发全部的点击事件
<div class="one" @click="do_one">
<div class="two" @click="do_two">
<div class="three" @click="do_three">
<div class="four" @click="do_four">
</div>
</div>
</div>
</div>
当我们使用.stop
阻止事件冒泡
此时每个div只会触发自己绑定的事件
<div class="one" @click.stop="do_one">
<div class="two" @click.stop="do_two">
<div class="three" @click.stop="do_three">
<div class="four" @click.stop="do_four">
</div>
</div>
</div>
</div>
<style>
.one {
height: 400px;
width: 400px;
background-color: #F00;
}
.two {
height: 300px;
width: 300px;
background-color: #0F0;
}
.three {
height: 200px;
width: 200px;
background-color: #0ff;
}
.four {
height: 100px;
width: 100px;
background-color: #FF0;
}
</style>
methods: {
do_one() {
alert("one");
},
do_two() {
alert("two");
},
do_three() {
alert("three");
},
do_four() {
alert("four");
}
}
3. form表单
<div id="app">
姓名:<input type="text" v-model="name"/><br>
密码:<input type="password" v-model="pwd"/><br>
年龄:<input type="text" v-model="age"/><br>
性别:
<input type="radio" name="sex" v-model="sex" value="0"/>男
<input type="radio" name="sex" v-model="sex" value="1"/>女<br>
爱好:
<span v-for="e in likes">
<input type="checkbox" v-model="mylikes" :value="e.id"/>{{e.name}}
</span><br>
类别:
<select v-model="mytype">
<option v-for="e in types" :value="e.id">{{e.name}}</option>
</select><br>
备注:<textarea rows="10" cols="20" v-model="remark"></textarea><br>
确认:<input type="checkbox" v-model="ok"/>
<span v-if="ok">
<button v-on:click="do_sub">提交</button>
</span>
<span v-else="">
<button v-on:click="do_sub" disabled>提交</button>
</span>
</div>
<script>
// 绑定边界
new Vue({
el: '#app',
data() {
return {
name: null,
pwd: null,
age: 0,
sex: 1,
likes: [
{id: 1, name: '篮球'},
{id: 2, name: '足球'},
{id: 3, name: '象棋'}
],
types: [
{id: 1, name: 'A'},
{id: 2, name: 'B'},
{id: 3, name: 'C'}
],
remark: '备注',
ok: false,
mylikes: [],
mytype: null
}
},
methods: {
do_sub() {
var obj = {
name: this.name,
pwd: this.pwd,
age: this.age,
sex: this.sex,
likes: this.mylikes,
type: this.mytype,
remark: this.remark,
ok: this.ok
}
console.log(obj)
}
}
})
</script>
4. 组件通信
- 父传子
通过props: ['m']
设置参数来实现自定义组件的传参
<div id="app">
<my-button m='zs'></my-button>
<my-button m='王五'></my-button>
</div>
<script>
// 绑定边界
new Vue({
el: '#app',
components: {
'my-button': {
props: ['m'],
template: '<button @click="do_sub">{{m}}提交{{n}}次</button>'
data() {
return {
n: 0
}
},
methods: {
do_sub() {
this.n++;
}
}
}
},
data() {
return {
}
}
})
</script>
- 子传父
通过自定义事件绑定方法传输参数给事件的方法
<div id="app">
<my-button m='zs' @three-click='do_three'></my-button>
<my-button m='王五' @four-click='do_four'></my-button>
</div>
<script>
// 绑定边界
new Vue({
el: '#app',
components: {
'my-button': {
props: ['m'],
template: '<button @click="do_sub">{{m}}提交{{n}}次</button>',
data() {
return {
n: 0
}
},
methods: {
do_sub() {
this.n++;
var name = 'ww';
var sex = '男';
var hobby = '小姐姐';
// 通过自定义事件来完成
if (this.n % 3 == 0)
this.$emit('three-click', name, sex, hobby);
if (this.n % 4 == 0)
this.$emit('four-click', name, hobby);
}
}
}
},
methods: {
do_three(a, b, c) {
console.log(a, b, c);
},
do_four(a, b, c) {
console.log(a, b, c);
}
},
data() {
return {
}
}
})
</script>