学习vue.js (一)

MVVM模式

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之也同样，View和ViewModel之间经过双向绑定。

 与MVC区别，MVC是单向通讯，VUE就是基于MVVM模式实现的一套框架，在VUE中Model层指的是js中的data数据，View层指的是页面视图，ViewModel是指vue实例化对象。

Vue.js的开发模式

Vue.js 是一套构建用户界面的渐进式框架
当数据与DOM进行了关联，全部的东西都是响应式的，咱们怎么确认呢？
在你当前运行的窗口，打开浏览器的JavaScript控制台，并修改app.message的值，你将看到上例的值相应的更新。

 

内置指令

指令 (Directives) 是带有 v- 前缀的特殊属性，指令是Vue模板中最经常使用的一项功能，它带有前缀v-，主要职责就是当其表达式的值改变时，将某些行为应用到DOM上。

• v-if：条件渲染指令，动态在DOM内添加或删除DOM元素。
• v-else：条件渲染指令，必须跟v-if成对使用。
• v-else-if：判断多层条件，必须跟v-if成对使用。
• v-show：条件渲染指令，为DOM设置css的style属性，v-show不能在<template>上使用，频繁切换场景中适合使用。
• v-text：更新元素的textContent；例如：<span v-text="msg"></span> 等同于 < span>{{msg}} </ span>。
• v-html：更新元素的innerHTML；会把标签名也带上。
• v-for：循环指令；<li v-for="book in books">{ { book.name } }</li>
• v-for：表达式遍历数组时支持一个可选参数做为当前项的索引；<li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>
• v-for：表达式遍历对象属性时，有两个可选参数，分别是键名和索引；<li v-for="(value , key , index) in user ">{ { index } } - { { key } } : { { value } }</li>
• v-cloak：不须要表达式，这个指令保持在元素上直到关联实例结束编译； v-cloak 是一个解决初始化慢致使页面闪动的最佳实践。
• v-once：也是一个不须要表达式的指令，做用是定义它的元素或组件只渲染一次，包括元素或组件的全部子节点。
• v-pre：不须要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度。
• v-bind：响应并更新DOM特性；例如：v-bind:href  v-bind:class  v-bind:title  等等。语法糖："v-bind:” 能够用"："代替。
• v-on：用于监听DOM事件； 例如：v-on:click  v-on:keyup。语法糖：“v-on:”能够用“@”代替。
• v-model：数据双向绑定；用于表单输入等；例如：< input v-model= "message">。v-model也是一个特殊的语法糖，使用@input来替代v-model。

v-bind 特性被称为指令。指令带有前缀 v-，以表示他们是Vue提供的特殊的特性。

咱们不只能够把数据绑定到DOM文本或特性，还能够绑定到DOM结构。此外，Vue也提供了一个强大的过渡效果系统，能够在Vue插入/更新/移除元素时自动应用过渡效果。

v-if 条件控制语句 可控制一个元素是否显示是否隐藏。
v-for 循环 该指令能够绑定数组的数据来渲染一个项目列表。
v-on 指令添加一个事件监听器，经过他调用在Vue实例中定义的方法。绑定事件
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

组件化应用构建：组件系统是vue的另外一个重要的概念，由于它是一种抽象，容许咱们使用小型、独立的一般可复用的组件构建大型应用。
注册一个全局组件语法格式以下：
Vue.compnent(tagName,options)
tagName为组件名，options为配置选项。注册后咱们可使用如下方式来调用组件：
<tagName></tagName>
组件可复用，一个组件的 data 选项必须是一个函数，由于你每用一次组件，就会有一个它的新实例被建立。
在组件中建立多个标签时，标签必须有父标签，不然不能显示
例：
vue.compnent('button-counter',{

data: function () {
return {
count:0
}
},
template: '<div><h1>标题</h1></h1><button v-on:click="count++">You clicked me {{count}} times.</button></div>'//当建立两个或两个以上的标签必须包含在父标签内
})
props属性：父组件是使用 props 传递数据给子组件，但若是子组件要把数据传递回去，就须要使用自定义事件！
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

Vue实例
建立一个Vue实例，每个Vue应用都是经过用Vue函数建立一个Vue实例开始的：
var vm=new Vue({
//选项
})
当建立一个Vue实例时，你能够传入一个选项对象，能够在API文档中浏览完整的选项列表。https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE vue数据选项

数据与方法
当一个Vue实例被建立时，它将 data 对象的全部属性加入到vue的响应式系统中，当这些属性的值发生改变时，视图(页面)将会产生"响应"，即匹配更新为新的值。
例：
// 咱们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})

