Vue入坑之基本语法

Vue实例

数据与方法

实例被创建时data中存在的属性才是响应式的

生命钩子

不要在选项属性和回调上使用箭头函数

模板语法

插值

<button v-bind:disabled="isButton"></button>

当isButton的值是null、undefined、’false’时，disabled属性不会被渲染进<button>

指令

v-if的真假是否渲染相关元素

计算属性和侦听器

计算属性

computed: {
  // 计算属性的getter
  reversedMsg () {
    return this.msg + 1
  }
}

属性依赖与其他属性，计算属性只有在它的相关依赖发生改变时才会重新求值，相比之下，每当触发重新渲染时，调用方法将总会再次执行函数

computed: {
  fullname: {
    get: function() {
      return this.firstname
    },
    set: function(val) {
      this.fristname = val.split(1)
    }
  }
}

执行异步或者开销大的操作时，侦听器使用watch

Class和Style绑定

HTML class

<div v-bind:class="{active: isActive}"></div>

内联样式

<div v-bind:style="{color: activeColor;fontSize: active + 'px'}"></div>

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '12px'
  }
}

条件渲染

v-if和v-show区别

列表渲染

v-for遍历数组和对象渲染元素列表，默认采用“就地复用”策略。数据项顺序改变时，不会移动元素顺序

<div v-for="item in items" :key="item.id">
</div>

事件处理

修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

按键修饰符

<input v-on:keyup.enter="submit">

.exact精准修饰符

<button @click.ctrl.exect="onCtrlClick"></button>

表单输入绑定

修饰符

.lazy .number .trim

组件

注册

采用全局注册时，确保初始化根目录实例前注册组件

is属性

<table>
  <my-row></my-row>
</table>

<table>
  <tr is="my-row"></tr>
</table>

Contents