2.Vue基础(2018.01.10)
1.Vue简介：
Vue为复杂的单页面应用提供驱动，所有东西都是响应式的。所有的 Vue 组件都是 Vue 实例。
当一个 Vue 实例被创建时，它向 Vue
响应式系统
中加入了其
data
对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生"响应"，即更新为新的值。
2.模板语法:
数据绑定最常见的形式就是使用"Mustache"语法 (双大括号) 的文本插值，其
表现形式：{{ 语法 }}
1). 案例：
| Message: {{ msg }} |
Mustache 标签将会被替代为对应数据对象上
msg
属性的值。无论何时，绑定的数据对象上
msg
属性发生了改变，插值处的内容都会更新。
2). 通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
|
Message: {{ msg }}
|
3.VUE基本指令：
1). v-html:渲染文本
如果数据中包含HTML代码，而且你需要输出真正的HTML，则使用该标签。
如果msg值为这是红色
结果：这是红色
2). v-text:渲染文本，等价于{{
msg
}}
如果数据中包含HTML代码，而且你需要输出原HTML代码，则使用该标签。
如果msg值为这是红色
结果：这是红色
3). v-bind:绑定元素的属性
如果需要将语法作用于HTML元素的属性上，则应该使用该标签。
|
|
如果
dynamicId值
为product_id，url值为www.baidu.com
结果：
<a href="www.baidu.com">...a>
注：v-bind的简写形式为：，如下：
|
|
4). 使用 JavaScript 表达式
Vue.js 提供了完全的 JavaScript 表达式支持。
|
{{ number + 1 }}
{{ hello }}
{{ 1+1 }}
{{ "哈哈" }}
{{ 0<10 ? '对的' : '错的' }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
|
注意：该语法只能存在单行语句，并且不能作用在HTML属性上，下面语句不会生效：
|
{{ var a = 1 }}
{{ if (ok) { return message } }}
|
5). 条件渲染：v-if 是一个指令，所以必须将它添加到一个元素上。
①.v-if：将根据表达式 seen 的值的真假来插入/移除 元素。
<p v-if="seen">现在你看到我了p> |
②.v-else：v-else 元素必须紧跟在带 v-if 或者 v-else-if 元素的后面，否则它将不会被识别。
<h1 v-if="ok">Yesh1> |
③.v-else-if：跟在 v-if 元素的后面。
<div v-if="type === 'A'"> |
④.在 元素上使用 v-if 条件渲染分组，如果ok为false，最终将看不到该模板。
<template v-if="ok"> |
⑤.v-show:
<h1 v-show="ok">Hello!h1> |
⑥.v-if与v-show的区别：
v-if 是"真正"的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多。不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
6). v-for 列表渲染：
根据一组数组(对象)的选项列表进行渲染
①. 数组案例：items 是源数据数组， item 是数组元素迭代的别名。可选的第二个参数为当前项的索引。
|
{{ parentMessage }} - {{ index }} - {{ item.message }}
|
②. 对象案例：object 是源数据对象，value是对象的值，第二个可选参数key是键名，第三个可选参数index为索引。
|
{{ index }}. {{ key }}: {{ value }}
|
③. 在使用v-for循环时，最好给每个列表都添加key。例如:
|
{{ item.message }}
|
④.数组更新：
a.变异方法：Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
|
方法名称
|
作用
|
|
push()
|
向数组的末尾添加一个或多个元素，并返回新的长度。
|
|
pop()
|
用于删除并返回数组的最后一个元素。
|
|
shift()
|
用于把数组的第一个元素从其中删除，并返回第一个元素的值。
|
|
unshift()
|
可向数组的开头添加一个或更多元素，并返回新的长度。
|
|
splice()
|
向/从数组中添加/删除项目，然后返回被删除的项目。
|
|
sort()
|
用于对数组进行排序。
|
|
reverse()
|
用于颠倒数组中元素的顺序。
|
b.
替换数组：不会引起视图更新。
|
方法名称
|
作用
|
|
filter()
|
创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
|
|
concat()
|
用于连接两个或多个数组。该方法不会改变原数组。
|
|
slice()
|
可从已有的数组中返回选定的元素。
该方法不会改变原数组。
|
c.利用替换数组达到变异数组的功能：
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
|
|
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：
|
|
⑤. v-for 与 v-if 一起使用
a.当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：
|
{{ todo }}
|
上面的代码只会显示isComplete为false的 todos。
b.如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 )上。如：
|
{{ todo }}
|
5.事件监听：
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。（@事件 等价于 v-on:事件）
<a v-on:click="doSomething">...a> <a @click="doSomething">...a> |
1).最简单的案例：
|
按钮被点击 {{ counter }} 次. |
2).许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
|
|
3). 除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，并且传递参数：
|
|
4).有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
|
Submit
|
5).事件修饰符：
|
|
6).按键修饰符：
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
|
|
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名（enter键的keyCode就是13）：
|
|
全部的按键别名：
|
按键别名
|
具体按键
|
|
.enter
|
捕获 "Enter" 键
|
|
.tab
|
捕获 "Tab" 键
|
|
.delete
|
捕获 "删除" 和 "退格" 键
|
|
.esc
|
捕获 "Esc" 键
|
|
.space
|
捕获 "空格" 键
|
|
.up
|
捕获 "向上" 键
|
|
.down
|
捕获 "向下" 键
|
|
.left
|
捕获 "向左" 键
|
|
.right
|
捕获 "向右" 键
|
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
|
// 如下配置之后，可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.
f1
=
112
|
6. 计算属性computed：
1). 计算属性的使用案例：
|
Original message: " {{ message }}"Computed reversed message: " {{ reversedMessage }}" |
结果：
Original message: "Hello"
Computed reversed message: "olleH"
2).
计算属性和Methods区别：
我们可以将同一函数定义为一个方法或者一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
简单地说：调用方法每次都会执行所有语句，而计算属性只要它依赖的值没有改变都不会重新计算，效率肯定更好。
7.表单输入绑定：
可以用 v-model 指令在表单 及
3). 复选框：
|
|
4). 多个复选框，绑定到同一个数组：
|
Checked names:
{{
checkedNames
}}
|
5). 单选按钮：
|
Picked:
{{
picked
}}
|
6). 选择框：
|
A
B
C
Selected:
{{
selected
}}
|
7). 配合使用 v-for 渲染的动态选项（常用）：
|
{{
option.text
}}
Selected: {{
selected
}}
|
8). 修饰符：lazy、trim、number
①. 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
|
|
②. 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
③. 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
8.Class 与 Style 绑定：
1). 对象语法：
①. 给 v-bind:class 一个对象，以动态切换 class：
上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的值是否为true。
②. v-bind:class 指令也可以与普通的 class 属性共存：
|
v-bind:class="
{ active: isActive, 'text-danger': hasError }
">
|
结果渲染为：
③. 绑定的数据对象不必内联定义在模板里：
|
|
渲染的结果和上面一样。
④. 也可以绑定一个返回对象的计算属性。这是一个常用且强大的模式：
|
|
2).数组语法：
①. 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
|
data () {
return {
activeClass:
'active'
,
errorClass:
'text-danger'
}
}
|
结果渲染为：
②. 如果你也想根据条件切换列表中的 class，可以用三元表达式：
③. 在数组语法中也可以使用对象语法：
3).绑定内联样式：
绑定内联样式跟绑定到Class完全一样，但是绑定到内联样式会导致代码的可读性降低，所以
建议将内联样式写成Class然后使用绑定到Class。