Vue 精华一页纸

Vue.js 和 angular.js一样也是一个客户端框架，利用H5自定义标签的能力，把数据和控制通过js实现分离的功能
冲击比较大的就是 freemarker，jsp这些服务端模板技术，利用客户端框架+Ajax、实现客户端层面的 MVC，MVP，MVMM这些模式。html和js，双向绑定。自此，服务端可以不用再关心页面内容分发这些，只需要提供服务接口，比如Rest

1、典型用法

---

入门的 vue例子

xxx.html
<div id="app">
{{message}}
{{obj.id}}
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello World',
obj :{
id : 1
}
}
})
包含元素
I、id 属性标注一个 app 名称 -- 对应的 angular 对象就是ng-app/ng-controller???
II、定义一个 Vue 对象，其中 el属性 对应到 前面的id属性 (背后的逻辑就是 document.getElementById())-- 对应angular 就是 define???
III、Vue 中的数据存储在 data属性中
IV、使用数据对象{{}} -- 这点和angular 是一致性的
V、对于 Vue data中的对象，Vue都直接代理 即 var v = new Vue 后 v.message 可以直接引用
Vue对象中的其他实例方法 v.$watch('obj',function(old,new){}); 监控属性值变化

2、概念

---

对应每一个模版框架，基础部分都需要了解： 表达式；逻辑控制。掌握了这两部分，就可以切入这个模型，后续高级部分在使用中学习。

更重要的是，几乎所有的模版框架这部分内容都有相似之处，掌握一个就可以掌握大部分的使用

I、表达式
-- js的表达式全部支持
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>

II、逻辑控制指令
a、判断逻辑 v-if 指令
通过在 属性中 增加 v-if 属性，如果里面的表达式计算结果为真，则该 元素会插入到最后的页面中

<p v-if="true">现在你看到我了</p>

<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>

b、循环逻辑 v-for 指令
采用在属性中 增加 v-for 属性，属性里面迭代语法 item in items 和js的迭代语法类似
<li v-for="site in sites">
{{ site.name }}
</li>
迭代循环可以是 数组，对象，或者数字范围

<li v-for="value in object">
<li v-for="(value, key, index) in object"> -- 迭代对象时，默认只有一个参数时，是对象的属性值，可以加上名称和索引号

<li v-for="n in 10">

3、绑定

---

绑定是实现MVMM/MVP一个核心因素，通过修改 数据model部分的数据，可以实时联动改变 html中的数据，从而系统实现了控制，无需再专门做Controller的开发，减少了开发成本

I、数据绑定 v-model指令
-- 这点和 angular 的 ng-model 是一样的

<label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
绑定的变量 class1，在界面和数据js中双向绑定，一般用在表单元素比较多

II、属性绑定 v-bind指令
-- 这个和 angular的 ng-bind 也是一致的，v-bind: 可以缩写成 :

<a v-bind:href="url">菜鸟教程</a>

<div v-bind:class="{'class1': class1,'class2':class2}">
directiva v-bind:class
</div>

new Vue({
el: '#app',
data:{
class1: false,
class2: true
}
});

一种是简单的绑定表达式的值；
一种是绑定对象和数组(主要针对 class和style 属性)
{class1:true, class2:true} - 这点类似于angular
[class1,class2]
除此之外，还可以使用 computed 返回值，只要返回值是符合如上格式的对象

4、逻辑-事件-控制

---

v-if/v-for 只是对界面内容的简单控制，web开发有很大一部分是事情相应控制，Vue模版使用什么来代替js的onclick 这些事件处理呢

I、v-on 指令 + Vue 方法

v-on 指令对常用的 html事件都可以操作，一般相应的函数都放在 methods中, v-on: 可以缩写成 @
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>

v:on 对应js所有的 鼠标和键盘事件

II、其他Vue方法

a、过滤器 |
对应 angular ，可以实现类似 管道的过滤功能，前一个处理结果，作为第一个参数传给后一个过滤器函数，对于过滤器必须使用 filters 来标注函数。

<div id="app">
{{ message | capitalize }}
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>

b、计算属性 computed

和普通methods的区别是，直接使用 名称就可以，而methods需要 () 才能作为方法执行；此外，computed 的记录会缓存,直到依赖的数据发生变化，而methods每次调用都重新执行
<div id="app">
<p> {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>

5、表单元素

---

主要通过v-model绑定表单控件的值

比如 复选框
<input type="checkbox" id="checkbox" v-model="checked">

6、组件化

---

任何框架最终的杀伤力都是能够模块化，组件化，这是非常精华重要的部分，Vue也不例外，下面看Vue如何抽象封装成新的框架和组件

组件化，一般包含几个部分：a、H5界面上，使用的自定义标签和属性；b、js模版中，提供标签和属性的 html模版替换

I、组件化的一个例子

<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>

<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
new Vue({
el: '#app',
data: {
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>

II、组件化的步骤

一、注册一个组件
a、全局组件 Vue.component
b、局部组件 在 new Vue 中 的 components 属性
new Vue({
components: {
'runoob': {template: '<h1>自定义组件!</h1>'}
}
})
二、使用 template 进行替换 标签元素
三、父控件(外层) 传递数据给 子控件(内层)，通过 props 传递数据
如果传递的是静态数据比如字符串 直接使用 todo属性，比如 todo="aaa";如果是动态数据，绑定的其他数据使用 v-bind:todo 绑定一个变量

四、子控件(内层) 传递数据给父控件(外层),通过事件来传递
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment_outer="incrementTotal"></button-counter>
<button-counter v-on:increment_outer="incrementTotal"></button-counter>
</div>
</div>

<script>
Vue.component('button-counter', {
template: '<button v-on:click="increment_inner">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment_inner: function () {
this.counter += 1
this.$emit('increment_outer')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>

7、自定义指令

---

Vue和AugularJS一样，也有自定义指令，不过功能却不一样，angularJS的自定义指令对应的是Vue的component 组件功能，通过自定义指令这样可以实现更多的组合功能，比如可以在指令中定义自己的事件处理体系

和组件一样，也有全局和局部指令
Vue.directive('focus', {});
directives: {focus:{});

<div id="app" v-runoob:hello="message">
</div>

<script>
Vue.directive('runoob', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
new Vue({
el: '#app',
data: {
message: '菜鸟教程!'
}
})
</script>

I、注册一个指令 directive
II、钩子(回调)函数 bind/inserted/update/componentUpdated/unbind
函数入参
el -- 指令绑定的元素
binding -- 获取绑定的指令的信息
vnode -- vue编译后的节点
使用钩子函数用在何时实现指令的功能，如果不指定则所有时候都生效
III、通过函数获取的 el,bingding 对象实现相应的操作

8、其他重点知识

---

其他常见指令
v-show 指令
-- 对比 angular 的ng-show
实现的效果和 v-if 类似，但背后的逻辑不通，v-if 是控制是否插入该元素，而v-show 是肯定插入该元素，通过 display:none 样式控制显示
<h1 v-show="ok">Hello!</h1>

v-html 指令
直接插入html 元素，和普通文本略有区别，可以插入 html元素，如果直接使用{{}}就是 文本
<div id="app">
<div v-html="message"></div>
</div>