处理用户输入
v-model(双向绑定) --input
双向绑定就是我们在input框当中输入内容时,显示内容的地方也会随之改变
定义一个HTML代码
<template>
<!--这里的v-model="message"将input的值绑定-->
<p class="page">{{message}}</p>
<input type="text" v-model="message" placeholder="请输入你想输入的内容" />
</template>
定义要用到的变量
<script>
export default {
name: "app",
data() {
return {
message: ""
};
}
};
</script>
也就是改变input框中的值,message的值也将改变
v-model --checkbox
复选框上使用双向绑定,案例如下:
<template>
<div id="app">
<div class="prepare">
<div class="left">{{checkBox}}</div>
<div class="right">{{plan}}</div>
</div>
<div class="textarea">
<div class="left">
<input type="checkbox" id="run" value="跑步" v-model="checkBox">
<label for="run">跑步</label>
<input type="checkbox" id="yujia" value="瑜伽" v-model="checkBox">
<label for="yujia">瑜伽</label>
<input type="checkbox" id="yangwo" value="仰卧起坐" v-model="checkBox">
<label for="yangwo">仰卧起坐</label>
</div>
<div class="right">
<textarea placeholder="请输入你的健身计划" v-model="plan"></textarea>
</div>
</div>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
checkBox: [],
plan:""
};
}
};
</script>
因为复选框的内容可以看做一个数组,所以定义变量时可以将它定义成数组,每个选项都用v-model绑定
处理用户事件
方法
Vue中进行两步操作,第一步:给元素添加事件,第二步给事件加方法
- 在Vue中添加事件叫做事件绑定使用
@click="方法名"
如:
<button @click="add()">按钮</button>```
- methods(方法)
将方法抽离出来放在对应的位置
<script>
export default{
name:"app",
data(){
return {
counter: 0
}; //这里要加分号
}, //这里要加逗号
methods:{
// 在这里存放方法
add:function(){
//方法内容
this.counter++
}
}
}
</script>
使用data定义的变量时要在前面加this,@click=“add()”,括号里可以传递参数
事件修饰符(与js中的作用一样)
- 阻止冒泡事件
<div @click.stop="fn2"></div>
- 捕获事件
<div class="div2" @click.capture="fn2"></div>
- 阻止默认事件
<div class="div2" @click.prevent="fn2"></div>
图片和案例均来自于优课达