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>

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

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

Vue学习笔记：创建一个Vue实例相关推荐

「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
activiti7关联mysql_学习笔记：一个MySQL实例有多个Activiti数据库问题
学习笔记:一个MySQL实例有多个Activiti数据库问题使用SpringBoot + activiti6 搭建审批流项目,数据库使用的是MySQL.且我的数据库下存在多个activiti相关的数 ...
Vue学习笔记1---初识vue
1.vue的前世今生在vue之前,有angular.react前端框架,vue算是后起之秀. 2013年 [中]尤雨溪大佬的GitHub主页 ^_^ gigyyx990803 (Evan You ...
安装Vue node 及创建一个Vue 项目
安装Vue 和 node 及创建一个Vue 项目一下载node.js安装包 1 下载资源包,然后安装 2 点击以上的Run(运行),将出现如下界面,然后一直点击Next 直达安装完成 3 检测P ...
golang游戏开发学习笔记-创建一个能自由探索的3D世界
此文写在golang游戏开发学习笔记-用golang画一个随时间变化颜色的正方形之后,感兴趣可以先去那篇文章了解一些基础知识,在这篇文章里,我们将创建一个非常简单(只有三个方块)但能自由探索的的3D世 ...
vue学习笔记十：Vue中引入jquery
文章目录前言一.引入方式 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目二.使用方法 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目总结前言本篇实现vu ...
怎么样用vue ui来创建一个vue项目
1.在命令行中输入vue ui点击回车(前提是你的环境已经配置好了) 2.自动弹出一个网页,点击中间的创建分类栏目,并选择好文件夹目录 3.点击在此创建新项目 4.输入项目的名称点击下一步按钮 5.选 ...
日志库 winston 的学习笔记 - 创建一个使用 winston 的 Node.js 应用
winston 被设计为一个简单且通用的日志库,支持多种传输. 传输本质上是日志的存储设备. 每个 winston 记录器都可以在不同级别配置多个存储渠道.例如,人们可能希望将错误日志存储在持久的远程 ...
vue学习笔记一：vue项目中设置背景图片
这几天在用vue开发一个项目,真的是到处都是坑啊,就连设置图片背景,也和前面用的不一样了,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来, background:url( ...
OpenCascade学习笔记-创建一个简单的OpenCascade单文档
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Open ...

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

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

2、创建页面index.html

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

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

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

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

Vue学习笔记：创建一个Vue实例相关推荐

最新文章

热门文章