Vue学习笔记：创建一个Vue实例

最新推荐文章于 2022-03-19 12:55:48 发布

howard2005

最新推荐文章于 2022-03-19 12:55:48 发布

阅读量490

点赞数

分类专栏： Vue学习笔记文章标签： Vue

本文链接：https://blog.csdn.net/howard2005/article/details/99619650

版权

Vue学习笔记专栏收录该内容

11 篇文章 5 订阅

订阅专栏

1、访问Vue官网https://cn.vuejs.org，进入学习模块下的教程

2、创建页面index.html

3、通过script标签在head部分引入vue.js

4、在body部分创建一个div标签（设置id属性）与一个Vue实例

5、在浏览器里显示index.html网页

6、传统方式是通过DOM来实现

1、访问Vue官网https://cn.vuejs.org，进入学习模块下的教程

单击【开发版本】：

复制页面全部内容，在目录E:\WebStormProjects\VueLearning下创建一个vue.js文件，将内容粘贴进去，如下图所示：

2、创建页面index.html

3、通过script标签在head部分引入vue.js

4、在body部分创建一个div标签（设置id属性）与一个Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div> <!--通过双重花括号访问Vue实例里的数据-->
<script>
    new Vue({
        el: "#root", // 通过el属性绑定页面元素
        data: {
            msg: "Hello Vue World"
        }
    });
</script>
</body>
</html>