Vue基础语法中，如何深入理解数据绑定、事件处理及扩展组件？

2026-05-23 01:451阅读0评论SEO教程
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计4029个文字，预计阅读时间需要17分钟。

文章：Vue基础入门指南：数据绑定、事件处理、组件扩展和生命周期

前言：

本篇文章主要讲解了Vue框架的基础语法，包括数据绑定、事件处理、组件扩展和生命周期等，适合Vue新手小白入门学习。文章内容简单易懂，附带案例分析及源代码，帮助读者快速掌握Vue的基本使用。

一、Vue基础介绍

Vue（读音 /vjuː/，类似于 view）是一个用于构建用户界面的渐进式JavaScript框架。Vue的核心库只关注视图层，易于上手，也便于与其他库或已有项目整合。Vue的数据绑定、组件系统、声明式渲染等特性，使得开发效率大幅提升。

二、数据绑定

数据绑定是Vue的核心特性之一，它实现了视图与数据之间的自动同步。在Vue中，可以使用`v-bind`指令或简写`:`来绑定数据到视图。

示例代码：

{{ message }}

三、事件处理

Vue允许在元素上绑定事件处理函数，通过`v-on`指令或简写`@`来实现。

示例代码：

四、组件扩展

Vue组件是Vue的核心概念之一，可以将代码封装成可复用的组件。组件可以扩展，包括props、slots、events等。

示例代码：

五、生命周期

Vue组件的生命周期包括创建、挂载、更新和销毁等阶段。生命周期钩子函数可以帮助我们在不同的阶段执行相应的操作。

示例代码： {{ message }}

总结：

通过以上内容，相信你已经对Vue的基础语法有了初步的了解。希望这篇文章能够帮助你快速入门Vue框架，并在实际项目中运用所学知识。

文章主要讲Vue的数据绑定、事件处理、扩展组件和生命周期等基础语法的介绍，是新手小白入门学习Vue框架的不错推荐。（简单易懂，案例分析，附源码） 前言：

本篇文章主要讲解了Vue实例对象的创建、常用内置指令的使用、自定义组件的创建、生命周期（钩子函数）等。以及个人的心得体会，汇集成本篇文章，作为自己对Vue基础知识入门级的总结与笔记。

其中介绍了使用Vue框架创建一个简单的学生列表实现增加和删除数据信息的功能，对自己初次了解Vue的基础知识做一个检验是个不错的选择。

文章篇幅较长，还请读者可以耐心看完（适合刚接触Vue框架的新人）

以下所有案例代码均在此模板下完成

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta www.baidu.com”。

1 <div id="app"> 2 <a href="www.baidu.com" v-on:click.prevent>阻止默认行为</a> 3 <a href="www.baidu.com">不阻止默认行为</a> 4 </div> 5 <script> 6 var vm = new Vue({ 7 el: '#app' 8 }) 9 </script>

2.3.capture事件捕获

事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。

  1. 编写页面结构代码。
  2. 创建vm实例对象，并定义methods选项。
  3. 在methods中分别定义doParent()和doThis事件处理函数。

1 <div id="app"> 2 <div v-on:click.capture="doParent"> 3 <button v-on:click="doThis">事件捕获</button> 4 </div> 5 </div> 6 <script> 7 var vm = new Vue({ 8 el: '#app', 9 methods: { 10 doParent () { 11 console.log('我是父元素的单击事件') 12 }, 13 doThis () { 14 console.log('我是当前元素的单击事件') 15 } 16 } 17 }) 18 </script>

2.4.self将事件绑定到自身，只有自身才能触发

