Vue基本使用

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文对比了传统的原生JavaScript、jQuery和Vue.js在实现'Hello World'时的不同方式。原生JS涉及DOM操作，jQuery简化了这一过程，而Vue.js则通过数据绑定和组件化实现。Vue.js的实例分析包括了元素挂载点（el）和数据模型（data），其插值表达式支持数据展示和计算，并通过编译过程将Vue语法转换为原生语法。

传统开发模式对比

原生JS

<div id="msg"></div>
<script type="text/javascript">
var msg = 'Hello World';
var div = document.getElementById('msg');
div.innerHTML = msg;
</script>

jQuery

<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var msg = 'Hello World';
$('#msg').html(msg);
</script>

Vue.js之HelloWorld基本步骤

Vue

<div id="app">
<div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'HelloWorld'
}
})
</script>