vue指令（v-bind、v-on、v-model）_v-on和v-bind-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_59185329/article/details/126942392

vue指令

1、v-bind
2、v-on
3、v-model
4、事件修饰符

1、v-bind

v-bind：属性绑定
（1）引号里不加引号，是data里的数据
（2）如果使用字符串需要给字符串加上引号
（3）可以写表达式
（4）可以是调用方法，拿到方法的返回值
可以简写为 :属性名=“变量”

<div id="app">
    <!-- 1 -->
    <p v-bind:type="type"></p>
    <!-- 2 -->
    <p v-bind:type="'type'"></p>
    <!-- 3 -->
    <p v-bind:type="type+'p'"></p>
    <!-- 4 -->
    <p v-bind:type="getType()"></p>
    <!-- 简写 -->
    <p :type="type"></p>
  </div>

<script>
  let vm = new Vue({
    el:"#app",
    data:{
      type:'p-type'
    },
    methods:{
      getType(){
        return 'getType'
      }
    }
  })
</script>

2、v-on

v-on：事件绑定
可以简写为 @事件类型=“事件处理程序”

<button v-on:click="log">点我</button>
    <!-- 简写 -->
    <button @click="log">简写</button>

<script>
  let vm = new Vue({
    el:"#app",
    data:{
      tip:"pTip",
    },
    methods:{
      log(){
        console.log(this);
        console.log(this.tip);
      }
    }
  })
</script>

3、v-model

v-model：数据双向绑定（双向：view层和model层相互作用）
注意：绑定的是表单控件
案例：实现计算器功能

<body>
  <div class="app">
    <input type="text" v-model:value="value1">
    <!-- select的value值是option的文本，如果option有value值，select的value值和option的value值一样 -->
    <select v-model:value="option">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
    </select>
    <input type="text" v-model:value="value2">
    <button @click="add">=</button>
    <input type="text" v-model="value3">
  </div>
</body>
<script>
  let vm = new Vue({
    el:'.app',
    data:{
      value1:'',
      value2:'',
      value3:'',
      option:'+',
    },
    methods:{
      add(){
        switch(this.option){
          case "+":
            this.value3 = Number(this.value1) + Number(this.value2);
            break;
          case "-":
            this.value3 = Number(this.value1) - Number(this.value2);
            break;
          case "*":
            this.value3 = Number(this.value1) * Number(this.value2);
            break;
          case "/":
            this.value3 = Number(this.value1) / Number(this.value2);
            break;
        }
        // this.value3 = eval(Number(this.value1) +this.option+ Number(this.value2));

      }
    }
  })
</script>

4、事件修饰符

（1）.stop 阻止冒泡
（2）.prevent 阻止默认事件
（3）.capture 添加事件侦听器时使用事件捕获模式
（4）.self 只当事件在该元素本身触发时触发回调
（5）.once 事件只触发一次
冒泡：由里到外
捕获：由外到里

<body>
  <div id="app">
    冒泡
    <header @click="get3">
      3333
      <aside @click="get2">
        2222
        <button @click="get1">点我1111</button>  
        <!-- 111111,222222,333333 -->
      </aside>
    </header>
     阻止冒泡
     <header @click="get3">
      3333
      <aside @click="get2">
        <!-- 22222,33333 -->
        2222
        <button @click.stop="get1">点我1111</button>  
        <!-- 111111 -->
      </aside>
    </header>
     捕获
     <header @click.capture="get3">
      3333
      <aside @click.capture="get2">
        2222
        <button @click.capture="get1">点我1111</button>  
        <!-- 333333,222222,111111 -->
      </aside>
    </header>
    捕获 从外到里
    <header @click.capture="get3">
      3333
      <aside @click.capture="get2">
        <!-- 333333,222222 -->
        2222
        <button @click="get1">点我1111</button>  
        <!-- 111111,222222,333333 -->
      </aside>
    </header>
    self
    <header @click.capture="get3">
      3333
      <aside @click.self="get2">
        <!-- 333333 222222-->
        2222
        <button @click.capture="get1">点我1111</button>  
        <!-- 333333 111111-->
      </aside>
    </header>
    once
    <header @click="get3">
      3333
      <aside @click="get2">
        2222
        <button @click.once="get1">点我1111</button>  
        <!-- 111111,222222,333333 -->
        <!-- 再点 222222,333333 -->
      </aside>
    </header>
    阻止默认事件
    <a href="https://www.baidu.com" @click.prevent="get1">百度一下</a>
    阻止默认和只执行一次
    <a href="https://www.baidu.com" @click.prevent.once="get1">百度一下</a>
    <!-- 第一次点击不跳转，之后跳转，只可以阻止一次的默认事件 -->
  </div>
</body>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
    },
    methods:{
      get1(){
        console.log(111111);
      },
      get2(){
        console.log(222222);
      },
      get3(){
        console.log(333333);
      },
    }
  })
</script>