Vue.js 系列教程 3:Vue-cli,生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks
译者:nzbin
这是 JavaScript 框架 Vue.js 五篇教程的第三部分。在这一部分,我们将学习 Vue-cli ,还会涉及真实的开发流程。这个系列教程并不是一个完整的用户手册,而是通过基础知识让你快速了解 Vuejs 以及它的用途。
系列文章:
- 渲染, 指令, 事件
- 组件, Props, Slots
- Vue-cli (你在这!)
- Vuex
- 动画
Vue-cli 和构建过程
如果你还没有读过上一部分关于 Vue.js 组件和 props 的内容,我强烈建议你在读这篇文章之前先读读上一部分,另外,部分内容缺乏语境。
Vue 提供了一个好用的 命令行工具 ,你可以选择一些构建工具启动项目, 还提供了简单的启动模板。这是个非常好的工具。在安装 vue-cli 之前,需要检查 node 的版本,以及升级 npm 或者 yarn 。首先要安装 vue-cli ( -g 表示全局安装 )
$ npm install -g vue-cli
有多种构建工具可供选择,但是在我们的例子中将使用 webpack:
$ vue init webpack <project-name>
可以通过命令行进入目录安装所有内容,设置 `package.json` 文件,然后通过以下命令在 localhost:8080 端口启动本地服务:
$ npm run dev
程序运行成功!我喜欢这种简单的设置。你可以从 `/src/` 目录下的 APP 文件以及 `/components/`目录下的 `Hello.vue`文件开始项目。这非常好,因为你已经看到如何建立文件,以及如何进行文件的导入导出。
先看一下 `.vue` 这个文件扩展名,因为你还没有使用过 vue,所以你之前也没有遇到这种文件。
在 `.vue` 文件中,可以放任何组件内容。我们不需要再用 <script type="text/x-template">
包裹模板,现在我们将按下面的逻辑创建更具有语义化的文件:
<template><div><!-- Write your HTML with Vue in here --> </div> </template><script>export default {// Write your Vue component logic here } </script><style scoped>/* Write your styles for the component in here */ </style>
我针对 Sublime Text 建立了一个 Vue snippets 的仓库 ,可以针对 `.vue` 文件快速生成上述模板 ( 这是 vbase
snippet 输出的 )。 这个 是针对 atom 的 ( 它指出 Vue 需要 1+ 的版本,而 Vue 现在是 v2),还有 这个 是针对 vscode 的。
这里要注意的几件事: 和 React 一样,必须返回一个闭合的标签,在这里我使用一个 div 。在SVG中我也使用 <g>
元素。任何标签都可以,但是整个模板必须包裹在一个标签中。
你注意到我们在这里将使用 export default
编写脚本,比如之前使用的 data function 或者 methods ,但是如果我们想在这个 `.vue` 文件中使用子组件,我们需要导入 import 它们 ( 之后详细介绍 )。
你也会注意到在样式标签中有一个特殊的 scoped
属性值。这使我们能够很容易地将此组件的样式仅限于此组件。我们也会使用 <style>
,它将创建整个程序的样式。我通常会为应用程序创建一个通用的样式表,包括像 fonts 和 line-heights 的共同样式, 所以我将借助 vue-style-loader 导入 @import
到 App.vue 文件的 <style>
标签中。我也会使用 <style scoped>
标签为模板制定特殊的样式,但是只对当前模板有效! Vue-cli 的好处就是让你自己决定如何组织文件,而且你不必添加其它的依赖或模块来限制样式的作用范围。
之前简答地介绍了 slots ,当我们在 Vue 组件中通过局部样式标签使用 slots 时,它们适用于具有 slots 的组件。这是非常有用的,因为你可以很容易地切换组件和改变样式。
在开发过程中,使用特殊的 `.vue` 文件来组织 HTML,styles 和 JS 非常有帮助。我喜欢完全分离的方式,可以很清楚地看到每一部分,我还不适应这种紧密联系在一起的方式。它可以加快我的开发,而且我发现这种标记语言是语义化的。
你可能注意到语法高亮并不能自动识别 `.vue` 文件,所以我在 Sublime Text 中安装了 这个 。
下面是将组件 导入/导出 文件的基本方式 ( 在 vue-sublime snippets 中是 vimport:c ):
import New from './components/New.vue';export default {components: {appNew: New} }
举一个生活中的例子,看一下上次我们用过的酒瓶标签的案例,它的组件有两个独立的模板:
App.vue:
<template><div class="container"><main><component :is="selected"><svg class="winebottle" aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 155 140 300">...</svg></component></main><aside><h4>Name your Wine</h4><input v-model="label" maxlength="18"><div class="button-row"><h4>Color</h4><button @click="selected ='appBlack', labelColor = '#000000'">Black Label</button><button @click="selected ='appWhite', labelColor = '#ffffff'">White Label</button><input type="color" v-model="labelColor" defaultValue="#ff0000"></div></aside></div> </template><script>import Black from './components/Black.vue'import White from './components/White.vue'...export default {data: function () {return {selected: 'appBlack',label: 'Label Name',...};},components: {appBlack: Black,appWhite: White,...}} </script><style>@import "./assets/style.css"; </style>
黑色组件:
<template><div><slot></slot></div> </template><style scoped>.label {fill: black;}.bottle, .wine-text {fill: white;}.flor {fill: #ccc;}.bkimg {filter:url(#inverse)} </style>
注意我在这里给组件中的 slot 设置了不同的样式,这是很好的工作方式,但这只是一种方法。通过 components,slots 和 props 构建程序的方法还有很多。这里的代码也只显示了部分内容。我建立了该示例的 仓库 ,使用 Vue-cli 构建的。为了熟悉工作流程,我强烈建议使用 Vue-cli 构建组件以及通过 props 传递状态。只要完成初始设置,这种方式直观而且快速。
生命周期钩子
在讨论生命周期钩子之前,需要回顾一下我在第一篇文章中提到的虚拟 DOM。我提到 Vue.js 具有虚拟 DOM,但没有说明它的用途。
当你使用像 jQuery 的框架工作时,你可能听说过 DOM 并且通过 DOM 更新改变内容。最后,我们花了大量的时间来检查 DOM 在做什么并存储状态。相反,虚拟 DOM 是 DOM 的抽象表示,有点像复制品,但在这种情况下,它将是主副本。在这个系列文章中,当我们用 Vue 的方式使用状态时,我们创建状态并观察状态的更新。
当一个 Vue 实例更新后,Vue 将会检查它是否与之前的有不同之处。如果确实有不同,Vue 将会调用生命周期的方法,更新 DOM 变化的部分。这是为了提高效率,这种方式下,DOM 只更新需要的部分。
生命周期钩子提供了一些 方法 ,因此你可以在组件生命周期的不同时刻精确地触发某些操作。当我们将组件实例化时,组件会被创建,反之会被销毁,比如当我们使用 v-if/v-else 指令切换时。
可以使用的钩子有: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy
, destroyed
。如果你想深入了解,可以看看 介绍每种方法 的 API 文档。下面的小例子展示了部分工作原理(检查控制台):
const Child = {template: '#childarea',beforeCreate() {console.log("beforeCreate!");}, ... };new Vue({el: '#app',data() {return {isShowing: false }},methods: {toggleShow() {this.isShowing = !this.isShowing;}},components: {appChild: Child} });
<div v-if="isShowing"><app-child></app-child> </div>
See the Pen lifecycle hooks shown in a child component by Sarah Drasner (@sdras) on CodePen.
注意我们在这里使用了 v-if
而没有使用 v-show
,因为 v-if
会真实的创建或者销毁组件,而 v-show
只是切换可见性(组件仍然存在于 DOM 中)。同样的, <keep-alive></keep-alive>
也不会创建或者销毁, 而是激活或停用—— 因为组件仍然存在,只是没有使用。
正如组件中的方法会自动绑定 this,生命周期钩子也会自动绑定实例,所以可以使用组件的状态和方法。仍然不需要通过 console.log 查看 this
的指向! *heartiest eyes* 尽管如此,你不应该在生命周期方法中使用箭头函数,因为它会绑定父类上下文,而不是 Vue 实例。
在下面的例子中,当组件最初被创建时,会有大量的元素被移动,所以我将使用 mounted 钩子函数为每一个组件触发相应的动画。你可以点击右下角的 return 按钮来看启动动画。
See the Pen Vue Weather Notifier by Sarah Drasner (@sdras) on CodePen.
mounted() {let audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/rain.mp3'),tl = new TimelineMax();audio.play();tl.add("drops");//drops intl.staggerFromTo("#droplet-groups g path", 0.3, {drawSVG: "0% -10%"}, {drawSVG: "100% 110%",repeat: 3,repeatDelay: 1,ease: Sine.easeIn}, 0.5, "drops");… }
在这个例子中我使用了很多 Vue 提供的漂亮且复杂的 <transition>
和 <transition-group>
组件,我将在系列文章的最后一部分 Animation 中介绍它们,以及为什么及何时使用。
转载于:https://www.cnblogs.com/nzbin/p/6380663.html
Vue.js 系列教程 3:Vue-cli,生命周期钩子相关推荐
- Vue.js 系列教程 4:Vuex
原文:intro-to-vue-4-vuex 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理.这个系列教程 ...
- Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
- 热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!
热烈庆祝<Vue.js 实战教程 V2.x(一)基础篇>上线了! 课程简介 课程地址:https://edu.csdn.net/course/detail/25641 机构名称:大华软件学 ...
- Vue.js入门教程(适合初学者)
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
- Vue.js入学教程
Vue.js是什么 Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js(类似于view)是一 ...
- Vue.js系列之vue-router(下)(5)
说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区 ...
- vue 多页面应用例子_【微服务】137:Vue之生命周期钩子
今天是刘小爱自学Java的第137天. 感谢你的观看,谢谢你. 学习计划安排如下: Vue的深入学习,emm准确地说还不能算是深入学习,我有点高估自己的学习进度了. 本来打算两天时间做一个基础入门的, ...
- vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录 组件结构 组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子 知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
最新文章
- js中对变量初始化的重要性
- linux 系统中用root切换到普通用户时显示的异常如-bash-4.1$
- 你与弄懂promise之间可能只差这篇文章(二)
- 【Redis学习】Redis持久化
- python装饰器的通俗理解_简单理解Python装饰器
- 机器学习速成课程 | 练习 | Google Development——编程练习:验证
- HashMap分别按照key和value进行排序的快捷方法
- iOS UIWebView清除缓存
- Android Binder通信数据结构介绍
- 音频知识之OGG格式分析
- com组件 的劫持_IE首页被劫持跳转问题的解决方案
- 使用vue-cli2.x入门简单demo游戏
- SQL 的一点简单的面试题求助
- 初识HTML,最基础走起~
- 图中的搜索——dij
- CrowdHuman数据集转成VOC格式并训练模型
- 有意思的概率——似然值似然函数及最大似然估计讲解
- 中国网络安全人才需求
- Web前端开发实训 -- 弹球王小游戏
- 渲染效果图哪家好?2022最新实测(三)
热门文章
- java jdk安装_Java从入门到入土第一课—JDK安装及环境配置
- 小白学python,零基础学Python难不难?
- 第二章 GuassDB 数据库基础知识
- python中保留小数_python保留小数位的三种实现方法
- arraylist 初始化_Java二维数组和动态数组ArrayList 类
- android 检测当前wifi是否又网络,android判断连接的wifi是否能访问网络
- 通用印刷体识别 php,实战腾讯云ORC文字识别
- mysql双主数据一致性_mysql双主复制的主备数据一致性知多少
- php使用referer,php中HTTP_REFERER函数用法实例
- JVM 内存模型:运行时常量池