vue指令大全

1.为原生属性绑定数据

v-bind:属性名=“数据名”/：属性名=“数据名”
如：

<a v-bind:href="url">或者<a :href="url">

2.为标签绑定事件

v-on:事件名=“要执行的少量代码/methods中的函数名/methods中的函数名（实参）”或者语法糖@代表v-on:

<template>
<div>
 <p>你点击了这么多次{{count}}</p>
 <!-- <button v-on:click="count++">+1</button>
 <button v-on:click="addFn">+1</button>
 <button v-on:click="addcountFn(5)">+{{ccishu}}</button> -->
<button @click="count++">+1</button>
 <button @click="addFn">+1</button>
 <button @click="addcountFn(5)">+{{ccishu}}</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      count:1,
      ccishu:"打打"
    };
  },
  methods:{
    addFn(){
      this.count++
    },
    addcountFn(num){
      this.count+=num
    }
  }
}
</script>

3.vue事件修饰符

stop:阻止冒泡
prevent:阻止默认行为
once:读on ce 表明函数执行一次

4.vue按键修饰符(检测哪个按键)

如@keydown.enter=“函数”：回车 @keydown.esc=“函数”’

5.v-model:与表单中的value值进行绑定，如

** 特殊情况：**

select标签内，v-model绑定的是selected值，根据selected值来改变绑定的数据变量

checkbox类型绑定的是checked（true/false），checkbox可以多选，导致这个绑定的数据需要是一个数组，若true则将此value值加入绑定的数组变量中

radio绑定的是checked（true/false），若true则将对应的value值赋值给绑定的数据变量

<template>
  <div>
    <div><span>你来自</span>
    <select name="da" v-model="earh">
      <option>广东</option>
      <option>山东</option>
      <option>北京</option>
      <option>广西</option>
    </select></div>
    <div><span>性别</span>
      <input type="radio" name="sex" v-model="sexn" value="nan">男
      <input type="radio" name="sex" v-model="sexn" value="nv">女
    </div>
    <div><span>爱好</span>
      <input type="checkbox" v-model="cb" value="game">game
      <input type="checkbox" v-model="cb" value="music">music
      <input type="checkbox" v-model="cb" value="sport">sport
      <input type="checkbox" v-model="cb" value="swim">swim
    </div>
 </div>
</template>

<script>
export default {
  data() {
    return {
      earh:"",
      sexn:"",
      cb:[]
    };
  },
}
</script>

<style>

</style>

model修饰符
.number转场成数字
.trim：去除左右两边空格后把值赋予给vue数据变量
.lazy：等表单失去焦点时候，才赋值给vue数据变量

6.v-if\v-show

v-if:在DOM树上移除对象
v-show：通过css的display隐藏或者显示

7.v-for

想在谁身上遍历就写在谁身上 v-for（（变量名称，index） in 目标对象结构）