基本指令

v-bind

  • 用于动态绑定某些属性
    • 动态绑定 a元素的 href属性
    • 动态绑定 img元素的 src属性
  • 介绍- -
    • 缩写:‘:‘
    • 预期:any(with argument) | Object(without argument)
    • 参数:attrOrProp(optinal)
    • 修饰符:
      • .camel —— 将ab-cc attribute 名转换成 abCc, 也就是把该属性转换成驼峰命令。
    • 用法:动态地绑定一个或多个attribute,或一个组件 prop 到表达式
绑定基本属性
  • 以img和a 标签动态绑定 src 和 href 为例子
  • 	<div id="app"></div>
    
      <template id="my-app">
          <img v-bind:src="imgUrl" alt="" srcset="">
          <a v-bind:href="link">百度一下</a>
          <!-- 语法糖写法 -->
          <img :src="imgUrl" alt="" srcset="">
          <a :href="link">百度一下</a>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          const App = {
              template: '#my-app',
              data() {
                  return {
                      imgUrl: "https://www.bing.com/th?id=OIP.gyU79QB8088FwxWo89CCCwHaEy&w=310&h=201&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
                      link: "https://www.baidu.com"
                  };
              }
          }
          Vue.createApp(App).mount("#app");
    	</script>
    
  • 这个例子中,href 和 src 动态绑定地是 data中地数据。因为 vue地响应式系统,当变量发生改变,会改变依赖该变量地所有数据,并重新渲染。所以,href 和 src 始终是和变量的值是相同的。
绑定class
  • 在开发中,有时候class元素是动态的,比如:
    • 当数据为某个状态时,字体显示红色
    • 当数据另一个状态时,字体显示黑色
对象语法
  • 	<style>
          .active {
              color: red;
          }
      </style>
      <div id="app"></div>
    
      <template id="my-app">
          <!-- 对象语法 {'active':boolean}, 可以有多个简直对-->
          <div :class="{'active': isActive, 'title':true}">123123</div>
          <div :class="{active: isActive, title:true}">123123</div>
          <button @click="toggle">切换颜色</button>
    
          <!-- 默认class 和动态class结合 -->
          <div class="adsf bab" :class="{'active': isActive, 'title':true}" ></div>
    
          <!-- 将对象放在属性中 -->
          <div :class="classObj">123123</div>
    
          <!-- 将返回的对象放在method或计算属性中 -->
          <div :class="classObject()">123123</div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          const App = {
              template: '#my-app',
              data() {
                  return {
                      isActive: false,
                      classObj: {
                          active: true, 
                          title:true
                      }
                  };
              },
              methods: {
                  toggle() {
                      this.isActive = !this.isActive;
                  },
                  classObject() {
                      return {
                          active: true, 
                          title:true
                      };
                  }
              }
    
          }
          Vue.createApp(App).mount("#app");
      </script>
    
数组语法
  • 	<div id="app"></div>
    
      <template id="my-app">
          <div :class="['abc', title]">adsfa</div>
          <div :class="['abc', title, isActive?'active':'']">adsf</div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          const App = {
              template: '#my-app',
              data() {
                  return {
                      message: "Hello World!",
                      title: 'adfasdfas',
                      isActive: true
                  };
              }
          }
          Vue.createApp(App).mount("#app");
      </script>
    
绑定style
  • 利用 v-bind:style 来绑定一些CSS内联样式
  • CSS property 可以使用脱粉命名或短横线分隔
对象语法
  • 	<div id="app"></div>
    
      <template id="my-app">
          <div :style="{color: 'red', fontSize:'30px'}">hhhh</div>
          <div :style="{color: finalColor, fontSize: finalFontSize + 'px'}">hhhh</div>
          <div :style="finalStyleObj">hhhh</div>
          <div :style="getFinalStyleObj()">hhhh</div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          const App = {
              template: '#my-app',
              data() {
                  return {
                      message: "Hello World!",
                      finalColor: "red",
                      finalFontSize: 50,
                      finalStyleObj: {
                          fontSize: '500px',
                          fontWeight: 700,
                          backgroudColor: 'red'
                      }
                  };
              },
              methods: {
                  getFinalStyleObj() {
                      return {
                          fontSize: '500px',
                          fontWeight: 700,
                          backgroudColor: 'red'
                      };
                  }
              }
          }
          Vue.createApp(App).mount("#app");
      </script>	
    
