js、jQuery、Vue对比

最新推荐文章于 2025-03-18 09:39:40 发布

转载最新推荐文章于 2025-03-18 09:39:40 发布 · 1.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/WuLex

收录于

Vue.js(Vue 2/Vue 3)

当前文章被收录于：

Vue.js(Vue 2/Vue 3)

93 篇文章 7 人学习

渐进式 JavaScript 框架

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文通过实例演示了使用JavaScript、jQuery和Vue.js三种不同框架在网页上显示文本的方法。JavaScript直接操作DOM，jQuery利用库简化DOM操作，而Vue采用声明式渲染，展示了现代Web开发的不同面貌。

Javascript

<div id="app">
    
</div>
<script>
var app=document.querySelector("#app");
app.innerHTML = "hello javascript";
//输出为hello javascript
</script>

jQuery

<div id="app">
    
</div>
<script>
$(function (){
   $("#app").text("hello jquery")
});
//输出为hello  jquery
</script>

Vue

<div id="app">
   {{text}}
</div>
<script>
var app = new Vue({
    el: '#app',//选中id为app的元素
    data: {
        text:'hello  Vue'
    }
});
//输出为hello  Vue
</script>

vue可以实现追加

<div id="app">
   {{text}},{{message}}。
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        text:'hello  Vue'
         message:'今天我学习了vue' //可写多个
    }
});
//输出为hello  Vue，今天我学习了vue
</script>