事件修饰符.self用来实现只有DOM元素本身会触发事件。

  1. 定义页面结构代码，并绑定单击事件。
  2. 在methods中定义doParent()和doThis()事件处理函数。

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .Odiv1 {width: 80px; height: 80px; background: #aaa; margin:5px;} 8 .Odiv2 {width: 50px; height: 50px; background: #ccc;} 9 </style> 10 <script src="vue.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <div class="Odiv1" v-on:click.self="doParent">a 15 <div class="Odiv2" v-on:click="doThis">b</div> 16 </div> 17 <div class="Odiv1" v-on:click="doParent">c 18 <div class="Odiv2" v-on:click.self="doThis">d</div> 19 </div> 20 </div> 21 <script> 22 var vm = new Vue({ 23 el: '#app', 24 methods: { 25 doParent () { 26 console.log('我是父元素的单击事件') 27 }, 28 doThis () { 29 console.log('我是当前元素的单击事件') 30 } 31 } 32 }) 33 </script> 34 </body> 35 </html>

2.5.once事件只触发一次

只触发一次事件处理函数

1 <div id="app"> 2 <button v-on:click.once="doThis">只执行一次</button> 3 </div> 4 <script> 5 var vm = new Vue({ 6 el: '#app', 7 methods: { 8 doThis () { 9 console.log('我是当前元素的单击事件且只执行一次') 10 } 11 } 12 }) 13 </script>

五、Vue扩展组件 1.组件的定义

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

组件特性：

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

案例展示：在根标签中，通过<my-component>标签定义组件页面结构。

注册计数器组件。

1 <div id="app"> 2 <my-component></my-component> 3 <my-component></my-component> 4 <my-component></my-component> 5 </div> 6 <script> 7 Vue.component('my-component', { 8 data () { 9 return { 10 count: 0 11 } 12 }, 13 template: '<button v-on:click="count++">被单击{{count}}次</button>' 14 }) 15 var vm = new Vue({ el: '#app' }) 16 </script>

2.局部注册组件

Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现。

  1. 定义根标签。
  2. 设置components选项中myComponent的属性值为com1。

1 <div id="app"> 2 <my-component></my-component> 3 </div> 4 <script> 5 var com1 = { 6 template: '<p>我是vm实例中的局部组件</p>' 7 } 8 var vm = new Vue({ 9 el: '#app', 10 // 注册局部组件 11 components: { myComponent: com1 } 12 }) 13 </script>

3.template模板

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

案例展示：通过模板template的id值实现与组件my-component绑定。

  1. 定义id值为tmp1的template模板。
  2. 通过Vue.component()定义my-component组件。
  3. 在vm实例中定义title的初始数据为“我是vm实例的title”。

1 <div id="app"> 2 <p>{{title}}</p> 3 <my-component></my-component> 4 </div> 5 6 <template id="tmp1"> 7 <p>{{title}}</p> 8 </template> 9 10 <script> 11 Vue.component('my-component', { 12 template: '#tmp1', 13 data () { 14 return { 15 title: '我是组件内的title', 16 } 17 } 18 }) 19 var vm = new Vue({ 20 el: '#app', 21 data: { 22 title: '我是vm实例的title' 23 } 24 }) 25 </script>

4.组件之间数据传递 4.1组件之间的依赖关系

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

4.2props传值

props即道具，用来接收父组件中定义的数据，其值为数组，数组中是父组件传递的数据信息。

案例展示：子组件接收父组件传递的数据“title”。

1 <div id="app"> 2 <my-parent name="title"></my-parent> 3 </div> 4 <script> 5 Vue.component('my-parent',{ 6 props: ['name'], 7 template: '<div>我是父组件{{name}}</div>' 8 }) 9 var vm = new Vue({ 10 el: '#app' 11 }) 12 </script>

4.3$emit传值

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

案例展示：实现子组件向父组件传值。

  1. 父组件定义事件处理函数transContent，并接收payload参数。
  2. 触发父组件中绑定的childfn事件，并传递子组件中的message数据。
  3. 单击页面中的“send”按钮，页面展示子组件的消息。

1 <div id="app"> 2 <parent></parent> 3 </div> 4 5 <template id="child"> 6 <div> 7 <button @click="click">Send</button> 8 <input type="text" v-model="message"> 9 </div> 10 </template> 11 12 <script> 13 Vue.component('parent', { 14 template: '<div><child @childFn="transContent"></child>' + 15 '子组件传来的值 : {{message}}</div>', 16 data () { 17 return { 18 message: '' 19 } 20 }, 21 methods: { 22 transContent (payload) { 23 this.message = payload 24 } 25 } 26 }) 27 // child组件 28 Vue.component('child', { 29 template: '#child', 30 data () { 31 return { 32 message: '子组件的消息' 33 } 34 }, 35 methods: { 36 click () { 37 this.$emit('childFn', this.message); 38 } 39 } 40 }) 41 var vm = new Vue({ el: '#app' }) 42 </script>

5.组件切换

v-if与v-else ： Vue中的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页应用开发。

定义登录和注册页面组件。

1 <div id="app"> 2 <a href="#" @click.prevent="flag ? flag : flag = !flag">登录</a> 3 <a href="#" @click.prevent="flag ? flag = !flag : flag">注册</a> 4 <login v-if="flag"></login> 5 <register v-else="flag"></register> 6 </div> 7 <script> 8 Vue.component('login', { 9 template: '<div>登录页面</div>' 10 }) 11 Vue.component('register', { 12 template: '<div>注册页面</div>' 13 }) 14 var vm = new Vue({ 15 el: '#app', 16 data: { flag: true } 17 }) 18 </script>

六、Vue生命周期 1.钩子函数

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

所有生命周期钩子的this上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以this不会指向预期的组件实例，并且this.fetchTodos将会是 undefined。

Vue官网(API — Vue.js (vuejs.org))中有12个钩子函数，这里只介绍其中常用的8个。

钩子

说明

beforeCreate

创建实例对象之前执行

created

创建实例对象之后执行

beforeMount

页面挂载成功之前执行

mounted

页面挂载成功之后执行

beforeUpdate

组件更新之前执行

updated

组件更新之后执行

beforeDestroy

实例销毁之前执行

destroyed

实例销毁之后执行

2.案列分析 2.1beforeCreate和created

创建实例对象之前或实例对象创建之后执行

在vm配置对象中分别定义beforeCreate和created钩子函数。

1 <div id="app">{{msg}}</div> 2 <script> 3 var vm = new Vue({ 4 el: '#app', 5 data: { msg: '张三' }, 6 beforeCreate () { 7 console.log('实例创建之前') 8 console.log(this.$data.msg) 9 }, 10 created () { 11 console.log('实例创建之后') 12 console.log(this.$data.msg) 13 } 14 }) 15 </script>

2.2beforeMount和mounted

在实例创建后，如果挂载点el存在，就进行页面挂载

在实例中配置对象中分别定义beforeMount和mounted。

1 <div id="app">{{msg}}</div> 2 <script> 3 var vm = new Vue({ 4 el: '#app', 5 data: { msg: '张三' }, 6 beforeMount () { 7 console.log('挂载之前') 8 console.log(this.$el.innerHTML) // 通过this.$el获取el的DOM元素 9 }, 10 mounted () { 11 console.log('挂载之后') 12 console.log(this.$el.innerHTML) 13 } 14 }) 15 </script>

2.3beforeUpdate和updated

Vue实例挂载完成后，当数据发生变化时，会执行beforeUpdate和updated钩子函数。

  1. 编写页面结构。
  2. 在vm实例对象中分别定义beforeUpdate和updated。

1 <div id="app"> 2 <div v-if="isShow" ref="self">test</div> 3 <button @click="isShow = !isShow">更新</button> 4 </div> 5 <script> 6 var vm = new Vue({ 7 el: '#app', 8 data: { isShow: false }, 9 beforeUpdate () { 10 console.log('更新之前') 11 console.log(this.$refs.self) 12 }, 13 updated () { 14 console.log('更新之后') 15 console.log(this.$refs.self) 16 } 17 }) 18 </script>

2.4beforeDestroy和destroyed

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

  1. 创建vm实例。
  2. 在vm实例中定义beforeDestroy和destroyed生命周期函数。

1 <div id="app"> 2 <div ref="self">test</div> 3 </div> 4 <script> 5 var vm = new Vue({ 6 el: '#app', 7 data: { msg: '张三' }, 8 beforeDestroy () { 9 console.log('销毁之前') 10 console.log(this.$refs.self) 11 console.log(this.msg) 12 console.log(vm) 13 }, 14 destroyed () { 15 console.log('销毁之后') 16 console.log(this.$refs.self) 17 console.log(this.msg) 18 console.log(vm) 19 } 20 }) 21 // 在控制台执行：vm.$destroy()，查看效果 22 </script>

总结：

看完本篇文章，你会了解到data数据、methods方法和computed计算属性的定义，使用v-model进行双向数据绑定，使用v-on进行事件绑定，使用.prevent阻止事件默认行为，使用.stop阻止事件冒泡，以及使用props实现父组件向子组件数据传递等Vue基础知识。

以上便是本篇文章所写的关于Vue基础知识所有内容了，码字不易，对你有帮助的话，请给个三连（关注、点赞、收藏）有问题可评论区留言讨论。

后期会完善Vue基础语法的其他相关知识，有帮助的话，敬请关注楼主后续发文(不定时发文)

转载时请注明出处链接

如果没有配置Vue学习的开发环境请移步博主另一篇文章进行配置：Vue框架学习开发环境配置详解

参考文献：

1.Vue官网：API | Vue.js (vuejs.org)

2.传智播客-黑马程序员课程视频：stu.ityxb.com/

其他随笔推荐（作者力推）：

1. 十大排序算法（Java实现）：www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html

标签：vue基础语法数据绑定

相关推荐

198256联邦学习中，如何处理基于混合分布的Non-IID样本划分问题？198261分布式系统中如何实现高效的领导选举机制？198274PHP中哪些函数使用不当可能导致安全风险？198277Zookeeper如何进行安装及掌握其基本操作技巧？198278Spring源码解析：finishRefresh方法详细解读？198290清华ucore操作系统课程笔记有哪些要点？198304如何运用机器学习中的线性回归进行数据整理分析？198308如何从哪三个关键层面有效优化Python代码执行效率？198313医学图像处理中，如何高效进行数据读写操作？198315数据科学学习手札134中，pyjanitor如何为pandas扩展更多实用功能？198337联邦学习arxiv 2.16-3.10的一周聚焦内容有哪些？198340如何深入理解开发人员必备的哈希函数密码学原理？198355CSAPP-Lab04架构实验室：如何深入剖析其核心原理？198361如何快速上手七天接手的react项目？198371ASP.NET Core 6实例演示第20讲有哪些亮点？198373如何通过CSS巧妙制作渐变效果彩色二维码？

本文共计4029个文字，预计阅读时间需要17分钟。

文章：Vue基础入门指南：数据绑定、事件处理、组件扩展和生命周期

前言：

本篇文章主要讲解了Vue框架的基础语法，包括数据绑定、事件处理、组件扩展和生命周期等，适合Vue新手小白入门学习。文章内容简单易懂，附带案例分析及源代码，帮助读者快速掌握Vue的基本使用。

一、Vue基础介绍

Vue（读音 /vjuː/，类似于 view）是一个用于构建用户界面的渐进式JavaScript框架。Vue的核心库只关注视图层，易于上手，也便于与其他库或已有项目整合。Vue的数据绑定、组件系统、声明式渲染等特性，使得开发效率大幅提升。

二、数据绑定

数据绑定是Vue的核心特性之一，它实现了视图与数据之间的自动同步。在Vue中，可以使用`v-bind`指令或简写`:`来绑定数据到视图。

示例代码：

{{ message }}

三、事件处理

Vue允许在元素上绑定事件处理函数，通过`v-on`指令或简写`@`来实现。

示例代码：

四、组件扩展

Vue组件是Vue的核心概念之一，可以将代码封装成可复用的组件。组件可以扩展，包括props、slots、events等。

示例代码：

五、生命周期

Vue组件的生命周期包括创建、挂载、更新和销毁等阶段。生命周期钩子函数可以帮助我们在不同的阶段执行相应的操作。

示例代码： {{ message }}

总结：

通过以上内容，相信你已经对Vue的基础语法有了初步的了解。希望这篇文章能够帮助你快速入门Vue框架，并在实际项目中运用所学知识。

文章主要讲Vue的数据绑定、事件处理、扩展组件和生命周期等基础语法的介绍，是新手小白入门学习Vue框架的不错推荐。（简单易懂，案例分析，附源码） 前言：

本篇文章主要讲解了Vue实例对象的创建、常用内置指令的使用、自定义组件的创建、生命周期（钩子函数）等。以及个人的心得体会，汇集成本篇文章，作为自己对Vue基础知识入门级的总结与笔记。

其中介绍了使用Vue框架创建一个简单的学生列表实现增加和删除数据信息的功能，对自己初次了解Vue的基础知识做一个检验是个不错的选择。

文章篇幅较长，还请读者可以耐心看完（适合刚接触Vue框架的新人）

以下所有案例代码均在此模板下完成

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta www.baidu.com”。

1 <div id="app"> 2 <a href="www.baidu.com" v-on:click.prevent>阻止默认行为</a> 3 <a href="www.baidu.com">不阻止默认行为</a> 4 </div> 5 <script> 6 var vm = new Vue({ 7 el: '#app' 8 }) 9 </script>

2.3.capture事件捕获

事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。

  1. 编写页面结构代码。
  2. 创建vm实例对象，并定义methods选项。
  3. 在methods中分别定义doParent()和doThis事件处理函数。

1 <div id="app"> 2 <div v-on:click.capture="doParent"> 3 <button v-on:click="doThis">事件捕获</button> 4 </div> 5 </div> 6 <script> 7 var vm = new Vue({ 8 el: '#app', 9 methods: { 10 doParent () { 11 console.log('我是父元素的单击事件') 12 }, 13 doThis () { 14 console.log('我是当前元素的单击事件') 15 } 16 } 17 }) 18 </script>

2.4.self将事件绑定到自身，只有自身才能触发

事件修饰符.self用来实现只有DOM元素本身会触发事件。

  1. 定义页面结构代码，并绑定单击事件。
  2. 在methods中定义doParent()和doThis()事件处理函数。

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .Odiv1 {width: 80px; height: 80px; background: #aaa; margin:5px;} 8 .Odiv2 {width: 50px; height: 50px; background: #ccc;} 9 </style> 10 <script src="vue.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <div class="Odiv1" v-on:click.self="doParent">a 15 <div class="Odiv2" v-on:click="doThis">b</div> 16 </div> 17 <div class="Odiv1" v-on:click="doParent">c 18 <div class="Odiv2" v-on:click.self="doThis">d</div> 19 </div> 20 </div> 21 <script> 22 var vm = new Vue({ 23 el: '#app', 24 methods: { 25 doParent () { 26 console.log('我是父元素的单击事件') 27 }, 28 doThis () { 29 console.log('我是当前元素的单击事件') 30 } 31 } 32 }) 33 </script> 34 </body> 35 </html>

2.5.once事件只触发一次

只触发一次事件处理函数

1 <div id="app"> 2 <button v-on:click.once="doThis">只执行一次</button> 3 </div> 4 <script> 5 var vm = new Vue({ 6 el: '#app', 7 methods: { 8 doThis () { 9 console.log('我是当前元素的单击事件且只执行一次') 10 } 11 } 12 }) 13 </script>

五、Vue扩展组件 1.组件的定义

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

组件特性：

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

案例展示：在根标签中，通过<my-component>标签定义组件页面结构。

注册计数器组件。

1 <div id="app"> 2 <my-component></my-component> 3 <my-component></my-component> 4 <my-component></my-component> 5 </div> 6 <script> 7 Vue.component('my-component', { 8 data () { 9 return { 10 count: 0 11 } 12 }, 13 template: '<button v-on:click="count++">被单击{{count}}次</button>' 14 }) 15 var vm = new Vue({ el: '#app' }) 16 </script>

2.局部注册组件

Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现。

  1. 定义根标签。
  2. 设置components选项中myComponent的属性值为com1。

1 <div id="app"> 2 <my-component></my-component> 3 </div> 4 <script> 5 var com1 = { 6 template: '<p>我是vm实例中的局部组件</p>' 7 } 8 var vm = new Vue({ 9 el: '#app', 10 // 注册局部组件 11 components: { myComponent: com1 } 12 }) 13 </script>

3.template模板

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

案例展示：通过模板template的id值实现与组件my-component绑定。

  1. 定义id值为tmp1的template模板。
  2. 通过Vue.component()定义my-component组件。
  3. 在vm实例中定义title的初始数据为“我是vm实例的title”。

1 <div id="app"> 2 <p>{{title}}</p> 3 <my-component></my-component> 4 </div> 5 6 <template id="tmp1"> 7 <p>{{title}}</p> 8 </template> 9 10 <script> 11 Vue.component('my-component', { 12 template: '#tmp1', 13 data () { 14 return { 15 title: '我是组件内的title', 16 } 17 } 18 }) 19 var vm = new Vue({ 20 el: '#app', 21 data: { 22 title: '我是vm实例的title' 23 } 24 }) 25 </script>

4.组件之间数据传递 4.1组件之间的依赖关系

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

4.2props传值

props即道具，用来接收父组件中定义的数据，其值为数组，数组中是父组件传递的数据信息。

案例展示：子组件接收父组件传递的数据“title”。

1 <div id="app"> 2 <my-parent name="title"></my-parent> 3 </div> 4 <script> 5 Vue.component('my-parent',{ 6 props: ['name'], 7 template: '<div>我是父组件{{name}}</div>' 8 }) 9 var vm = new Vue({ 10 el: '#app' 11 }) 12 </script>

4.3$emit传值

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

案例展示：实现子组件向父组件传值。

  1. 父组件定义事件处理函数transContent，并接收payload参数。
  2. 触发父组件中绑定的childfn事件，并传递子组件中的message数据。
  3. 单击页面中的“send”按钮，页面展示子组件的消息。

1 <div id="app"> 2 <parent></parent> 3 </div> 4 5 <template id="child"> 6 <div> 7 <button @click="click">Send</button> 8 <input type="text" v-model="message"> 9 </div> 10 </template> 11 12 <script> 13 Vue.component('parent', { 14 template: '<div><child @childFn="transContent"></child>' + 15 '子组件传来的值 : {{message}}</div>', 16 data () { 17 return { 18 message: '' 19 } 20 }, 21 methods: { 22 transContent (payload) { 23 this.message = payload 24 } 25 } 26 }) 27 // child组件 28 Vue.component('child', { 29 template: '#child', 30 data () { 31 return { 32 message: '子组件的消息' 33 } 34 }, 35 methods: { 36 click () { 37 this.$emit('childFn', this.message); 38 } 39 } 40 }) 41 var vm = new Vue({ el: '#app' }) 42 </script>

5.组件切换

v-if与v-else ： Vue中的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页应用开发。

定义登录和注册页面组件。

1 <div id="app"> 2 <a href="#" @click.prevent="flag ? flag : flag = !flag">登录</a> 3 <a href="#" @click.prevent="flag ? flag = !flag : flag">注册</a> 4 <login v-if="flag"></login> 5 <register v-else="flag"></register> 6 </div> 7 <script> 8 Vue.component('login', { 9 template: '<div>登录页面</div>' 10 }) 11 Vue.component('register', { 12 template: '<div>注册页面</div>' 13 }) 14 var vm = new Vue({ 15 el: '#app', 16 data: { flag: true } 17 }) 18 </script>

六、Vue生命周期 1.钩子函数

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

所有生命周期钩子的this上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以this不会指向预期的组件实例，并且this.fetchTodos将会是 undefined。

Vue官网(API — Vue.js (vuejs.org))中有12个钩子函数，这里只介绍其中常用的8个。

钩子

说明

beforeCreate

创建实例对象之前执行

created

创建实例对象之后执行

beforeMount

页面挂载成功之前执行

mounted

页面挂载成功之后执行

beforeUpdate

组件更新之前执行

updated

组件更新之后执行

beforeDestroy

实例销毁之前执行

destroyed

实例销毁之后执行

2.案列分析 2.1beforeCreate和created

创建实例对象之前或实例对象创建之后执行

在vm配置对象中分别定义beforeCreate和created钩子函数。

1 <div id="app">{{msg}}</div> 2 <script> 3 var vm = new Vue({ 4 el: '#app', 5 data: { msg: '张三' }, 6 beforeCreate () { 7 console.log('实例创建之前') 8 console.log(this.$data.msg) 9 }, 10 created () { 11 console.log('实例创建之后') 12 console.log(this.$data.msg) 13 } 14 }) 15 </script>

2.2beforeMount和mounted

在实例创建后，如果挂载点el存在，就进行页面挂载

在实例中配置对象中分别定义beforeMount和mounted。

1 <div id="app">{{msg}}</div> 2 <script> 3 var vm = new Vue({ 4 el: '#app', 5 data: { msg: '张三' }, 6 beforeMount () { 7 console.log('挂载之前') 8 console.log(this.$el.innerHTML) // 通过this.$el获取el的DOM元素 9 }, 10 mounted () { 11 console.log('挂载之后') 12 console.log(this.$el.innerHTML) 13 } 14 }) 15 </script>

2.3beforeUpdate和updated

Vue实例挂载完成后，当数据发生变化时，会执行beforeUpdate和updated钩子函数。

  1. 编写页面结构。
  2. 在vm实例对象中分别定义beforeUpdate和updated。

1 <div id="app"> 2 <div v-if="isShow" ref="self">test</div> 3 <button @click="isShow = !isShow">更新</button> 4 </div> 5 <script> 6 var vm = new Vue({ 7 el: '#app', 8 data: { isShow: false }, 9 beforeUpdate () { 10 console.log('更新之前') 11 console.log(this.$refs.self) 12 }, 13 updated () { 14 console.log('更新之后') 15 console.log(this.$refs.self) 16 } 17 }) 18 </script>

2.4beforeDestroy和destroyed

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

  1. 创建vm实例。
  2. 在vm实例中定义beforeDestroy和destroyed生命周期函数。

1 <div id="app"> 2 <div ref="self">test</div> 3 </div> 4 <script> 5 var vm = new Vue({ 6 el: '#app', 7 data: { msg: '张三' }, 8 beforeDestroy () { 9 console.log('销毁之前') 10 console.log(this.$refs.self) 11 console.log(this.msg) 12 console.log(vm) 13 }, 14 destroyed () { 15 console.log('销毁之后') 16 console.log(this.$refs.self) 17 console.log(this.msg) 18 console.log(vm) 19 } 20 }) 21 // 在控制台执行：vm.$destroy()，查看效果 22 </script>

总结：

看完本篇文章，你会了解到data数据、methods方法和computed计算属性的定义，使用v-model进行双向数据绑定，使用v-on进行事件绑定，使用.prevent阻止事件默认行为，使用.stop阻止事件冒泡，以及使用props实现父组件向子组件数据传递等Vue基础知识。

以上便是本篇文章所写的关于Vue基础知识所有内容了，码字不易，对你有帮助的话，请给个三连（关注、点赞、收藏）有问题可评论区留言讨论。

后期会完善Vue基础语法的其他相关知识，有帮助的话，敬请关注楼主后续发文(不定时发文)

转载时请注明出处链接

如果没有配置Vue学习的开发环境请移步博主另一篇文章进行配置：Vue框架学习开发环境配置详解

参考文献：

1.Vue官网：API | Vue.js (vuejs.org)

2.传智播客-黑马程序员课程视频：stu.ityxb.com/

其他随笔推荐（作者力推）：

1. 十大排序算法（Java实现）：www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html