本文中将描述：
- 第一个Vue程序的开发使用
- Vue 中的属性 el 基本使用说明
- Vue 中的属性 data 操作数据使用说明
1 Vue 中的hellow world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue基础</title>
</head>
<body>
<!-- 第三步 在html中使用-->
<div id="app">
{{message}}
</div>
<!-- 第一步 导入vue.js -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 第二步 在script中创建Vue实例 -->
<script>
var app = new Vue({
el: "#app",
data: {
message: "hellow world"
}
})
</script>
</body>
</html>
一个Vue实例其实就是 new Vue()，在这里使用到了 el属性和data属性。
官方文档中有很详细的说明，在这里我们可以理解为el 是将html中的元素节点与vue的实例关联起来了,data 是数据操作关联，例如我们这里定义的数据 message:“hellow world”，在html中的 通过{{}} 引用
<div id="app">
{{message}}
</div>
在这里，我们通过el:"#app" 是通过css选择器中id关联，我们也可以使用class选择器关联(当然也运行其他类型选择器)如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue基础</title>
</head>
<body>
<div class="app">
{{message}}
</div>
<!-- 第一步 -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: ".app",
data: {
message: "hellow world"
}
})
</script>
</body>
</html>
总结：
2 Vue 中的data 数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue基础</title>
</head>
<body>
<div id="app">
<!-- 标签中引用 字符串数据 -->
{{message}}
<!-- 标签中引用对象类型的数据 可能过点语法使用 -->
<p>姓名：{{ person.name}} 联系方式：{{person.wx}}</p>
<!-- 标签中引用数组类型的数据 -->
<p>地址是：{{ addres[0]}}</p>
</div>
<!-- 第一步 -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
// 字符串数据
message: "hellow world",
// object 对象类型数据
person: {
name: "张三",
wx: "zl928343994"
},
// 数组类型
addres: [
"北京",
"上涨"
]
}
})
</script>
</body>
</html>
总结 ：
