vue学习之一基础学习

http://cn.vuejs.org看官方文档，写的很不错

作用：

基于dom.构建数据驱动。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件系统

比较：（专注与灵活）

1，angular:小易，只作用与view层。基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by

2，React ：专注通用平台的 UI 开发工具，函数式编程模式，状态管理方案，CSS-in-JS。

3，Ember ：全能框架，学习曲线较高。性能没有vue高

4，Polymer ：依赖最新的 Web 组件特性，在不支持的浏览器中，需要加载polyfill，性能也会受到影响。相对的，Vue.js 无需任何依赖，最低兼容到IE9。严格限制了它的数据绑定系统，例如，Polymer 模板支持的表达式仅有逻辑逆运算和简单的方法调用。它的计算属性实现得也不是很灵活

5，Riot 2.0； 提供类似的基于组件的开发模式（Riot 称之为“标签”），API 小而美。真实的条件渲染，Riot 渲染所有的分支，然后简单地显示/隐藏它们；；一个强大得多的路由器，Riot 的路由 API 过于简陋；；更成熟的工具链支持，见 Webpack + vue-loader；；过渡效果系统，Riot 没有；；更佳的性能。Riot 实际上使用脏检查而不是 Virtual DOM，因而遭受跟 Angular 一样的性能问题。

学习技能树：

Vue(angular,react,ember…) view层框架 node,require语法AMD模块化设计commonJS(ES6)模块设计框架webPack(browerify)打包项目。

Vue实例：

1，构造器：

var viewModel = new Vue({});传入数据data、模板、挂载元素el、方法methods、生命周期钩子created

复用的组件构造器: var MyComponent = Vue.extend({});

var myComponentInstance = new MyComponent();//继承

2，属性与方法

Data内会被vm对象代理。只有被代理的属性是响应的。之后添加到data中的数据不会被响应。可用$区分代理与对象

1)created。在该对象的不同生命时态可以定义不同的函数。

created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
compiled、 ready 、destroyed

2)数据绑定方式：

用在html普通值中：{{插值}}，{{*单次插值}}，{{{按其原本字符，如不要解析html}}}

用在标签中：

绑定表达式：只能包含一表达式，不能包含(赋值)语句。也不行流程控制语句，但可转化成如下三元表达式

{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
过滤器表达式”|”：

3)v-指令：为元素添加响应式特殊行为

v-if,v-else,v-show,
v-bind(:),v-on(v-on:click=”放在method中的一方法名”)
v-for(item in items),v-on:(@)，
v-model

3，计算属性：需要多于一个表达式的逻辑时，一些数据需要根据其它数据变化

computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
}
}

//getter,setter方法
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

调用vm.fullName = ‘John Doe’时，等于调用set方法，get中的数据同时在变化

4，Class,style的绑定：v-bind (会自动添加厂商前缀)

class="{{ className }}";v-bind:class;
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
data: {
isA: true,
isB: false
}

<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

5，过渡transition：

6，Vue组件

7，Vue构建大型应用

PS：查看官方文档可能会学的更清晰。本篇博文更像是一篇笔记，一篇阅读官方文档之后的摘抄