首页 / VUE / Vue.js开发基础（上）

Vue.js开发基础（上）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue.js开发基础（上），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含18988字，纯文字阅读大概需要28分钟。

内容图文

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

Vue.js开发基础（上）

一.用Vue.js在页面上显示“Hello Vue”
二.创建Vue实例
- Vue实例配置对象
三.Vue数据绑定
四.Vue事件

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

Vue.js开发基础（上） - 文章图片

<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	唯一根元素
data	Vue实例数据对象
methods	定义Vue实例中的方法
computed	计算属性
components	定义子组件
watch	监听数据变化
filters	过滤器

1. el 唯一根标签

在创建实例Vue时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。
Vue.js开发基础（上） - 文章图片

<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的属性能够响应数据变化。
Vue.js开发基础（上） - 文章图片

<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实例创建成功！'
			}
		})
		console.log(vm.$data.msg);
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body

3. methods 定义方法

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

如图所示，单击按钮后触发showInfo()方法，给msg赋值，然后通过{{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 计算属性

计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。
Vue.js开发基础（上） - 文章图片

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

<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的新值和旧值。
Vue.js开发基础（上） - 文章图片

在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过滤器，将小写字母转换为大写字母
Vue.js开发基础（上） - 文章图片

<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过滤器
Vue.js开发基础（上） - 文章图片

<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>

三.Vue数据绑定

绑定样式

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

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

Vue.js开发基础（上） - 文章图片

<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中的类名实现元素样式

Vue.js开发基础（上） - 文章图片

<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等。
Vue.js开发基础（上） - 文章图片

<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>

2. v-bind指令

v-bind可以实现属性单向数据绑定。
Vue.js开发基础（上） - 文章图片

<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元素内部插入文本内容。
Vue.js开发基础（上） - 文章图片

<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标签内容。
Vue.js开发基础（上） - 文章图片

<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是事件监听指令，直接与事件类型配合使用。
Vue.js开发基础（上） - 文章图片

<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可以实现页面列表渲染，常用来循环数组。
Vue.js开发基础（上） - 文章图片

<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用来控制元素的销毁与重建，属性为布尔值。
Vue.js开发基础（上） - 文章图片

<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用来控制元素的隐藏与显示，属性为布尔值。
Vue.js开发基础（上） - 文章图片

<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代码，或绑定事件处理方法。如下案例，实现获取随机数。
Vue.js开发基础（上） - 文章图片

<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修饰符监听按键

Vue.js开发基础（上） - 文章图片

<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>标签的默认行为。
Vue.js开发基础（上） - 文章图片

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

<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事件修饰符

事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。
Vue.js开发基础（上） - 文章图片

<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元素本身会触发事件。
Vue.js开发基础（上） - 文章图片

<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事件修饰符

只触发一次事件处理函数。
Vue.js开发基础（上） - 文章图片

<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()方法用于全局注册组件。
Vue.js开发基础（上） - 文章图片

<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属性实现。
Vue.js开发基础（上） - 文章图片

<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属性上，这样就有利于在编辑器中显示代码提示和高亮显示，不仅改善了开发体验，也提高了开发效率。
Vue.js开发基础（上） - 文章图片

<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即道具，用来接收父组件中定义的数据，其值为数组，数组中是父组件传递的数据信息。
Vue.js开发基础（上） - 文章图片

<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可以触发父组件中定义的事件，子组件的数据信息通过传递参数的方式完成。
Vue.js开发基础（上） - 文章图片

<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的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页面应用开发。
Vue.js开发基础（上） - 文章图片

<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

创建实例对象之前或创建实例对象之后执行
Vue.js开发基础（上） - 文章图片

<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存在，就进行页面挂载。
Vue.js开发基础（上） - 文章图片

<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钩子函数。
Vue.js开发基础（上） - 文章图片

<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.js开发基础（上）全部内容，希望文章能够帮你解决Vue.js开发基础（上）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1002575.html

来源：【匿名】

首页 / VUE / Vue.js开发基础（上）

Vue.js开发基础（上）

内容导读

内容图文

Vue.js开发基础（上）

Vue.js开发基础（上）

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

二.创建Vue实例

Vue实例配置对象

1. el 唯一根标签

2. data 初始数据

3. methods 定义方法

4. computed 计算属性

5. watch 状态监听

6. filters 过滤器

三.Vue数据绑定

绑定样式

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

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

常用内置指令

1. v-model指令

2. v-bind指令

3. v-text指令

4. v-html指令

5. v-on指令

6. v-for指令

7. v-if指令

8. v-show指令

四.Vue事件

事件监听

1. v-on绑定事件

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

常用事件修饰符

1. .stop事件修饰符

2. .prevent事件修饰符

3. .capture事件修饰符

4. .self事件修饰符

5. .once事件修饰符

组件

1. 注册全局组件

2. 注册局部组件

3. template模板

组件之间数据传递

1. props传值

2. $emit传值

组件切换

Vue生命周期

1. 钩子函数

2. beforeCreate和created

3. beforeMount和mounted

4. beforeUpdate和updated

5. beforeDestroy和destroyed

内容总结

内容备注

内容手机端

【Vue.js开发基础（上）】教程文章相关的互联网学习教程文章

开发 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程