vuejs

[magicdawn]

All on vue.js

学习方式为 vue v.s Ractive.js

学习内容

• 基本语法
• component 系统

[magicdawn]

vue : n, 视图,意见,看法.
名字起的真不赖呢~

[magicdawn]

模板 mustache binding V.S 指令directive

Ractive 是只有模板, 没有directive, 模板里都是mustache binding, 而vue支持directive指令, 这意味着
在一般页面中, 可以使用普通的DOM结构作为模板, 而Ractive只能是写一个 wrapper , 传模板进去.

[magicdawn]

指令 directive

http://vuejs.org/api/directives.html

v-

• text/html : 管内容的
• show : 管display的
• if/repeat 管逻辑的
• attr/class/style 可以传复杂的键值对
• on 事件系统
• model 双向绑定

[magicdawn]

Ractive v.s Vue

Vue的star 数量已经9K了, 升的好快~

单向绑定, 即 数据 -> DOM

1. 普通mustache绑定 , 与 Ractive.js 一致

2. 使用 directive 指令时, 不能使用mustache binding 如

双向绑定

lib	syntax
Ractive	`input-text
Vue	v-model

但是

1. Vue 的 v-model, 如果keypath 是后添加的, 不能直接使用 = 触发改变, 而要使用 $set
   e.g https://jsfiddle.net/okv0rgrk/239/ # 注意注释掉的部分
2. 新添加的keypath, 不能触发 $watch , 例如例子中的, $watch('checked'), 在jsfiddle中可以触发, 在项目中用请求ajax数据, v-model = checked.123456 , 123456是某一项id, 触发不了$watch, 郁闷(Note 是dolphin, 在vue分支)

Note:

1. $watch = Ractive.prototype.observe, 但是 observe可以 observe('checked.*)', 新添加的 keypath 也可以很好的处理,
2. 上面的问题, 新增 keypath 不能触发 $watch

模板

差不多的部分

1. foreach 遍历, Ractive中使用mustache binding, vue中使用 v-for="item in items"
2. Ractive中使用 {{#if var}}{{/if}}, vue中使用 v-if='var'

Vue便利部分

1. 支持 class/style 特殊写法, 例子
   `html

`
2. 事件/方法 位置统一

// Vue
new Vue({
  data: { /* data */ },
  computed: {/* computed */},
  methods: { /* 一些方法 */ }
});

v-on:click="m1"
v-on:click="m2($event)"
m1 / m2 都只需定义在 methods 即可

Ractive.js
on-click="m1" , 此时 m1: 为events
on-click="m2(event)", 此时 m2 为methods
data={{ getList() }} , 此时 getList 为获取数据的办法,可以定义到跟 data 同级, 也可以放到 data里, 这种不要使用了, 比较混乱

Vue支持 filter

[magicdawn]

vuejs/vue#1783

使用 array 该写dolphin里的筛选器之后, 可以使用, 但是 array 使用起来真没一个 object 方便

• 查询, obj[id] v.s array.indexOf(id) > -1
• 设置值, obj[id] = true | false v.s if(true & 不存在) push else if(false & 存在) remove

_lodash .remove 与 Vue 不兼容, 使用 Array.prototype.splice 即可