Vue.js开发基础（上）

最新推荐文章于 2023-09-27 23:45:00 发布
最新推荐文章于 2023-09-27 23:45:00 发布
阅读量992 收藏
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45443449/article/details/115937567
版权

本篇文章是我根据vue官方文档所整理的一篇文章，便于观看，因为我还是初学者，有不对的地方多多指教。

Vue.js开发基础（上）

一. 用Vue.js在页面上显示“Hello Vue”

在这里插入图片描述

<body>
	<div id="app">{{msg}}</div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				msg: 'Hello Vue'
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

二. 创建Vue实例

通过new关键字实例化vue({})构造函数

<body>
	<!-- 引入vue.js包 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			// 选项
		})
	</script>
</body>

Vue实例配置对象

选项说明
el唯一根元素
dataVue实例数据对象
methods定义Vue实例中的方法
computed计算属性
components定义子组件
watch监听数据变化
filters过滤器

1. el 唯一根标签

在创建实例Vue时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。
在这里插入图片描述

如图效果，声明式的将数据渲染到页面。

<body>
	<!-- 定义唯一根元素div -->
	<div id="app">{{msg}}</div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',  //通过el与div元素绑定
			data: {
				msg: 'Vue实例创建成功！'
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

2. data 初始数据

Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。
在这里插入图片描述

<body>
	<!-- 定义唯一根元素div -->
	<div id="app">{{msg}}</div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',  //通过el与div元素绑定
			data: {
				msg: 'Vue实例创建成功！'
			}
		})
		// 访问data数据，并在控制台显示
		console.log(vm.$data.msg);
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body

3. methods 定义方法

  • methods属性用来定义方法，通过Vue实例可以直接访问这些方法；
  • 在定义的方法中，this指向Vue实例本身；
  • 定义在methods属性中的方法可以作为页面中的事件处理方法使用；
  • 当事件触发后，指向相应的事件处理方法。
    在这里插入图片描述

如图所示，单击按钮后触发showInfo()方法，将我们定义的数据msg声明式渲染到页面。