// 得到这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
那么对于 b 的改动将不会触发任何视图的更新。若是你知道你晚些时候须要一个属性，可是一开始它为空或不存在，那么你须要设置一些初始值。好比：
data: {
vm.a // => 3
当这些数据改变时，视图会从新渲染。值得注意的是只有当实例被建立时就已经存在于data中的属性才是响应式的。也就是说若是你添加一个新的属性，如：
vm.b='hi'
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
这里惟一的例外是使用 Object.freeze() ,这会组织修改现有的属性，也意味着响应系统没法在追踪变化。
例：
var obj = {
foo: 'bar'
}

Object.freeze(obj)

var apps = new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新！ -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>

除了数据属性，vue实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ ,以便与用户定义的属性区分开来。

模板语法
数据绑定最多见的形式j就是使用"Mustache"语法(双大括号)的文本插值:
<span>Message: {{ msg }}</span>
双大括号标签将会被替代为对应数据对象上 msg 属性的值。不管什么时候，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

特性
Mustache语法不能做用在HTML特性上，遇到这种状况 应该使用 v-bind 指令: https://cn.vuejs.org/v2/api/#v-bind
例：<div v-bind:id="dynamicId"></div>

对于布尔特性(它们只要存在就意味着值为 true) ，v-bind 工做起来略有不一样，
例：<button v-bind:disabled="isButtonDisabled">Button</button>
若是 isButtonDisabled 的值是null，undefined，或 false，则disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。

使用 JavaScript表达式
例：
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据做用域下做为 JavaScript 被解析。有个限制就是，每一个绑定都只能包含单个表达式，因此下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
注：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不该该在模板表达式中试图访问用户定义的全局变量。

指令
指令是带有 v- 前缀的特殊特性，指令的指责是，当表达式的值改变时，将其产生的连带影响，响应式的做用于 DOM 。
例：
<p v-if="seen">如今你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

参数
一些指令可以接收一个“参数”，在指令名称以后以冒号表示。例如，v-bind 指令能够用于响应式地更新 HTML 特性：

<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

另外一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>
在这里参数是监听的事件名。

动态参数
2.6.0 新增

从 2.6.0 开始，能够用方括号括起来的 JavaScript 表达式做为一个指令的参数：

<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被做为一个 JavaScript 表达式进行动态求值，求得的值将会做为最终的参数来使用。
例如，若是你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

缩写
v-bind缩写
完整语法：<a v-bind:href="url"></a>
缩写：<a :href="url"></a>

v-on缩写
完整语法：<a v-on:click="doSomething"></a>
缩写：<a @click="doSomething"></a>

计算属性
模板内的表达式很是便利，可是设计它的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板太重且难以维护。
例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板再也不是简单的声明逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中屡次引用此处的翻转字符串时，就会更加难以处理。
因此，对于任何复杂逻辑，你都应当使用计算属性。
例：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
结果：

Original message: "Hello"

Computed reversed message: "olleH"

这里咱们声明了一个计算属性 reversedMessage。咱们提供的函数将用做属性 vm.reversedMessage 的 getter 函数：
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
你能够打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。

你能够像绑定普通属性同样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，所以当 vm.message 发生改变时，全部依赖 vm.reversedMessage 的绑定也会更新。
并且最妙的是咱们已经以声明的方式建立了这种依赖关系：计算属性的 getter 函数是没有反作用 (side effect) 的，这使它更易于测试和理解。

计算属性 VS 方法
计算属性 VS 侦听属性
计算属性的setter
侦听器
请看官网详解：https://cn.vuejs.org/v2/guide/computed.html#%E5%9F%BA%E7%A1%80%E4%BE%8B%E5%AD%90

v-show指令 带有v-show]指令的元素始终会被渲染并保留在BOM中。v-show只是简单的切换元素的CSS属性display

事件处理
v-on指令 用于绑定事件
事件修饰符 经过由 . 表示的指令后缀来调用修饰符
例：
<a v-on:click.stop="doThis"></a> //阻止单机事件冒泡
<from v-on:submit.prevent="onSubmit"></from> // 提交事件再也不重载页面
<a v-on:click.stop.prevent=""></a> //只有修饰符
<div v-on:click.capture="doThis"></div> //添加事件侦听器时使用事件捕获模式
<div v-on:click.self="doThat"></div> //只当事件在该元素自己（而不是子元素）触发时触发回调

<div v-on:click.once="doThis"></div> //click事件只能点击一次，2.1.4版本新增

按键修饰符
vue为经常使用的的按键提供了别名：
<input v-on:keyup.enter="submit" /> //只有keyup是enter时调用submit方法
缩写:<input @keyup.enter="submit" />
所有按键别名：.enter .tab .delete (捕获"删除"和"退格"键） .esc .space .up .down .left .right .ctrl .alt .shift .meta

表单输入绑定v-model 指令在表单<input>,<textarea></textarea>,<select></select> 元素上建立双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素，注：v-model 会忽略全部表单元素的 value,checked,selected,特性的初始值而老是将vue实例的数据做为数据来源。你应该经过JavaScript在组件的data选项中声明初始值。