vue基础指令
什么是Vue.js？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
导包
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
声明式渲染
导包后，就可以通过用 Vue 函数创建一个新的 Vue 实例，
<div id="app"> <p>{{msg}}</p> </div>
<script> var vm = new Vue({ el : '#app', data : { msg :'123' } }) </script>
修改 app.msg 的值，html中的值将同步更新。
这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。
但只有当实例被创建时 data 中存在的属性才是响应式的，在添加属性时，不会触发任何视图的更新。
这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
我们的学习目的肯定不止于创建简单的 Vue 实例；而是用它去实现更加多变的功能需求；那我们需要进一步去学习 Vue-router 和 Vuex 以及 Vue-cli；
vue指令
每种指令的具体详解如下：
v-if
<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
当 v-if = true ，消息可显示。
继续在控制台输入 app3.seen = false，则会发现之前显示的消息消失了。
可以使用 v-else 指令来表示 v-if 的“else 块”：
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-for
v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
学习 JavaScript
学习 Vue
整个牛项目
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个 新项目。
用 v-for 指令遍历数组
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<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' } ] } })
- Parent-0-Foo
- Parent-1-Bar
用 v-for 来遍历对象
<div v-for="(value, name) in object"> {{ name }}: {{ value }} </div>
new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } })
title: How to do lists in Vue
author: Jane Doe
publishedAt: 2016-04-10
在2.2.0+中，在组件中使用v-for时，key是必须的（保证数据的唯一性）
注意：
1、v-for循环的时候，key属性只能使用 number 或者 string
2、key在使用时，必须使用 v-bind 绑定的形式，指定 key 的值
属性绑定 v-bind（：）
v-bind
语法为： v-bind:title="message"
该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
我们还可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: { activeClass: 'active', errorClass: 'text-danger' }
渲染为：
<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这样写将始终添加 errorClass，但是只有在 isActive 是 truthy 时才添加 activeClass。
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
处理用户输入 ：
v-on（@）事件监听
<div id="app"> <!-- `reverseMessage` 是在下面定义的方法名 --> <button v-on:click="reverseMessage">reverseMessage</button> </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
注：
split() 方法用于把一个字符串分割成字符串数组。
String.split(" ") 执行的操作与Array.join(" ") 执行的操作是相反的。
reverse( )方法使字符翻转。
v-on的事件修饰符：
.stop.prevent.capture.self：事件不是从内部元素触发的.once：点击事件将只会触发一次.passive：滚动事件的默认行为 (即滚动行为) 将会立即触发.exact：允许你控制由精确的系统修饰符组合触发的事件。
v-model 双向绑定
通过v-model 指令，能轻松实现表单输入和应用状态之间的双向绑定。
v-model一般用于表单元素。
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div>
在使用时要注意以下几点：
1、v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。因此需要通过 JavaScript 在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用
value属性和input事件； - checkbox 和 radio 使用
checked属性和change事件； - select 字段将
value作为 prop 并将change作为事件。
2、在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。
修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步，可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >
.number
自动将用户的输入值转为数值类型
<input v-model.number="age" type="number">
.trim
过滤首尾空白符
<input v-model.trim="msg">
