jquery vue 替代_「框架篇」不需构建 使用 Vue 替换 jQuery
我们可以像使用 jQuery 一样，不需要进行编译构建，通过 script 标签将 vue.js 引入到项目之中。这里我们使用 Vue 和 jQuery 两种技术栈 实现项目中一些常见的功能，以及阐述我们为什么我们要着么做。
只重构一些代码，我们可以通过 script 标签 像引入 jQuery 样来引入 Vue.：
html>
Vue/jQuery接下来我们对开发中的一些常见功能，通过使用 Vue 和 jQuery 来对比两个版本的实现差异。
监听用户输入
在一些网页上，一个非常常见的功能是用户在输入表单时，监听用户的输入。
jQuery 版本：
html>
HTML
用户名:
JS
$(function() {
$('#app').keyup(function(e) {
varformname = $(this).find('.formname');
varn_input = $(this).find('#thing').val();
formname.empty();
formname.append(n_input);
});
});
vue 版本：
HTML
用户名:
{{ name }}
JS
//创建一个Vue实例
newVue({
el:'#app',
data: {
name:''
}
})
这个例子中体现了 Vue 的一些优点，Vue 是响应式的，它能够响应内容的变化。您可以看到，当我们更新表单输入的内容时，它会立即发生变化。
而在 jQuery 版本中，DOM 处于控制状态，我们从DOM中取出内容，添加到对应的 DOM 之中。如果要更改 HTML 元素的结构，我们必须调整我们的 JS 代码以对应这些更改。
在Vue版本中，我们通过v-model指令创建数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。 v-model 本质上是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
切换类名
通过点击 button 按钮，来改变文本的字体颜色。
jQuery 版本：
HTML
Toggleme
这是一段文本
JS
$(function() {
$('button').click(function(e) {
$('.toggle').toggleClass('red');
$(this).attr('aria-pressed', ($(this).attr('aria-pressed') =="false"?true:false));
});
});
Vue 版本：
HTML
Toggleme
这是一段文本
JS
newVue({
el:'#app',
data: {
active:false
}
})
在 jQuery 版本中，我们将状态存储在 DOM 中，jQuery 通过 DOM 操作 class 名来决定文本字体颜色的改变。
在Vue版本中，red 这个 class 存在与否将取决于数据属性 active。我们根据该属性来设置 red 是否存在。我们不要求 DOM 获取这些信息，我们只需要修改数据的状态即可。
隐藏和显示
这个例子中，我们通过点击 button 来控制按钮的按压状态aria-expanded和内容的显示与隐藏。
jQuery 版本：
HTML
显示/隐藏
hello
JS
$(function() {
$('#toggle').on('click',function() {
$('.hello').toggle();
$(this).attr('aria-expanded', ($(this).attr('aria-expanded') =="false"?true:false));
});
});
Vue 版本：
HTML
显示/隐藏
hello
JS
newVue({
el:'#app',
data: {
show:true
}
})
在这个例子的 Vue 版本中，我们使用了 v-if 指令，v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 时被渲染。
另一个用于根据条件展示元素的选项是v-show指令。不同的是带有v-show的元素始终会被渲染并保留在 DOM 中。v-show只是简单地切换元素的 CSS 属性 display。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
提交表格
jQuery 通过 AJAX 来提交表单，而 Vue 实际上没有像 AJAX 这样的内置东西，在 Vue 应用程序中，通常使用类似 Axios(用于发出HTTP请求的JavaScript库)来帮助完成此任务。
这个例子中，在我们输入表单之前，按钮将显示为灰色，当有用户名输入时，按钮将变为蓝色，当我们提交表单时，我们会阻止页面加载。
jQuery 版本：
HTML
Name:
Email:
Submit
JS
$(function() {
varbutton = $("button");
varname = $("input[name=name]");
name.keyup(function() {
if(name.val().length >0) {
button.addClass('active');
}else{
button.removeClass('active');
}
});
$("form").submit(function(event) {
//阻止表单刷新
event.preventDefault();
//获得表单字段集
varformData = {
name: $("input[name=name]").val(),
email: $("input[name=email]").val(),
caps: $("input[name=caps]").val()
};
// ajax post 提交
$.ajax({
type:"POST",
url:"提交表单的url",
data: formData,
dataType:"json",
encode:true
}).done(function(data) {
dosomething...
});
});
});
Vue 版本：
HTML
Name:
Email:
Submit
JS
newVue({
el:'#app',
data() {
return{
name:'',
email:'',
activeClass:'active'
}
},
methods: {
submitForm() {
axios.post('提交表单的url', {
name:this.name,
email:this.email,
}).then(response => {
//do something
})
}
}
})
在 Vue 版本中，使用我们之前使用的v-model指令进行数据双向绑定，来获取提交的表单字段。我们通过用户名是否存在来切换 button 按钮的状态。通过使用事件修饰符.prevent处理表单只进行提交，而不进行页面刷新操作。我们引入 axios cdn，来代替 jQuery 的 Ajax。
结论
JQuery 封装了大量常用的 DOM 操作，使开发者在编写 DOM 操作相关程序的时候能够得心应手，完全使用 jQuery 进行开发，是完全没有问题的。
本文旨在 Vue 对于不需要大量开销的小型 web 应用来说也是一个非常好的选择。如果随着时间的推移项目变得越来越复杂，您也可以轻松地将此代码通过 webpack 构建转换为组件程序。这意味着您可以使用单文件组件，使用 template 语法同时写 HTML CSS 和 JS，可以将您的代码构建成单个可重用的组件。
选择将 Vue 合并到其他框架的项目中不要求您立即改变原有的代码和结构，您甚至可以随着时间的推移缓慢地进行推进和重构。由于 Vue主张最少，具有多变的灵活性，因此人们通常称Vue为渐进式框架。
扫一扫
关注我