Vue v2.0.4 发布了,Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
该版本更新内容:
构建
The npm distribution now includes
dist/vue.runtime.js, a UMD version of the runtime only build that can be used in browsers. It is also available on CDN.
改进
20% SSR performance improvements by eliminating closures with context passing (via #4007 by @HerringtonDarkholme)
修复
fix transition error when using one delay to control all transitions (via #3932 by @guidobouman)
#3940 fix root v-else not rendering in prod (via #3943 by @chrisvfritz)
#3942 fix Vue.set not supporting sparse array (via #3947 by @leonlau)
#3957 fix global props mixin
#3958, #3979 fix v-model binding with array indice (via #3988 by @defcc)
#3964 fix
v-onceinsidev-for#4018 fix
.numbermodifier for select, radio and checkbox (via #4022 by @defcc)#4055 fix
stylemerging on component nodes in SSR (via #4076 by @HerringtonDarkholme)#4062 fix components option object compatibility with Webpack 2 wildcard import
fix TypeScript definitions for RenderContext (via #4099 by @kaorun343)
#4107 fix domProps unset for
v-htmlfix
attrsanddomPropsmerging on component nodes in SSR
Vue:
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{todo.text}}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
var vm = new Vue({
el: '#app',
data: {
newTodo: '',
todos: [{text: 'Add some todos'}]
},
methods: {
addTodo: function() {
var text = this.newTodo.trim();
if(text) {
this.todos.push({text: text});
this.newTodo = '';
}
},
removeTodo: function(index) {
this.todos.splice(index, 1); //从下标index开始,删除1个元素
}
}
});
jQuery:
<div id="app">
<input>
<ul>
<li><span>jQuery</span> <button>X</button></li>
</ul>
</div>
//处理enter添加事件
$("#app input").on("keyup", function(e){
if(e.keyCode == 13 && $(this).val() != "") {
$("#app ul").append("<li>"+this.value+" <button>X</button></li>");
$(this).val("").focus();
}
}).focus();
//处理button删除事件
$("#app").on("click", "button", function(){
$(this).parent().remove();
});
Vue:
<div id="demo">
<input v-model="message">
<p>{{message}}</p>
</div>
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
});
jQuery:
<div id="demo">
<input>
<p></p>
</div>
$(function(){
$("p").text($("input").attr("value"));
$("#demo input").on("input", function() { //IE8没有input事件,可以换成keyup
$("#demo p").empty().text(this.value);
}).focus();
});