Vue-笔记二

1. 分隔符：

Vue中数据绑定的语法被设置为可配置的。可以通过Vue.config配置绑定的语法。Vue.config是一个对象，包含了Vue.js的所有全局配置，可以在Vue实例化前修改其中的属性。

分隔符在Vue.config中源码定义如下：

let delimiters = [‘{{’, ‘}}’]  let unsafeDelimiters = [‘{{{’, ‘}}}’]

1. delimiters:

修改默认的文本插值的分隔符：Vue.config.delimiters = [“<%”, “%>”];则文本插值的语法由{{example}}变为<%example%>.

1.  unsafeDelimiters:

修改默认的html插值的分隔符：Vue.config.unsafeDelimiters = [“<$”, “$>”]; 则HTML插值的语法由{{{ example }}}变为<$example$>。

2. 指令：

(1) v-if v-else v-else-if

如果切换多个元素，可以把<template>元素作为包装元素，并在上面使用v-if,最终的渲染结果不会包括template标签。

在template元素上面使用v-if条件渲染分组：

注意：v-else和v-else-if必须紧跟在v-if后面，否则不会被识别。

用key管理可复用的元素：

(2) v-show

带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单的切换元素的css属性:display。

注意：

v-show属性不支持template标签也不支持v-else。

当v-if和v-for一起使用时，v-for具有比v-if更高的优先级。

v-if 和v-show的比较: v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。 v-if如果在初始渲染时条件为假，则什么也不做，直到条件为真时才会开始渲染条件块。v-show不管初始条件是什么，元素总是被渲染，只是切换了css的display为none还是block而已。 v-if有很高的切换开销，v-show有更高的初始渲染开销。如果需要非常频繁的切换，则使用v-show，如果在运行时条件很少改变，则使用v-if较好。

(3)  v-model

用来在input，select，text，checkbox，radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。

v-model后面可以添加多个参数：number  lazy  debounce

  a. number: 将用户的输入自动转换为number类型，则可以添加一个number特性。如果原值的转换结果为NAN,则返回原值。

  b. lazy: 默认情况下v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性从而将数据改到在change事件中发生。

c. debounce: 设置最小延时，在每次敲击之后延时同步输入框的值和数据，如果每次更新都要进行高耗操作，较为有用。比如在input输入内容时要随时发送ajax请求。

 (4) v-for

使用v-for指令基于源数据重复渲染元素。也可以使用$index来呈现相对应的数组索引。

使用v-for将得到一个特殊的作用域，类似于angularJS的隔离作用域，需要明确指定props属性传递数据，否则在组件内将获取不到数据。

当数组数据出现变动时，Vue.js包装了被观察数组的变异方法，能触发视图更新。被包装的方法有：push() pop() shift() unshift() splice() sort() reverse()

 

Vue增加了两个方法来检测变化：$set和$remove。$set和$remove在底层都是通过splice()方法实现的。例如删除一个元素的时候可以用：demo.items.$remove(item);

源码如下：

除了上面的数组方法除外也可以使用fifter() concat() slice()方法，返回的数组将是一个不同的实例，我们可以用新的数组替换原来的数组。

想实现重复一个包含多个DOM元素的块，在这种情况下，则可以使用<template>标签来包装重复片段。<template>标签只充当一个语义包装器。

注：es5无法检测新属性添加到一个对象上或者对象中删除，要处理这种情况，Vue.js添加了三种方法：$add(key, value); $set(key, value); $delete(key);这些方法可以用来添加和删除属性，同时触发视图更新。

v-for也支持整数：

v-for同时还可以和Vue.js提供的内置过滤器或者排序数据一起使用。

  a. filterBy(过滤显示你想显示的数据)

  b. orderBy(根据你要求的排序显示)

(5)  v-text

v-text指令可以更新元素的textContext。在内部{{ Mustache }}插值也被编译为textNode的一个v-text指令。

(6) v-html

v-html 更新元素的innerHTML。用法与插值{{}}差不多，与{{}}的区别在于{{}}当插入html标签的时候都解析为字符串，而v-html可以解析html标签。但是一般在代码中不使用v-html插入一段html代码，容易引发xss攻击。

(7) v-bind

v-bind指令用于响应更新HTML特性，将一个或多个attribute或者一个组件prop动态绑定到表达式。v-bind:name=”message” 缩写为：:name=”message”。在绑定class或style时，支持其他类型的值，如数组或者对象。

3. 插槽

(1) 插槽内容：

将slot元素作为承载分发内容的出口。

(2) 具名插槽：

当需要多个插槽，<slot>元素有一个特殊的特性：name，这个特性可以用来定义额外的插槽。在向具名插槽提供内容的时候，我们可以在一个父组件的<template>元素上使用slot特性。

另一种slot特性的用法是直接用在一个普通的元素上面。

还可以保留一个未命名插槽：默认插槽，作为所有未匹配到的插槽的统一出口。

插槽的默认内容：为插槽提供默认内容。在子组件中的slot内部指定默认内容，如果父组件为这个插槽提供内容则默认的内容会被替换掉，如果没有则显示提供的默认内容。

编译作用域：

在插槽中使用数据时，该插槽可以访问跟这个模板的其他地方相同的实例属性，但这个插槽不能访问<navigation-link>的作用域。父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。

作用域插槽：

提供的组件带有可从子组件获取数据的可复用的插槽。每个独立的待办项渲染出和todo.text不太一样的东西。实现的话将待办项内容包裹在一个<slot>元素上，然后将所有和其上下文相关的数据传递给这个插槽。