Vue基础语法

常用模板语法

指令

• v-once:只渲染一次，后续不会因为数据的改变重现渲染
• v-if/v-else-if/v-else(是否在dom树上存在)
• v-show（display控制，dom树上是存在的）
• v-bind/:(属性绑定)
• v-on/@(事件绑定)
• v-html、v-text、{{}}
• v-model
• v-for

事件绑定

1. 基础语法

// 绑定单个事件
<button @click="handle">点击</button>
// 绑定多个事件
<button @click="handle1(), handle2()">点击</button>

2. 传递参数

// 传递一般参数
<button @click="handle(2)">点击</button> // methods中对应方法为 handle(num) {...}
// 传递事件参数
<button @click="handle">点击</button> // methods中对应方法为 handle(e) {...} 只需要在参数接收列表接收
// 一般参数 + 事件参数:使用$event代表传递的event，接收时一一对应
<button @click="handle(2, $event)">点击</button> //  methods中对应方法为 handle(num,e) {...}

3. 修饰符

语法为@事件名称.事件修饰符="事件绑定的函数名称"

// 一般用法
<a @click.prevent="handleClick" href="xxxx">连接</a>
// 常见的事修饰符： stop阻止冒泡 once只执行一次 prevent阻止默认事件的触发
// 键盘修饰符 enter tab
// 鼠标修饰符 left middle right
// 精确修饰符

列表渲染v-for

v-for优先级高于v-if所以二者不要使用在同一标签上，否则会导致v-if无效

// key无变化，原有项复用，提升性能
// key是必须的，且是唯一的，不要使用index
<div v-for="(item, index) in list" :key="唯一值">
// 也是可以循环对象的{key: value}
<div v-for="(value,key, index) in list" :key="唯一值">

双向绑定v-model

常见的双向绑定出现在input的type:text, checkbox, radio、texteara和select

1. 基础语法

data () {
  return {
    bindVals: ''
  }
}
// 输入框的数据变化，会导致data中的数据变化，同理data中的数据变化也会导致输入框中的数据变化
<input type="text" v-model="bindVals" />

2. 复杂的双向绑定

// checkbox data中存在一个数组 message: [],选中的value会加入数组
<input type="checkbox" v-model="message" value="1"/>
<input type="checkbox" v-model="message" value="2"/>
<input type="checkbox" v-model="message" value="3"/>
// radio  data中存在 message:""选中的会让message等于其值
// select 类似于checkbox

3. 常见修饰符：.lazy、.number、.trim

动态属性

采用[]动态计算属性名称,一般用于v-bind/v-on中

<div :[name]="message">{{text}}</div>
<button @[eventName]="handle">按钮</button>

data & methods & watcher & computed

methods

methods: {
  handle () {
    ...
  }
}

1. methods中的所有方法函数中的this都指向vue实例，定义函数不要使用箭头函数，否则会有this指向问题

computed

data () {
  return {
    count: 2,
    price: 10
  }
},
computed:{
  total() {
    return this.count * this.price;
  }
}
template: `<div>{{total}}</div>`
// 修改count或price中的任意一个都会导致total的改变

1. computed中的函数只有依赖的数据发生变化时才会重新执行计算，methods中的函数只要页面重新渲染就会被执行

watch

1. 数据变化后执行异步操作

watch: {
  price () {
    // current当前修改的值， pre初始的值
    setTimeout((curent, pre) =>{
      console.log('price changend');
    },3000);
  }
}

样式绑定

1. 字符串控制 | 数组控制 | 对象控制

<style>
.red {
  color: "red"
}
</style>
data () {
  return {
    styleStr: 'red', // 字符串控制
    styleObj: {'red': true, green: true}, // 对象控制，true表示显示，false表示不显示 :class="styleObj"
    styleArr: ['red'] // 在数组中表示显示，不在表示不显示 :class="styleArr"
  }
},
template: `<div :class="styleStr">这是一个盒子</div>`

2. 行内样式

 data () {
  return {
    lineStyle: {
    color: 'red'
    }
  }
   },
// template: `<div style="color: green">这是一个盒子</div>`
template: `<div :style="lineStyle">这是一个盒子</div>`

3. 子组件接受父组件的样式$attr.class