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-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-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-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">
组件化应用构建
在 Vue 中注册组件：
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <todo-item> 。 我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
// 定义名为 todo-item 的新组件 Vue.component('todo-item', {
props:[], template: '<li>这是个待办项</li>', })
<ol> <!-- 创建一个 todo-item 组件的实例 --> <todo-item></todo-item> </ol>
在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。
所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象，例如data、computed、watch、methods以及生命周期钩子等 (一些根实例特有的选项除外)。
Vue 实例
生命周期钩子
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
学习代码：https://github.com/sunseekers/Vue/blob/master/DOME_HTML/mounted.html
组件注册
组件名：强烈推荐遵循W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)
全局注册与局部注册
全局注册使用 Vue.component 。全局注册的组件在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
Vue.component('my-component-name', {
// ... 选项 ...
})
局部注册在components选项中定义
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
局部注册的组件在其子组件中不可用。
//如果希望A在B中可用
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
自定义指令
directives 和 components 在 Vue 实例中为创建的局部自定义指令和注册组件，Vue.directive() 和 Vue.component() 则是注册全局
学习代码：https://github.com/sunseekers/Vue/blob/master/DOME_HTML/directive.html
Vue API
如何让 Vue 书写更佳优美？
优质内容筛选与推荐>>1、获取局域网动态IP地址并发送邮件
2、A*寻路
3、jsp基础模板
4、【作业】too young too simple mediaplayer
5、Git学习之命令集锦（摘自瘳雪峰的官方网站）