vuejs最简单实现 html+js

最新推荐文章于 2025-05-27 14:36:04 发布

仲斐

最新推荐文章于 2025-05-27 14:36:04 发布

阅读量1.8w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vuejs 前端

本文链接：https://blog.youkuaiyun.com/zhongfei1217/article/details/53140192

vue 专栏收录该内容

2 篇文章

订阅专栏

本文通过一个简单的实例，介绍如何使用VueJS实现响应式数据绑定。在创建的app.html和app.js文件中，展示了VueJS如何将前端视图与模型进行绑定，当修改文本框内容时，页面上的数据显示同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vuejs是一种构建用户界面的库，具体可参考http://cn.vuejs.org/v2/guide/

本文使用vuejs实现一个最简单的功能，即实现响应式的数据绑定，将前端的view和model绑定。

在vuetest文件夹下新建两个文件，app.html和app.js，app.html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuetest</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <h1>Vue demo</h1>
            <div id="app">
                <div>{{message}}</div>
                <input type="text" v-model="message">
            </div>
        </div>
    </div>
    <script src='https://unpkg.com/vue@2.0.5/dist/vue.js'></script>
    <script src="./app.js"></script>
</body>
</html>

其中<script src='https://unpkg.com/vue@2.0.5/dist/vue.js'></script>用于引入vue.js，也可以下载到本地，通过本地路径引入；

new Vue({
    el:'#app',
    data: {
        message:'hello vue.js.'
    }
});

需要注意的是，只有先引入vue.js才能在js中new Vue对象并绑定app，这样直接浏览器打开app.html就可以看到效果：

修改文本框中的内容，可以看到文本框上方的内容也在相应改变。