Vue绑定指令

属性绑定指令

基本用法：

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。

<!-- 假设有如下的 data 数据：
data: {
    
    
  inputValue: "请输入内容",
  imgSrc: "https://cn.vuejs.org/images/logo.png"
}
-->

<!-- 使用 v-bind 指令， 为 input 的 placeholder 动态绑定属性值 -->
<input type="text" v-bind:placeholder="inputValue">
<!-- 也可以简写为: -->
<!-- <input type="text" :placeholder="inputValue"> -->
<br>
<!-- 使用 v-bind 指令， 为 img 的 src 动态绑定属性值 -->
<img v-bind:src="imgSrc" alt="" >
<!-- 也可以简写为: -->
<!-- <img :src="imgSrc" alt="" > -->

绑定CLass：

• 对象语法：

<!-- 假设有如下的 data 数据：
data: {
  isActive: true,
}
 -->
 <!-- 下面的语法表示 当isActive为true时，active这个类名 存在，否则不存在 -->
<div v-bind:class="{ active: isActive }"></div>

• 数组语法：

<!-- 假设有如下的 data 数据：
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
 -->
 <!-- 下面的语法 -->
<div v-bind:class="[activeClass, errorClass]"></div>
<!-- 渲染为:  -->
<div class="active text-danger"></div>

绑定内联样式：

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

• 对象语法：

<!-- 假设有如下的 data 数据：
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
-->
<div v-bind:style="styleObject"></div>

• 数组语法：

<!-- 假设有如下的 data 数据：
data: {
  baseStyles: {
    color: 'red',
    fontSize: '13px'
  },
  overridingStyles:{
    margin: '40px',
    height: '500px'
  }
}
-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

事件绑定指令

基础用法

我们可以使用 v-on指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click=“methodName” 或使用快捷方式 @click=“methodName”,如有疑问，官方事件绑定

<div id="app">
  <button @click="handlerClick">Add 1</button>
  <p>The button above has been clicked {
   
   { counter }} times.</p>
</div>

Vue.createApp({
    
    
  data() {
    
    
    return {
    
    
      counter: 0
    }
  },
  methods: {
    
    
    handlerClick (){
    
    
      this.counter += 1
    }
  }
}).mount('#app')

事件传参

• 如果想要给事件传递参数，那么只需要在事件调用的小括号中传入即可
• 如果想要访问原始的 DOM 事件，可以用特殊变量 $event 把它传入方法

<div id="app">
  <button @click="handlerClick('Hello WanLum', $event)">Add 1</button>
  <p>The button above has been clicked {
   
   { counter }} times.</p>
</div>

Vue.createApp({
    
    
  data() {
    
    
    return {
    
    
      counter: 0
    }
  },
  methods: {
    
    
    handlerClick (str, event){
    
    
      console.log(str, event);
    }
  }
}).mount('#app')

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符：

!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

双向绑定指令

概述

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

简单使用

<!-- 假设在data中定义这样的数据:
  data() {
    return {
      username: "Jerry",
      province: "1"
    }
  }
 -->

<p>用户名：{
   
   { username }}</p>
<input type="text" v-model="username"/>

<p>选中的省份：{
   
   { province }}</p>
<select v-model="province">
  <option value="">请选择</option>
  <option value="1">北京</option>
  <option value="2">河北</option>
  <option value="3">黑龙江</option>
</select>

修饰符

<!-- 假设在data中定义这样的数据:
  data() {
    return {
      n1: "",
      n2: ""
    }
  }
 -->

<input type="text" v-model.number="n1"/> +
<input type="text" v-model.number="n2"/> =
<span>{
   
   { n1 + n2 }}</span>