1.v-bind

给dom标签的属性设置Vue变量

作用是动态绑定标签的属性

语法──v-bind:属性名="Vue变量"

简写成 :属性名="Vue变量"

<a v-bind:href="url">完整版写法</a>
<br />
<a :href="url">缩写法</a> 
  <!-- 中间部分代码省略 -->
   data() {
    return {
      url: "https://www.bilibili.com/",
    };
  }

2.v-on

给dom标签绑定事件

语法──v-on:事件类型="事件处理函数"

简写为@事件名="methods里的函数名"

加修饰符语法:@事件类型.修饰符="事件处理函数"

给事件传值语法-----:@事件名="methods里的函数名(实参)"

<button v-on:click="add">完整写法</button>
<button @click="add">缩写法</button>
   <!-- 中间部分代码省略 -->
    methods: {
    add() {
      alert("弹窗啦!");
    },
  }

3.v-model(双向绑定)

作用是:表单元素和变量的双向绑定

好处是:不需要手动操作dom获取value值

语法──v-model="变量名"

<input v-model="变量名" type="text" />

需要注意的是v-model在下拉菜单和复选框上使用,略有不同

3.1下拉菜单语法:

v-model写在select上，
value写在option上,
Vue变量关联value属性的值

<select v-model="city">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="wh">武汉</option>
    </select>
        <!-- 中间部分代码省略 -->
        data() {
    return {
      city: "wh",
    };
  }

3.2复选框

应用场景:数据收集,爱好,考试试卷

1.非数组──关联checked属性(统一当成boolean)

2.数组──关联value属性

爱好:
    抽烟<input type="checkbox" value="smoke" v-model="hobby">
    喝酒<input type="checkbox" value="drink" v-model="hobby">
    烫头<input type="checkbox" value="yellow" v-model="hobby">
        <!-- 中间部分代码省略 -->
  data() {
    return {
      hobby: ["smoke", "drink"],
    };
  }

3.3性别

性别:
    <input v-model="gender" value="male" type="radio" name="gander">男
    <input v-model="gender" value="female" type="radio" name="gander">女
    <!-- 中间部分代码省略 -->
     data() {
    return {
      gender:''
    };
  }

3.4文本域

 <textarea v-model="intro" cols="30" rows="10"></textarea>
<!-- 中间部分代码省略 -->
 data() {
    return {
     intro:''
    };
  }

注意:Vue变量初始值会影响表单的默认状态，因为双向数据绑定 - 互相影响

vue常用指令上篇