Vue2学习（三）：Vue2.js基础

阿标的博客

已于 2024-02-17 23:09:44 修改

阅读量859

点赞数 1

分类专栏： Vue学习文章标签： vue.js 学习

于 2023-07-02 09:48:06 首次发布

本文链接：https://blog.csdn.net/weixin_46175652/article/details/131351866

版权

Vue学习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

Vue2学习（三）：Vue2.js基础

一、了解什么是Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue的787原则

在使用之前首先需要了解下什么是787原则？787原则指的是7种属性、8个方法以及7个指令。

1、7种属性

el
绑定id，用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
相当于一个容器，跟上面的div id = "app"做关联，从此以后上面div id = "app"里面的内容要通过vue来渲染,都要经过vue处理才能看得到上面div里面的内容。
data
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
跟微信小程序一样，所有的变量都要写在data里面。
methods
放置页面中的业务逻辑，js方法一般都放置在methods中。
computed
定义计算属性的方法
根据已经存在的属性计算出新的属性，对于同样的数据，会缓存。当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新。其实一般情况，我也会把一些关于逻辑的代码都写在computed中。
template
用来设置模板，会替换页面元素，包括占位符
Vue.component（）组件中会用到，其实很多地方都会用到
watch
watch:function(new,old){ … }监听data中数据的变化，两个参数，一个返回新值，一个返回旧值
当你有一些数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时，建议使用watch
render
创建Virtual Dom

（1）computed和methods是有区别的：
computed是在值发生改变的时候才会触发效果，而methods只要刷新执行了就会触发，所有平时写VUE的时候，能用computed的尽量使用。

（2）computed和watch是有区别的：
watch: 监视,能够监听到数据的变化,只要数据变化的时候,都会自定执行对应的方法,其中可以检测的数据来源分为三部分 data , computed , props computed: 计算属性,存在一个计算缓存的特性,每一次计算之后,只要里面的逻辑不发生变化,每一次重复调用,都会使用上一次执行的结果,能够节省计算的时间。

2、8个方法

所谓的8个方法指的是Vue生命周期的8个钩子函数。

beforeCreate() 创建实例
created() 创建完成
beforeMount() 创建模板
mounted() 创建完成
beforeUpdate() 更新状态
updated() 更新完成
beforeDestory() 销毁 vue 实例
destoryed() 销毁完成

3、7个指令

v-text 在元素中插入值
v-html 在元素中插入html标签和文本
v-if 根据表达式的真假值来动态插入和移除元素
v-show 根据表达式的真假值通过控制css的display来隐藏和显示元素
v-for 根据变量的值来循环渲染元素
v-on 监听元素事件，执行相应操作
v-bind 绑定元素属性，执行相应操作
v-model 绑定input值和变量，实现数据视图的双向绑定

三、Vue基本语法

1、声明式渲染

<html>
	<head>
		<title>声明式渲染</title>
		<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!'
				}
			});
		</script>
	</body>
</html>

2、响应式渲染

v-bind 指令：绑定元素的属性。在实际应用中绑定元素属性时一般“v-bind:属性”可以简写为“:属性”

<html>
	<head>
		<title>响应式渲染</title>
		<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息</span>
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!'
				}
			});
		</script>
	</body>
</html>

3、条件渲染

v-if 指令：当条件返回的结果为true时渲染出结果。

<html>
	<head>
		<title>条件渲染</title>
		<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if="awesome">Vue is awesome</h1>
		</div>

		<div id="app1">
			<h1 v-if="flag">flag is true</h1>
			<h1 v-else>flag is false</h1>
		</div>

		<div id="app2">
			<h1 v-if="type == 'A'">type is A</h1>
			<h1 v-else-if="type == 'B'">type is B</h1>
			<h1 v-else>type is not A or B, but type is C</h1>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				awesome: true
			}
		});
		var app1 = new Vue({
			el: '#app1',
			data:{
				flag: false
			}
		});
		var app2 = new Vue({
			el: '#app2',
			data:{
				type: 'C'
			}
		});
	</script>
</html>

4、列表渲染

v-for 指令：将数组中的数据进行渲染。

<html>
	<head>
		<title>列表渲染</title>
		<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<li v-for="(stu,index) in students" :key="index">
			姓名：{{ stu.name }}，年龄：{{ stu.age }}
			</li>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				students: [
					{ name: "张三", age: 18},
					{ name: "李四", age: 19},
					{ name: "王五", age: 20},
					{ name: "赵六", age: 21}
				]
			}
		});
	</script>
</html>

5、事件处理

v-on 指令：绑定指定的元素，执行相应的事件。
按钮点击事件：v-on:click

<html>
	<head>
		<title>事件处理</title>
		<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click="sayHi()">Click me</button>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue'
			},
			methods: {
				sayHi(){
					alert(this.message);
				}
			}
		});
	</script>
</html>

键盘回车事件：v-on:keyup.enter

<html>
	<head>
		<title>事件处理</title>
		<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input v-on:keyup.enter="sayHi()" placeholder="input enter"></input>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue'
			},
			methods: {
				sayHi(){
					alert(this.message);
				}
			}
		});
	</script>
</html>

四、数据的双向绑定

1、什么是双向绑定

Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

2、为什么要实现数据的双向绑定

在Vue.js 中，如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。

3、在表单中实现数据的双向绑定

<html>
	<head>
		<title>数据双向绑定</title>
		<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>
			地址：
			<select v-model="select" style="width:100px;">
				<option>湖南</option>
				<option>湖北</option>
				<option>广东</option>
				<option>广西</option>
			</select>
			</p>
			<p>
			你选择的地址是：{{select}}
			</p>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				select: ''
			}
		});
	</script>
</html>

五、组件基础

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：
在这里插入图片描述

<html>
	<head>
		<title>Vue组件</title>
		<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<helloword v-for="item in items" v-bind:list="item"></helloword>
		</div>
	</body>
	<script>
	Vue.component('helloword',{
		props:['list'],
		template: '<li>{{list}}</li>'
	});
		var app = new Vue({
			el: '#app',
			data: {
				items:['A','B','C']
			}
		});
	</script>
</html>