数组语法
  • 	<div id="app"></div>
    
      <template id="my-app">
          <!-- 合并两个对象 -->
          <div :style="[style1, style2]">asdas</div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          const App = {
              template: '#my-app',
              data() {
                  return {
                      message: "Hello World!",
                      style1: {
                          fontSize: '20px'
                      },
                      style2: {
                          color: 'red'
                      }
                  };
              }
          }
          Vue.createApp(App).mount("#app");
      </script>
    
动态绑定属性
  • 在一些情况下,属性名称也需要时动态的
    • 前面的绑定的syle,class,src,href 都是固定的属性名称
    • 如果需要动态的属性名,则通过 :[属性名]="value"
  • 	<div id="app"></div>
    
      <template id="my-app">
          <!-- cba=kobe -->
          <div :[name]="value">绘画</div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          const App = {
              template: '#my-app',
              data() {
                  return {
                      message: "Hello World!",
                      name: 'cba',
                      value: 'kobe'
                  };
              }
          }
          Vue.createApp(App).mount("#app");
      </script>
    

v-on

  • 为了和用户进行交互,Vue提供了v-on指令,用于监听用户触发的各种事件。
    • 比如监听 点击、拖拽、键盘事件等等
  • v-on 的使用
    • 缩写:@
    • 预期:Function | Inline Statement | Object
    • 参数:event
    • 修饰符:
      • .stop —— 调用 event.stopPropagation(),阻止事件冒泡。
      • .prevent —— 调用 event.preventDefault(), 阻止默认行为
      • .capture —— 添加事件侦听器使用capture模式
      • .sele —— 只当事件是从侦听器绑定的元素本身触发时才触发回调
      • . —— 仅当事件时从特定键触发时才触发回调
      • .once —— 只触发一次回调
      • .left —— 只当点击鼠标左键时触发
      • .right —— 只当点击鼠标右键时触发
      • .middle —— 只当点击鼠标中键时触发
      • .passive —— 模式添加侦听器
    • 用法:绑定事件
基本用法
  • 监听点击、鼠标移动、监听多个事件
  • 	<div id="app"></div>
    
      <template id="my-app">
          <!-- v-on: 监听事件 -->
          <button v-on:click="btn1Click">按钮1</button>
          <button v-on:mousemove="mouseMove">按钮2</button>
    
          <!-- 绑定多个事件-->
          <button v-on="{click: btn1Click, mousemove: mouseMove}">sadf</button>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          const App = {
              template: '#my-app',
              data() {
                  return {
                      message: "Hello World!"
                  };
              },
              methods: {
                  btn1Click() {
                      console.log('click');
                  },
                  mouseMove() {
                      console.log('mouseMove');
                  }
              }
          }
          Vue.createApp(App).mount("#app");
      </script>
    
参数传递
  • 当通过methods中定义的方法,以供@click调用时,需要注意:
    • 如果该方法不需要额外的参数,那么方法后面不可以加 ()
      • 如果该方法本身中有一个参数,那么会默认将原生事件event参数传递进去
    • 如果需要传递某个参数,同时需要event对象,使用$event 传入事件对象
  • 	<template id="my-app">
          <!-- v-on: 监听事件 -->
          <!-- $event 可以获取到事件发生时候的事件对象 -->
          <button v-on:click="btn1Click($event, 'code')">按钮1</button>
          <button v-on:mousemove="mouseMove">按钮2</button>
    
          <!-- 绑定多个事件-->
          <button v-on="{click: btn1Click, mousemove: mouseMove}">sadf</button>
      </template>
    	methods: {
                  btn1Click(event, name) {
                      console.log(event, name);
                      console.log('click');
                  },
                  mouseMove() {
                      console.log('mouseMove');
                  }
               }
    
修饰符
  • 	<template id="my-app">
          <div @click="divClick">
              <button @click="btnClick">测试事件冒泡</button>
          </div>
    
          <!-- 通过修饰符 stop 阻止事件向 div冒泡 -->
          <div @click="divClick">
              <button @click.stop="btnClick">阻止事件冒泡</button>
          </div>
    
          <!-- 用于enter键被按下 -->
          <input type="text" @keyup.enter="enterKeyup">
      </template>