本文详细介绍如何在现有项目中快速引入Vue.js，通过简单的步骤创建Vue实例，并在HTML页面中实现数据绑定，展示“Hello World”示例。文章涵盖Vue.js的引入方式、实例创建过程及核心参数解释。
十分钟上手vue.js helloworld
我们今天这里讲的是 直接在原来的项目中引入 vue.js文件，并创建一个vue的示例，简单讲讲vue在原有html页面中的应用
1、引入vue.js文件
（一）使用官网的 cdn引入
（二）使用hbuilder X
在使用hbuilder X新建项目时可以选 vue项目（普通模式）
项目路径和基础页面如图
2、 新建一个 vue 实例
官方文档 地址
步骤
1、在页面 body 创建一个 div 盒子 绑定一个 id
2、创建一个vue 实例 这里的 new Vue （V要大写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue 实例</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg: "hello world！！！"
}
})
</script>
</body>
</html>
参数说明
el：
挂载需要vue实例的页面 DOM元素 官方文档介绍
这里一般用id
data：
存放你所需要的数据 官方文档介绍
这里有两种基本使用方法
data: {
msg: "hello world！！！"
}
data() {
return{
msg: "hello world！！！"
}
}
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
