Vue基础学习笔记
Vue.js
一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，可以自底向上逐层应用。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
例如：
<div id="app">
{
{ message }}
div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Hello Vue!
- 每个 Vue 应用都是通过用
Vue函数创建一个新的 Vue 实例开始的 - 数据和 DOM 已经被建立了关联，所有东西都是响应式的
- 一个 Vue 应用会将其挂载到一个 DOM 元素上 (这个例子是
#app) 然后对其进行完全控制
模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数，把 DOM 操作次数减到最少。
插值
文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {
{ msg }}span>
绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个将不会改变: {
{ msg }}span>
原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<p>{
{ rawHtml }}p>
<p><span v-html="rawHtml">span>p>
使用 JavaScript 表达式
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{
{ number + 1 }}
{
{ ok ? 'YES' : 'NO' }}
{
{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">div>
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute（属性）
<p v-if="seen">现在你看到我了p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 元素
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示
例如：
<a v-bind:href="url">...a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
<a v-on:click="doSomething">...a>
v-on 指令，它用于监听 DOM 事件
缩写
<a :href="url">...a>
<a @click="doSomething">...a>
Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。表达式结果的类型除了字符串之外，还可以是对象或数组。
绑定 HTML Class
对象语法
例如下模板：
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
>div>
和如下 data：
data: {
isActive: true,
hasError: false
}
结果渲染为：
<div class="static active">div>
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
当然绑定的数据对象可以是一个对象，渲染的结果和上面一样：
<div v-bind:class="classObject">div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]">div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为：
<div class="active text-danger">div>
绑定内联样式
对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。
<div v-bind:style="{
color: activeColor, fontSize: fontSize + 'px' }">div>
data: {
activeColor: 'red',
fontSize: 30
}
直接绑定到一个样式对象通常更好，这会让模板更清晰：
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
条件渲染
v-if，v-else-if，v-else
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
也可以用 v-else 添加“else-if 块”和“else 块”：
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else-if="msg1===“A">Vue is good!</h1>
<h1 v-else>Oh no </h1>
在 v-if 条件渲染分组
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。
<template v-if="ok">
<h1>Titleh1>
<p>Paragraph 1p>
<p>Paragraph 2p>
template>
v-if vs v-show
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。- 如果需要非常频繁地切换，则使用
v-show较好；如果在运行时条件很少改变，则使用v-if较好。
列表渲染
用 v-for 把一个数组对应为一组元素
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{
{ item.message }}
li>
ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{
message: 'Foo' },
{
message: 'Bar' }
]
}
})
结果：
在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{
{
parentMessage }} - {
{
index }} - {
{
item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{
message: 'Foo' },
{
message: 'Bar' }
]
}
})
结果：
在 v-for 里使用对象
你也可以用 v-for 来遍历一个对象的 property。
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{
{ value }}
li>
ul>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
结果：
你也可以提供第二个参数为 property 名称 (也就是键名)和第三个参数作为索引：
<div v-for="(value, name, index) in object">
{
{ index }}. {
{ name }}: {
{ value }}
div>
结果：
在 v-for 里使用值范围
v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
<div>
<span v-for="n in 10">{
{ n }} span>
div>
结果：
在 v-for
类似于 v-if，你也可以利用带有 v-for 的 来循环渲染一段包含多个元素的内容。比如：
<ul>
<template v-for="item in items">
<li>{
{ item.msg }}li>
<li class="divider" role="presentation">li>
template>
ul>
v-for 与 v-if 一同使用
v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
<li v-for="todo in todos" v-if="!todo.isComplete">
{
{ todo }}
li>
上面的代码将只渲染未完成的 todo。
事件处理
监听事件
用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
示例：
<div id="example-1">
<button v-on:click="counter += 1">Add 1button>
<p>The button above has been clicked {
{ counter }} times.p>
div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
结果：
事件处理方法
许多事件处理逻辑会更为复杂，因此 v-on 还可以接收一个需要调用的方法名称。
示例：
<div id="example-2">
<button v-on:click="greet">Greetbutton>
div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
<div id="example-3">
<button v-on:click="say('hi')">Say hibutton>
<button v-on:click="say('what')">Say whatbutton>
div>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
button>
// ...
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault()
}
alert(message)
}
}
事件修饰符
Vue.js 为 v-on 提供了事件修饰符。以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例：
<div @click="click1">
<div @click.stop="click2">
abc
div>
div>
.stop表明click2完成后会停下来，不会执行嵌套的父指令click1
事件修饰符有：
.stop.prevent.capture.self.once.passive
<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>
<div v-on:click.self="doThat">...div>
<a v-on:click.once="doThis">a>
<div v-on:scroll.passive="onScroll">...div>
表单输入绑定
v-model
用 v-model 指令在表单 、