记录Vue2基本知识，从引入vue.js文件开始，然后提出问题：1：我们使用vue后怎样将外部数据传递给我们的DOM对象？2：DOM对象中的数据如果改变，如何通知外部数据改变？最后对问题分析得出答案，完整记录vue2中基础指令知识，提供完整代码
前言
提示：本文要记录的大概内容
目前市场前后端已经分开。但是随着公司要求越来越高，面试的时候如果你可以拿出自己的项目，那么这就是你的一个亮点。本文将记录学习基础前端知识。使用的IDE是HBuilderX。
提示：以下是本篇文章正文内容
一、第一个Vue项目
将使用HBuilderX创建一个基本的Vue项目。
1.引用vue.js文件
vue.js是js封装文件。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。 和引入外部普通js文件一样引入vue.js，代码如下：
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
或者：
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
2.Vue项目分析
我们思考两个问题：
1：我们使用vue后怎样将外部数据传递给我们的DOM对象？
2：DOM对象中的数据如果改变，如何通知外部数据改变？
这两个问题实际上是和Vue的双向绑定是有关系的。
现在我们必须明确知道MVVM架构。M（model）数据模型，V（view）视图层，VM（ViewModel）视图模型层。在MVVM架构中，我们将数据与视图分开，但是我们知道一个完整的项目数据与视图是不可能分开的，因为视图是用户可以直观看见的，而数据是用户执行操作后必须要关注的。我们此时的视图与数据分开只是将这两者的操作分开，实际上我们是在视图层与数据层之间添加了视图模型层，数据与视图的双向绑定就是通过数据模型层去处理的。这样子做的好处也是显而易见的，当我们程序出现问题后我们可以立马确实是视图还是数据出现问题，方便定位处理问题，我们在编写代码的时候条理更加清晰。
问题分析及答案：
1：当我们从外部传递数据给DOM对象的时候，我们必须知道将这个数据传递给那个DOM对象，数据显示在这个DOM对象的什么地方。 与传统的获取DOM对象类似，在Vue里面我们也必须指定DOM对象的id属性。我们通过id属性将DOM对象与Vue对象绑定在一起。 我们使用插值表达式去绑定数据。
2：因为我们实现了DOM对象与Vue对象双向绑定，所以当我们的DOM对象数据改变时，会通知Vue对象去改变外部数据。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app-v">
<!-- 插值表达式 -->
</div>
<script>
// 创建一个Vue对象
var app = new Vue({
// 通过DOM对象的id属性绑定DOM对象
el: '#app-v',
// 数据绑定
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
3.指令学习
v-text:这个指令是Vue中定义的DOM属性，相当于innerText。
v-html:这个指令是Vue中定义的DOM属性，相当于innerHtml。
v-on:这个指令是Vue中定义的DOM属性，用于设置监听事件，有两种使用方法。
代码如下：
<p v-text="message"></p>
<p v-html="message"></p>
<input type="button" value="测试按钮1" v-on:click="test1('aaaa')" />
<input type="button" value="测试按钮2" @click="test2('bbbb')" />
这里的v-text与v-html属性值是Vue对象里面的定义的数据模型值。是实现绑定的，两者必须一致。
v-on:click的属性值是Vue对象中定义的方法名。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>指令练习</title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app-v">
<p></p>
<p v-text="message"></p>
<p v-html="message"></p>
<input type="button" value="测试按钮1" v-on:click="test1('aaaa')" />
<input type="button" value="测试按钮2" @click="test2('bbbb')" />
</div>
<script>
var app = new Vue({
el: '#app-v',
data: {
message: '<b>Hello Vue!</b>'
},
methods: {
test1(a) {
this.message = a;
},
test2(b) {
this.message = b;
}
}
})
</script>
</body>
</html>
v-show：这个指令是控制DOM对象的显示与隐藏。指令属性值是我们在Vue对象的data里面定义的属性值。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>指令练习</title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app-v">
<img style="width: 960px;height: 640px;" v-show="show" src="img/0.jpg" />
<img style="width: 960px;height: 640px;" v-show="hidden" src="img/1.jpg" />
</div>
<script>
var app = new Vue({
el: '#app-v',
data: {
show: true,
hidden: true
},
})
</script>
</body>
</html>
v-if：这个指令也是控制DOM对象的显示与隐藏。但是与v-show指令的区别是，两者的属性值都是false的时候，v-show标签不会将隐藏的DOM对象删除掉，而v-if指令会将DOM元素删除掉。
v-else：与v-if指令配合使用，控制DOM对象的隐藏与展示。
v-model：这个指令相当于DOM对象的value属性。
v-bind：这个指令是用于绑定DOM对象的属性。
v-for：这个指令是用于循环数据。详细使用代码如下：
<template>
<div>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr v-for="person in people">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
people: [{
name: "Simon",
age: 22,
gender: "man"
}, {
name: "Simon",
age: 22,
gender: "man"
}, {
name: "Simon",
age: 22,
gender: "man"
}, {
name: "Simon",
age: 22,
gender: "man"
}]
}
}
}
</script>
<style>
</style>