Vue2基本知识

2023-11-19

记录Vue2基本知识，从引入vue.js文件开始，然后提出问题：1：我们使用vue后怎样将外部数据传递给我们的DOM对象？2：DOM对象中的数据如果改变，如何通知外部数据改变？最后对问题分析得出答案，完整记录vue2中基础指令知识，提供完整代码

文章目录

前言
一、第一个Vue项目

前言

提示：本文要记录的大概内容

目前市场前后端已经分开。但是随着公司要求越来越高，面试的时候如果你可以拿出自己的项目，那么这就是你的一个亮点。本文将记录学习基础前端知识。使用的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"> 
		<!-- 插值表达式 -->
		{{message}}
		</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>{{message}}</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>{{person.name}}</td>
				<td>{{person.age}}</td>
				<td>{{person.gender}}</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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)