Vue的双向绑定

处理用户输入

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中进行两步操作,第一步:给元素添加事件,第二步给事件加方法

1. 在Vue中添加事件叫做事件绑定使用@click="方法名"如:

<button @click="add()">按钮</button>```

2. methods(方法)
   将方法抽离出来放在对应的位置

<script>
export default{
    name:"app",
    data(){
        return {
          counter: 0
        };   //这里要加分号
    },   //这里要加逗号
    methods:{
        // 在这里存放方法
        add:function(){
           //方法内容
           this.counter++
        }
    }
}
</script>

使用data定义的变量时要在前面加this,@click=“add()”,括号里可以传递参数

事件修饰符(与js中的作用一样)

1. 阻止冒泡事件

<div @click.stop="fn2"></div>

2. 捕获事件

<div class="div2" @click.capture="fn2"></div>

3. 阻止默认事件

<div class="div2" @click.prevent="fn2"></div>

图片和案例均来自于优课达