html js 跳出框架,现在的web框架为什么把html和js又结合在一起了？

我觉得Vue之类框架跟jQuery库的理念是不同的.

jQuery顾名思义就是JS Query DOM,理念是"事件监听+DOM操作",通过DOM操作分离HTML和JS,可以理解为分离HTML界面和JS逻辑.另外jQuery也对常用的"AJAX回调"和"动画"以及一些"常用操作(如$.each和$.trim)"进行封装.也就是说用jQuery编程跟用原始JS编程的理念是一样的,只不过用jQuery能让你"Write Less Do More".

Vue之类MVVM框架的特点就在于VM(View-Model),也就是"视图模型双向绑定":

View <=> DOM Listeners / Data Bindings <=> Model

Vue"视图模型双向绑定"的底层实现一样是"事件监听+DOM操作",好处在于它不需要开发者来进行DOM操作.

比如在input里输入内容,在input下即时显示:

Vue:

{{message}}

var demo = new Vue({

el: '#demo',

data: {message: 'Hello Vue.js!'}

});

jQuery:

$("#demo input").on("keyup", function() {

$("#demo p").empty().text(this.value);

});

再看一个复杂点的例子,感受下两者的区别.

在input中输入内容后按enter键往ul里添加一条li和删除:

事件监听: v-on:keyup.enter (按enter键)

数据模型: v-model

Vue:

• {{todo.text}}

  X

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:

• jQuery X

//处理enter添加事件

$("#app input").on("keyup", function(e){

if(e.keyCode == 13 && $(this).val() != "") {

$("#app ul").append("

"+this.value+" X");

$(this).val("").focus();

}

}).focus();

//处理button删除事件

$("#app").on("click", "button", function(){

$(this).parent().remove();

});

从回调函数里的操作可以看出,Vue是面向数据编程,jQuery是面向DOM编程.