Vue.js的导入

最新推荐文章于 2024-07-08 19:01:49 发布

斜月!三星

最新推荐文章于 2024-07-08 19:01:49 发布

阅读量267

点赞数

分类专栏：前端笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45248344/article/details/108586507

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

笔记

4 篇文章 0 订阅

订阅专栏

Vue.js的导入

Vue.js是一套构建用户界面的框架，只关注视图层
能减少不必要的DOM操作，只关心数据的业务逻辑

先创建项目目录
拷贝vue.js文件并导入HTML中
在页面上创建一个供vue控制的区域
在<script>中使用vue.js提供的构造函数创建Vue对象
在vue对象中使用el属性指明vue对象所控制页面上的区域的选择器
在vue对象中使用data属性指明vue对象以及el区域将会使用到的数据
在页面中使用vue对象属性data中定义的数据可以使用插值表达式，即使用{{ }}
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue.js ！'
            }
        });
    </script>
</body>
</html>