版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/bicongming/article/details/90173800
一、起步
开发环境引入vue.js，生产环境把vue.js换成vue.min.js，生产环境即线上正式运行环境，一般**.min.js都是混淆压缩后的js文件，体积更小
- 创建html文件，引入cdn的vue.js，或将vue.js文件放到你的项目文件夹下引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 创建第一个vue应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello World!"
}
})
</script>
</body>
</html>
<div id="app"></div>：应用的根标签，一个应用有且仅有一个根标签；
但同一个页面可以创建多个不同的应用，可以存在多个根标签；
根标签必须包含唯一id属性
再创建一个页面
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<div id="app1">
<div v-bind:title="title">鼠标悬停一会儿</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello World!"
}
});
var app1 = new Vue({
el:"#app1",
data:{
title:"这是一个title"
}
})
</script>
</body>
</html>
new Vue()：创建vue实例，需要传入一个选项对象，其中，必须包含el，用来指定实例挂载的元素，此外还包括数据（data）、方法（methods）、计算属性（computed）、生命周期钩子等，后面一一讲解。
——易动学院毕老师