第一个Vue程序简单小例子

键盘侠Hyatt

已于 2022-03-15 22:49:52 修改

阅读量552

点赞数 1

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2022-03-15 22:45:53 首次发布

本文链接：https://blog.csdn.net/qq_18149105/article/details/123514392

版权

VUE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第一章第一个Vue程序

文章目录

第一章第一个Vue程序
前言
一、创建Vue工程
二、下载Vue.js插件
三、创建html
- 1.创建demo1.html
- 2.预览数据
总结

前言

Vue从入门到精通学习笔记

一、创建Vue工程

第一次学习为了快速实现，创建一个空文件夹vue-first,在IDEA中打开此文件夹作为工程。

二、下载Vue.js插件

在IDEA的Settings里的Plugins里安装Vue.js插件。
在这里插入图片描述

三、创建html

1.创建demo1.html

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<!--view层模板层-->
<div id="app">
     {{message}}
</div>

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //模板数据层
        data: {
            message: "hello vue!"
        }
    })
</script>

</body>
</html>