vue学习-第2天

列表渲染（下）

数组更新检测

变异方法

• 会改变调用了这些方法的原始数组
• Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。被包裹的方法包括：尾部和头部的插入与删除方法，sort()，splice()，reverse()。

替换数组

• 不会改变原始数组，而总是返回一个新数组
• 如：filter()、concat() 和 slice()。
• 如果想监测一下情况：
  • 当你利用索引直接设置一个数组项时，使用：

    vm.$set(vm.items, indexOfItem, newValue)
    

  • 当你修改数组的长度时，使用：

    vm.items.splice(newLength)
    

对象变更检测

• 对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如：

vm.$set(vm.userProfile, 'age', 27)

• 若需要为已有对象赋值多个新属性，建议这么做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

显示过滤/排序后的结果

• 想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
• 在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法。

在 v-for 里使用值范围

• v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

在 <template>上使用 v-for

事件处理

监听事件

• 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 可以接收一个需要调用的方法名称。

内联处理器中的方法

• 除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。

事件修饰符

• 修饰符是由点开头的指令后缀来表示的。

  <!-- 修饰符可以串联.stop.prevent -->
  <!-- 可以只有修饰符 -->
  .stop <!-- 阻止单击事件继续传播 -->
  .prevent <!-- 提交事件不再重载页面 -->
  .capture 
  .self
  .passive <!-- 告诉浏览器你不想阻止事件的默认行为。 -->
  .once <!-- 点击事件将只会触发一次 -->
  

按键修饰符

• v-on:keyup.后接需要处理的事件

表单输入绑定

• v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
• 注：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
• v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
  • text 和 textarea 元素使用 value 属性和 input 事件；
  • checkbox 和 radio 使用 checked 属性和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件。
• 在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。
• 也可以将多个复选框，绑定到同一个数组。v-model指定的数组名相同即可
• 单选按钮
• 选择框：
  • 推荐：

  <select v-model="selected">
  <!-- 使用第一个选项禁用 -->
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
  </select>
  

####### 修饰符

• .lazy，例如

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

• .number，可以将将用户的输入值转为数值类型。

<input v-model.number="age" type="number">

• .trim，可以过滤过滤用户输入的首尾空白字符。

<input v-model.trim="msg">

API

Vue.nextTick( [callback, context] )

• 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM，类似JavaScript的promise。

Vue.set( target, propertyName/index, value )

• 参数：
  1. {Object | Array} target
  2. {string | number} propertyName/index
  3. {any} value
• 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

Vue.filter( id, [definition] )

• 参数
  1. {string} id
  2. {Function} [definition]
• 注册或获取全局过滤器。

Vue.component( id, [definition] )

• 参数
  1. {string} id
  2. {Function | Object} [definition]
• 注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

computed

{ [key: string]: Function | { get: Function, set: Function } }

• 计算属性
• 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。

methods

{ 
	[key: string]: Function 
}

• methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

watch

{ 
	[key: string]: string | Function | Object | Array 
}

• 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

el

• 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。不推荐挂载 root 实例到 或者 上。

template

• 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

本次整理十分简陋，只是大致记录。不准备很深入。很多地方没有涉及到。
以上内容整理自vue官方教程，个人仅转载和学习。