js、jQuery、Vue对比

最新推荐文章于 2024-09-22 11:09:44 发布

.NET跨平台

最新推荐文章于 2024-09-22 11:09:44 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js(Vue 2/Vue 3)

原文链接：https://blog.youkuaiyun.com/WuLex

Vue.js(Vue 2/Vue 3) 专栏收录该内容

93 篇文章

订阅专栏

本文通过实例演示了使用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>