Add Vue.js implementation

[yyx990803]

Vue.js is an MVVM library focused on the interface layer. It was created to meet the need for a nimble, lightweight interface layer during rapid prototyping at Google Creative Lab. AngularJS was too heavy and intrusive for that purpose; Backbone simply doesn't offer much help in the view layer. Ractive.js was a valid choice, but it wasn't composable and we do like Anguler's POJO models. The result is Vue.js, which is simpler, faster, uses POJO by default, and offers composable ViewModels. It is extremely efficient for rapid prototyping, and can also be competent for larger apps when used together with a module system (e.g. Component or Browserify). I believe it offers a valuable alternative to existing libraries by finding a sweetspot between functionality and simplicity.

Vue.js is currently being used for a few internal projects at Google Creative Lab. Unfortunately I cannot share these projects due to confidentiality :(

The project will be actively maintained and is thoroughly tested (96% coverage).

Highlights

• Angular-style directives, filters, POJO models
• Backbone-style declarative, class-based API
• Reuse ViewModels as composable components (similar to React's composition)
• Expressive. Effective SLOC for this TodoMVC implementation: ~120
• CSS/JavaScript transition hooks
• Lightweight. 11.2kb gzipped.
• Blazing fast. see http://vuejs.org/perf/
• Ease of use. Drop-in usage or build with Component/Browserify.

About this Pull Request

• code styleguide observed
• jshint pass
• app spec observed
• browser tests pass (27/27)
• readme
• learn.json

Links:

• project website: http://vuejs.org/
• github repo: https://github.com/yyx990803/vue

[ColinEberhardt]

Thumbs up for running the automated tests on your new framework submission 👍

[yyx990803]

Thanks :)
I also have a CasperJS suite that is run on every commit: (althought less structured) https://github.com/yyx990803/vue/blob/dev/test/functional/specs/todomvc.js

[ColinEberhardt]

That's interesting, I've heard of Casper, but not used it myself. I'd be interested to compare the two approaches.

Out of interest, what is the development experience with Casper like? Let's say an assert fails, because it is a headless browser are you working 'blind', i.e. are you lacking in a way to iew the current page state?

With webdriverjs, I like the way I can watch the tests run - I can also pause them and inspect the DOM, test xpaths, etc … However, the webdriverjs asynchronous API can be challenging to use at times.

[yyx990803]

Yes, with Casper, if the problem cannot be directly identified in a real browser, then the debug has to be done by logging output/error or just print html at certain break points, which can sometimes be annoying. But it runs much faster than a selenium-based solution and can be run directly on a CI instance (which is why I still use it).

I also have experimented with several selenium related projects, namely selenium-webdriver, webdriverjs (it's a separate project) & wd. Among these three I find webdriverjs to have the cleanest src code/api, and I have a WIP syntax sugar for it: https://github.com/yyx990803/whipcream which I hope to use in future e2e tests for Vue.js.

In addition, nightwatch.js is a new selenium-based test runner which has a very friendly API.

[ColinEberhardt]

Thanks for the info - that certainly gives me more to explore. I was aware of the (slightly confusing) webdriverjs vs. selenium-webdriver, although wd and nightwatch are both new to me.

You are right - selenium can be quite slow. The entire TodoMVC test suite takes around 90 minutes to run.

[Munter]

'use strict; in the global scope may trigger problems with concatenation if other scripts aren't strict mode compatible. This is actually the case with Vue.js after an uglify minification. I suggest moving the strict statement into an IIFE to show best practice to people copying this solution.

[passy]

Thanks for the submission! :)

We discussed this internally and would like to include the example. I'll leave a few comments for the remaining issues, but big kudos for using Colin's new test suite!

[passy]

lower case doctype

[yyx990803]

I think I've fixed them all :)

[sindresorhus]

you can drop the version

[yyx990803]

I saw almost all the other examples have the version there, are you sure?

[sindresorhus]

yes, i helped write the spec ;)

note to self, fix the other ones.

[sindresorhus]

Can you add it to the site?

[yyx990803]

You mean to the todomvc site?

[sindresorhus]

@yyx990803 yes, just update index.html in root.

[yyx990803]

3522bd1

• added Vue.js to index.html
• dropped version in bower.json
• now computes remaining count
• fixed the single var statement

[sindresorhus]

landed. good stuff :)

[yyx990803]

\o/ Thanks guys!

[passy]

Great job, thanks @yyx990803!

[ColinEberhardt]

Nice work @yyx990803 - good to see a full set of test passes :-)

[QingChengGit]

How to understand component reuse?

[QingChengGit]

我通过Vue.extend方法创建了如下的一个组件:
var grid = Vue.extend({
template:'

' +
'',
data:function(){
return {
datas:[{name:'默认',age:'18'}]
};
},
el:function(){
return '.test';
},
methods:{
renderTable:function(data){
this.$data.datas = data;
},
showTable:function(){
},
destory:function(){
}
}
});
Vue.component('px-grid',grid);
在某个Html页面上有多个px-grid组件如下:


现在我想让class为change的组件显示的数据为我设置的数据，而不是组件默认的数据，代码如下：
var data = [{name:'张三',age:'20'},{name:'王慧',age:'21'},{name:'焊合',age:'19'}];
var grid = PXComponents.grid;
var myGrid = new grid();
myGrid.$el = '.change';
myGrid.renderTable(data);
但是效果是class为test的组件的数据发生了改变，而class为change的组件的数据还是默认数据。我想单独控制某个组件的数据不知道怎么做，请作者帮忙解惑下，不胜感激！谢谢！