vue指令

插值表达式：

语法{{表达式}}

ps：dom中插值表达式赋值, vue的变量必须在data里声明

v-bind

语法：v-bind:属性名="vue变量"

简写：:属性名="vue变量"

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

v-on

语法：

v-on:事件名="要执行的==少量代码=="

v-on:事件名="methods中的函数"

v-on:事件名="methods中的函数(实参)"

简写: @事件名="methods中的函数"

<button v-on:click="addCountFn(5)">一次加5件</button>

<button @click="subFn">减少</button>

v-on事件对象

语法:

无传参, 通过形参直接接收

传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

v-on修饰符

语法:

@事件名.修饰符="methods里函数"

.stop - 阻止事件冒泡

.prevent - 阻止默认行为

.once - 程序运行期间, 只触发一次事件处理函数

v-on按键修饰符

语法:

@keyup.enter - 监测回车按键

@keyup.esc - 监测返回按键

更多修饰符

v-model

实现vuejs变量和表单标签value属性, 双向绑定的指令

语法: v-model="vue数据变量"

双向数据绑定

数据变化 -> 视图自动同步

视图变化 -> 数据自动同步

演示: 用户名绑定 - vue内部是MVVM设计模式

v-model修饰符

语法:

v-model.修饰符="vue数据变量"

.number 以parseFloat转成数字类型

.trim 去除首尾空白字符

.lazy 在change时触发而非inupt时

_vue指令 v-text和v-html

• 语法:

  • v-text="vue数据变量"   更新节点内容

  • v-html="vue数据变量"   可解析标签

• 注意: 会覆盖插值表达式

vue指令 v-show和v-if

• 语法:

  • v-show="vue变量"

  • v-if="vue变量"

• 原理

  • v-show 用的display:none隐藏 (频繁切换使用)

  • v-if 直接从DOM树上移除

• 高级

  • v-else使用

vue指令-v-for

• 语法

  • v-for="(值, 索引) in 目标结构"

  • v-for="值 in 目标结构"

• 目标结构:

  • 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

• 注意:

  v-for的临时变量名不能用到v-for范围外

• vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组

  总结: 改变原数组的方法才能让v-for更新