介绍

在vue内有着带有 “v-” 的前缀的特殊标签属性，为某些功能的实现提供便捷。

v-html

用于识别变量内的html片段，就效果而言类似于，获取结点对象对其使用innnerHTML.

<div class="myDiv"></div>

<script>
    document.querySelector('.myDiv').innerHTML = `<h1>哈哈哈</h1>`
</script>

<!--等价于-->

<div v-html="msg"></div>

export default{
  data () {
    rentun: {
      msg: `<h1>哈哈哈</h1>`
    }
  }
}

v-show

用于控制元素的显示与隐藏，类似于对元素的display进行修改。

<div v-show="isMsg">我出现了</div>

export default{
  data () {
    rentun: {
      isMsg: true //true表示显示，false表示隐藏
    }
  }
}

v-if 、v-else-if 、 v-else

条件判断显示与隐藏，根据条件进行对应DOM元素的创建与销毁，相较于v-show有更高的开销。

<div v-if="msg > 80">我出现了1</div>
<div v-els-ife="msg > 60">我出现了2</div>
<div v-else>我出现了3</div>

export default{
  data () {
    rentun: {
      msg: 90
    }
  }
}

v-on

用于注册事件，也就是对元素进行事件监听同时提供对应的事件处理逻辑。

<div>{{ msg }}</div>
<!--v-on:click 可以简写为@click-->
<button @click="changeMsg">点击修改</button>

export default{
  data () {
    rentun: {
      msg: '我是我'
    }
  },
  methods: {
    changeMsg () {
      this.msg = '我变了'
    }
  }
}

v-bind

用于动态设置html标签的属性，相信部分初学者会将插值表达式写入标签属性内试图动态传值，这个指令就弥补这一设想。

<!-- v-bind:src等价于 :src -->
<img :src="yourImg">

export default{
  data () {
    rentun: {
      yourImg: '你自己的图片路径'
    }
  }
}

当然v-bind同样可以作用于class，实现批量添加或者删除和类的切换

<idv :class="{red: isRed}">666</div>

export default{
  data () {
    rentun: {
      isRed: true //false则不使用
    }
  }
}

.red{
     background: red;
}

v-model

给表单使用实现，双向数据绑定，也就是数据与页面显示的视图绑定，当页面表单输入或修改值，提交给后端的数据会改变，而如果改变数据同样会使得页面表单的值改变。

<input v-model="value" type="text">

export default{
  data () {
    rentun: {
      value:  ''//这里数据改变会引起表单值改变
    }
  }
}

“.”指令修饰符

作为指令后缀，封住了不同的处理操作
常用：
@keyup.enter //键盘回车监听
v-model.trim //去除首尾空格
v-model.number //转数字
@事件名.stop //阻止冒泡
@事件名.prevent //阻止默认行为，如按钮警用

Vue知识整理——基本指令

介绍