<body>
	<!-- 定义唯一根元素div -->
	<div id="app">
		<!-- 为button按钮绑定click事件 -->
		<button @click="showInfo">请单击</button>
		<p>{{msg}}</p>
	</div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',  //通过el与div元素绑定
			data: {
				msg: ''
			},
			methods: {
				// 定义事件处理方法showInfo
				showInfo() {
					this.msg = '触发单击事件'
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

4. computed 计算属性

计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。
在这里插入图片描述

当点击“增加数量”按钮的时候，“数量”增加，“总价格”也随着“数量”的变化同步变化。

<body>
	<!-- 定义唯一根元素div -->
	<div id="app">
		<p>总价格：{{totalPrice}}</p>
		<p>单价：{{price}}</p>
		<p>数量：{{num}}</p>
		<div>
			<button v-on:click="num == 0 ? 0 : num--">减少数量</button>
			<button v-on:click="num++">增加数量</button>
		</div>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',  //通过el与div元素绑定
			data: {
				price: 20,
				num: 0
			},
			computed: {
				// 总价格totalPrice
				totalPrice(){
					return this.price * this.num
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

5. watch 状态监听

通过watch获取citiName的新值和旧值。
在这里插入图片描述

在input文本框里输入/删除的时候，右边控制台实时监听文本框的新值和旧值。

<body>
	<div id="app">
		<input type="text" v-model="cityName"/>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				cityName: 'shanghai'
			},
			watch: {
				cityName (newName,oldName){
					console.log(newName,oldName)
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

6. filters 过滤器

在页面中直接操作数据，返回最终结果。
示例一：在插值表达式中使用filters过滤器，将小写字母转换为大写字母
在这里插入图片描述

过滤器将数据转换成大写后渲染到页面。

<body>
	<div id="app">
		{{ msg | toUpcase }}
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				msg: 'hello world'
			},
			filters: {
				toUpcase(value) {
					return value ? value.toUpperCase() : ''
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

示例二：在v-bind属性绑定中使用filters过滤器
在这里插入图片描述

过滤器将原本的id处理后渲染到页面。

<body>
	<div id="app">
		<div v-bind:id="dataId | formatId">hello world</div>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				dataId: 'dff1'
			},
			filters: {
				formatId(value) {
					return value ? value.charAt(1) + value.indexOf('d') : ''
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

message | filterA：管道符，前面的值会传到后面的作为参数处理。

message | filterA | filterB：filterA被定义为接收单个参数的过滤器函数，表达式message的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB，将filterA的结果传递到filterB中。

三. Vue数据绑定

绑定样式

Vue提供了样式绑定功能，可以提供绑定内联样式和绑定样式类这两种方法来实现。

1. 通过绑定内联样式实现元素的背景色红色和粉色

在这里插入图片描述

通过绑定样式属性值和样式对象改变DOM元素的样式。

<body>
	<div id="app">
		<!-- 绑定样式属性值 -->
		<div v-bind:style="{backgroundColor: pink, width: width, height: height}">
			<!-- 绑定样式对象 -->
			<div v-bind:style="myDiv"></div>
		</div>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				myDiv: {
					backgroundColor: 'red',
					width: '100px',
					height: '100px'
				},
				pink: 'pink',
				width: '200px',
				height: '200px'
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

2. 通过绑定data中的类名实现元素样式

在这里插入图片描述

<head>
	<style>
		.box {
			background-color: pink;
			width: 200px;
			height: 200px;
		}
		.inner {
			background-color: red;
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div v-bind:class="{box}">我是box
			<div v-bind:class="{inner}">我是inner</div>
		</div>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				box: 'box',
				inner: 'inner'
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

常用内置指令

路径说明
v-model双向数据绑定
v-bind单向数据绑定
v-text插入文本内容
v-html插入包含HTML的内容
v-on监听事件
v-for列表渲染
v-if条件渲染
v-show显示隐藏

1. v-model指令

v-model主要实现数据双向绑定，通常用在表单元素上，例如input、textarea、select等。
在这里插入图片描述

改变输入框里的值，输入框后面的值实时改变，与输入框里的内容一致。

<body>
	<div id="app">
		<input type="text" v-model="msg">{{msg}}
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				msg: 'v-model指令'
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

v-model修饰符

  • .lazy鼠标离开后绑定数据
  • .number输入字符串转为有效的数字
  • .trim输入首尾空格过滤

2. v-bind指令

v-bind可以实现属性单向数据绑定。
在这里插入图片描述

通过v-bind绑定输入框的value为我们自己定义的数据属性。

<body>
	<div id="app">
		<input type="text" v-bind:value="msg">
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				msg: 'v-bind指令'
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

3. v-text指令

v-text是在DOM元素内部插入文本内容。
在这里插入图片描述

<body>
	<div id="app">
		<p v-text="msg"></p>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				msg: 'v-text指令'
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

4. v-html指令

v-html是在DOM元素内部插入HTML标签内容。
在这里插入图片描述

<body>
	<div id="app">
		<div v-html="msg"></div>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				msg: '<h2>v-html指令</h2>'
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

5. v-on指令

v-on是事件监听指令，直接与事件类型配合使用。
在这里插入图片描述

<body>
	<div id="app">
		<p>{{msg}}</p>
		<button v-on:click="showInfo">单击</button>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				msg: '请单击查看内容'
			},
			methods: {
				showInfo() {
					this.msg = 'v-on指令'
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

6. v-for指令

v-for可以实现页面列表渲染，常用来循环数组。
在这里插入图片描述

<body>
	<div id="app">
		<div v-for="(item, index) in list" data-id="index">
			索引是：{{index}}，元素内容是：{{item}}
		</div>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				list: [1, 2, 3]
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

7. v-if指令

v-if用来控制元素的销毁与重建，属性为布尔值。
在这里插入图片描述

<body>
	<div id="app">
		<div v-if="isShow">v-if指令</div>
		<button @click="isShow = !isShow">销毁/重建</button>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				isShow: true
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

8. v-show指令

v-show用来控制元素的隐藏与显示，属性为布尔值。
在这里插入图片描述

<body>
	<div id="app">
		<div v-show="isShow">v-show指令</div>
		<button @click="isShow = !isShow">隐藏/显示</button>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				isShow: true
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

四. Vue事件

事件监听

1. v-on绑定事件

在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法。如下案例，实现获取随机数。
在这里插入图片描述
在这里插入图片描述

<body>
	<div id="app">
		<button @click="count = Math.random()">点击生成随机数</button>
		<p>自动生成的随机数是：{{count}}</p>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				count: 0
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

2. 使用按键enter修饰符监听按键

在这里插入图片描述

<body>
	<div id="app">
		<input type="text" @keyup.enter="submit">
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			methods: {
				submit() {
					console.log('表单提交');
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

常用事件修饰符

修饰符说明
.stop阻止事件冒泡
.prevent阻止默认事件行为
.capture事件捕获
.self将事件绑定到自身，只有自身才能触发
.once事件只触发一次

1. .stop事件修饰符

  • 在前端开发中，复杂的页面结构需要很多事件来完成交互行为；
  • 默认的事件传递方式是冒泡，同一事件类型可能会在元素内部和外部触发，有可能会造成事件的错误触发，所以就需要使用.stop修饰符阻止事件冒泡行为。
    在这里插入图片描述
    在这里插入图片描述
<body>
	<div id="app">
		<div @click="doParent">
			<button @click="doThis">事件冒泡</button>
			<button @click.stop="doThis">阻止事件冒泡</button>
		</div>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			methods: {
				doParent() {
					console.log('我是父元素单击事件');
				},
				doThis() {
					console.log('我是子元素单击事件');
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

2. .prevent事件修饰符

HTML标签具有自身特性，例如，<a>标签被单击时会自动跳转。在实际开发中，如果<a>标签的默认行为与事件发生冲突，此时可以使用.pervent修饰符来阻止<a>标签的默认行为。
在这里插入图片描述

点击“不阻止默认行为”页面会跳转到百度页面，而点击“阻止默认行为”页面则无反应。

<body>
	<div id="app">
		<a href="https://www.baidu.com">不阻止默认行为</a>
		<a href="https://www.baidu.com" @click.prevent>阻止默认行为</a>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

3. .capture事件修饰符

事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。
在这里插入图片描述
在这里插入图片描述

<body>
	<div id="app">
		<div @click.capture="doParent">
			<button @click.capture="doThis">事件捕获</button>
		</div>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			methods: {
				doParent() {
					console.log('我是父元素的单击事件');
				},
				doThis() {
					console.log('我是子元素的单击事件');
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

4. .self事件修饰符

事件修饰符.self用来实现只有DOM元素本身会触发事件。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<head>
	<style>
		.Odiv1 {
			width: 80px;
			height: 80px;
			background: #aaa;
			margin: 5px;
		}
		.Odiv2 {
			width: 50px;
			height: 50px;
			background: #ccc;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="Odiv1" @click.self="doParent">a
			<div class="Odiv2" @click="doThis">b</div>
		</div>
		<div class="Odiv1" @click="doParent">c
			<div class="Odiv2" @click.self="doThis">d</div>
		</div>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			methods: {
				doParent() {
					console.log('我是父元素的单击事件');
				},
				doThis() {
					console.log('我是当前元素的单击事件');
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

5. .once事件修饰符

只触发一次事件处理函数。
在这里插入图片描述
在这里插入图片描述

<body>
	<div id="app">
		<button @click="doThis1">无限制</button>
		<button @click.once="doThis2">只执行一次</button>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			methods: {
				doThis1() {
					console.log('我是无限制执行');
				},
				doThis2() {
					console.log('我只能执行一次');
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

组件

组件：在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。
组件特性：

  • 能够减少重复代码的编写，提高开发效率；
  • 降低代码之间的耦合程度，使项目更易维护与管理；
  • 根据业务逻辑实现复杂的项目功能。

1. 注册全局组件

Vue.component()方法用于全局注册组件。
在这里插入图片描述
在这里插入图片描述

<body>
	<div id="app">
		<my-component></my-component>
		<my-component></my-component>
		<my-component></my-component>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyComponent', {
			data() {
				return {
					count: 0
				}
			},
			template: `
				<button @click="count++">被单击{{count}}次</button>
			`
		})
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

2. 注册局部组件

通过Vue实例的components属性实现。
在这里插入图片描述

<body>
	<div id="app">
		<my-component></my-component>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			components: {
				MyComponent: {
					template: `
						<p>我是vm实例中的局部组件</p>
					`
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

3. template模板

Vue提供了<template>标签来定义结构的模板，可以在该标签中书写HTML代码，然后通过id值绑定到组件内的template属性上，这样就有利于在编辑器中显示代码提示和高亮显示，不仅改善了开发体验，也提高了开发效率。
在这里插入图片描述

<body>
	<div id="app">
		<p>{{title}}</p>
		<my-component></my-component>
	</div>
	<template id="tmp">
		<p>{{title}}</p>
	</template>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyComponent', {
			template: '#tmp',
			data() {
				return {
					title: '我是组件内的title'
				}
			}
		})
		var vm = new Vue({
			el: '#app',
			data: {
				title: '我是vm实例的title'
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

组件之间数据传递

组件之间的依赖关系：组件之间的数据传递需要借助一些工具（如props属性）来实现父组件向子组件传递数据信息。

1. props传值

props即道具，用来接收父组件中定义的数据，其值为数组，数组中是父组件传递的数据信息。
在这里插入图片描述

<body>
	<div id="app">
		<my-parent name="title"></my-parent>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyParent', {
			props: ['name'],
			template: `
				<div>我是父组件{{name}}</div>
			`
		})
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

2. $emit传值

$emit能够将子组件中的值传递到父组件中去。$emit可以触发父组件中定义的事件，子组件的数据信息通过传递参数的方式完成。
在这里插入图片描述
在这里插入图片描述

<body>
	<div id="app">
		<parent></parent>
	</div>
	<template id="child">
		<div>
			<button @click="click">Send</button>
			<input type="text" v-model="msg">
		</div>
	</template>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('Parent', {
			template: `
				<div>
					<child @childfn="transContent"></child>子组件传来的值：{{msg}}
				</div>
			`,
			data() {
				return {
					msg: ''
				}
			},
			methods: {
				transContent(payload) {
					this.msg = payload
				}
			}
		})
		Vue.component('Child', {
			template: '#child',
			data() {
				return {
					msg: '子组件的消息'
				}
			},
			methods: {
				click() {
					this.$emit('childfn', this.msg)
				}
			}
		})
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

组件切换

v-if与v-else：Vue的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页面应用开发。
在这里插入图片描述
在这里插入图片描述

<body>
	<div id="app">
		<a href="#" @click.prevent="flag ? flag : flag=!flag">登录</a>
		<a href="#" @click.prevent="flag ? flag=!flag : flag">注册</a>
		<login v-if="flag"></login>
		<register v-else></register>
	</div>
	<template id="child">
		<div>
			<button @click="click">Send</button>
			<input type="text" v-model="msg">
		</div>
	</template>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('Login', {
			template: `
				<div>登录页面</div>
			`
		})
		Vue.component('Register', {
			template: `
				<div>注册页面</div>
			`
		})
		var vm = new Vue({
			el: '#app',
			data: {
				flag: true
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

Vue生命周期

1. 钩子函数

钩子函数用来描述Vue实例从创建到销毁的整个生命周期。

钩子说明
beforeCreate创建实例对象之前执行
created创建实例对象之后执行
beforeMount页面挂载成功之前执行
mounted页面挂载成功之后执行
beforeUpdate组件更新之前执行
updated组件更新之后执行
beforeDestroy实例销毁之前执行
destroyed实例销毁之后执行

2. beforeCreate和created

创建实例对象之前或创建实例对象之后执行
在这里插入图片描述

<body>
	<div id="app">
		{{msg}}
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				msg: '张三'
			},
			beforeCreate() {
				console.log('创建实例之前');
				console.log(this.$data.msg);
			},
			created() {
				console.log('创建实例之后');
				console.log(this.$data.msg);
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

3. beforeMount和mounted

在实例创建后，如果挂载点el存在，就进行页面挂载。
在这里插入图片描述

<body>
	<div id="app">
		{{msg}}
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				msg: '张三'
			},
			beforeMount() {
				console.log('挂载之前');
				// 通过this.$el获取el的DOM元素
				console.log(this.$el.innerHTML);
			},
			mounted() {
				console.log('挂载之后');
				console.log(this.$el.innerHTML);
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

4. beforeUpdate和updated

Vue实例挂载完成后，当数据发生变化时，会执行beforeUpdate和updated钩子函数。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<body>
	<div id="app">
		<div v-if="isShow">test</div>
		<button @click="isShow=!isShow">更新</button>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				isShow: true
			},
			beforeUpdate() {
				console.log('更新之前');
				console.log(this.$refs.div);
			},
			updated() {
				console.log('更新之后');
				console.log(this.$refs.div);
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

5. beforeDestroy和destroyed

生命周期函数的最后阶段是实例的销毁，会执行beforeDestroy和destroyed函数。

养老院一霸ღ
关注
专栏目录
Vue 基础大纲
rddataqingkong的博客
11-22 1427
一. 内部指令 v-if v-else v-show v-if： 是否加载，可以减轻服务器的压力，在需要时加载。 v-show：调整dispaly属性，可以使客户端操作更加流畅。 v-for指令 ：解决模板循环问题 v-text &amp;amp; v-html v-on：绑定事件监听器 v-model、v-bind指令 v-model： 双向绑定、多用于表单元素。 v-bind...
Vue.js前端开发基础与项目实战
08-13
在“Vue.js前端开发基础与项目实战”这个主题中，我们将深入探讨Vue.js的核心概念、基本语法以及实际项目的构建过程。 1. **Vue.js核心概念**： - **虚拟DOM**：Vue.js使用虚拟DOM来提高网页更新性能，减少不必要...
Vuejs前端开发教学大纲.docx
06-15
Vuejs前端开发教学大纲.docxVuejs前端开发教学大纲.docxVuejs前端开发教学大纲.docxVuejs前端开发教学大纲.docxVuejs前端开发教学大纲.docxVuejs前端开发教学大纲.docxVuejs前端开发教学大纲.docxVuejs前端开发教学大纲.docxVuejs前端开发教学大纲.docx
VUE开发基础----上
hanserxx的博客
10-16 111
VUE开发基础----上 概述内容： 1.vue对象上的实例属性 2.数据绑定的一些方法（把重点提出来说明） 3.事件 4.组件 5.生命周期 实例属性： el data methods computed watch filter el ,data: 创建实例： var vm = new Vue({ el: '#app', //绑定div页面id data:{ name: }, methods：{ } })
《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx
06-15
《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx
Vuejs前端开发教学大纲.pdf
06-14
Vuejs前端开发教学大纲.pdfVuejs前端开发教学大纲.pdfVuejs前端开发教学大纲.pdfVuejs前端开发教学大纲.pdfVuejs前端开发教学大纲.pdfVuejs前端开发教学大纲.pdfVuejs前端开发教学大纲.pdfVuejs前端开发教学大纲.pdfVuejs前端开发教学大纲.pdf
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
Vue.js前端开发 PDF
05-30
1. **基础概念**：Vue.js的基础包括Vue实例、组件系统、模板语法、数据绑定等。Vue实例是应用的核心，负责管理应用的状态和方法。组件是Vue的可复用部分，类似于HTML元素，可以包含自己的视图和数据逻辑。模板语法是...
前端学习-超强VUE教程12（vue-axios）
qinjava的博客
07-19 120
vue-axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 官方文档 http://www.axios-js.com/zh-cn/docs/ 引入方式 1、模块化引入 npm install axios 2、 练习代码 <!
vue大纲.docx
05-11
vue大纲梳理，一目了然，入门简单易学，有需要的可以看看 vue大纲梳理，一目了然，入门简单易学，有需要的可以看看 vue大纲梳理，一目了然，入门简单易学，有需要的可以看看
vue的详解教学视频，学习概要以及学习大纲
02-20
这是一个vue的教学视频，介绍了学习vue知识的必要原因
基于Java和Vue的社区管理系统毕业论文以及其配套完整源码
06-18
个人的基于Java和Vue的社区管理系统毕业论文以及其配套完整源码，供学习研究 摘 要：随着社区管理社区商场管理规模的发展不断扩大，社区商场管理账务的业务逻辑的不断变化，开发一款适合中小规模社区商场管理使用的社区商场管理后台账务系统是很有必要的。本文主要采用安全性高，稳定性强和具有跨平台优势的VUE语言和功能强大开源免费的MYSQL数据库进行开发。 社区商场管理后台账务管理系统主要包含以下几个模块：系统管理、报表管理、仓库管理与销售分析图表等几大模块。从而，实现对进退货、库存、销售统计及账务分析等实现全面、动态、及时的管理。 关键词：社区管理系统；社区商场管理；Vue；Java
Vue从入门到精通
m0_57246577的博客
08-24 130
1.vue 数据绑定 vue中的数据绑定功能极大提高了开发效率。 1-1.数据绑定 ①绑定内联样式：通过 v-bind 将样式数据绑定给 DOM 元素。使用 v-bind 绑定样式时，vue做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象或数组。 <div id="app"> <div v-bind:style="{backgroundColor:pink,width:width,height:height}"> <div v-bi
vue 基础（一）
youhaiguo的博客
07-26 312
VUE 一. 开发工具 VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下： Vetur —— 语法高亮、智能感知、Emmet等 EsLint—— 语法纠错 Auto Close Tag —— 自动闭合HTML/XML标签 Auto Rename Tag —— 自动完成另一侧标签的同步修改 Path Intelli...
vue学习大纲知识点总结之一
PrisonersDilemma的博客
06-15 826
什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第...
Vue的学习大纲
weixin_50357864的博客
04-11 232
一、组件化开发 二、 前端模块化 三、webpack 四、Vue Cli
Vue框架学习大纲
最新发布
m0_57021623的博客
09-27 586
Vue 3 的响应系统得到了重写，使用 Proxy API 替代了 Vue 2 的 Object.defineProperty API，带来了更好的性能和更多的可能性。Vue 3 提供了改进的 TypeScript 类型支持，使得在 TypeScript 项目中使用 Vue 变得更加友好。Vue 3 引入了 Composition API，它提供了一种更灵活的代码组织方法，特别是对于更复杂的组件和逻辑。Vue 3 提供了模板语法的改进，包括新的 v-if 和 v-for 的用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值