自己做的网站怎么添加文档,珠峰网站建设,社交电商app,微博营销策略文章目录 Vue 的生命周期Vue 生命周期的四个阶段Vue 生命周期函数#xff08;钩子函数 工程化开发 脚手架 Vue CLI**开发 Vue 的两种方式#xff1a;**脚手架目录文件介绍项目运行流程组件化开发 根组件App.vue 文件#xff08;单文件组件#xff09;的三个组成… 文章目录 Vue 的生命周期Vue 生命周期的四个阶段Vue 生命周期函数钩子函数 工程化开发 脚手架 Vue CLI**开发 Vue 的两种方式**脚手架目录文件介绍项目运行流程组件化开发 根组件App.vue 文件单文件组件的三个组成部分普通组件的注册使用局部注册的方法全局注册的方法组件的使用组件的使用 Vue 的生命周期
Vue 生命周期的四个阶段
**Vue生命周期**一个Vue实例从 创建 到 销毁 的整个过程。
生命周期四个阶段
① 创建② 挂载③ 更新④ 销毁 Vue 生命周期函数钩子函数
Vue生命周期过程中会自动运行一些函数被称为**【生命周期钩子】→ 让开发者可以在【特定阶段】**运行自己的代码。
思考什么时候可以发送初始化渲染请求越早越好 什么时候可以开始操作dom至少dom得渲染出来
于是我们可以把 Vue 的生命周期划为四个阶段分别是
创建阶段挂载阶段更新阶段渲染阶段 于是对应上图的四个阶段我们有个8个钩子(每个阶段两个钩子)来让开发者运行自己的代码以达到更好的效果 分别是 创建阶段 before Create() created() 挂载阶段 before Mount() mount() 更新阶段 before Update()updated() 渲染阶段 before Destory()Destoryed() 于是针对刚刚的疑问我们可以在图中找出发送请求以及操作DOM的时间节点
工程化开发 脚手架 Vue CLI
开发 Vue 的两种方式
核心包传统开发模式基于 html / css / js 文件直接引入核心包开发 Vue。工程化开发模式基于构建工具例如webpack ) 的环境中开发 Vue。
基本介绍
Vue CLI 是 Vue 官方提供的一个全局命令工具。
可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】
好处
开箱即用零配置内置 babel 等工具标准化
使用步骤
全局安装 (一次) yarn global add vue/cli 或 npm i vue/cli -g查看 Vue 版本vue --version创建项目架子vue create project-name项目名-不能用中文启动项目 yarn serve 或 npm run serve找package.json
脚手架目录文件介绍 项目运行流程 组件化开发 根组件
**① 组件化**一个页面可以拆分成一个个组件每个组件有着自己独立的结构、样式、行为。
- 好处便于维护利于复用 → 提升开发效率。
- 组件分类普通组件、根组件。**② 根组件**整个应用最上层的组件包裹所有普通小组件。 由图可见将App拆解成多个组件有利于我们的开发与维护。
App.vue 文件单文件组件的三个组成部分
1. 语法高亮插件 2. 三部分组成 template结构有且只能一个根元素 script: js逻辑 style样式(可支持less需要装包)
3. 让组件支持****less
1style标签langless开启less功能
2装包: yarn add less less-loader
普通组件的注册使用
组件注册的两种方式 **局部注册**只能在注册的组件内使用 ①创建.vue 文件(三个组成部分) ②在使用的组件内导入并注册 **全局注册**所有组件内都能使用 使用 当成html 标签使用组件名/组件名 注意 组件名规范→ 大驼峰命名法如HmHeader 局部注册的方法
步骤
创建.vue组件(单文件组件)使用的组件内导入并局部注册components: { 组件名组件对象}
// 导入需要注册的组件
import组件对象from.vue文件路径
importHmHeaderfrom./components/HmHeaderexportdefault{// 局部注册components:{组件名: 组件对象,HmHeader//键值相同可以略写}
}全局注册的方法
创建.vue 文件(三个组成部分)main.js 中进行全局注册
步骤
创建.vue组件(单文件组件)main.js内导入并全局注册Vue.component(组件名, 组件对象)
// 导入需要全局注册的组件
importHmButtonfrom./components/HmButton// 调用Vue.component 进行全局注册
// Vue.component(组件名, 组件对象)
Vue.component(HmButton, HmButton)组件的使用
组件名/组件名
技巧
// 导入需要全局注册的组件
importHmButtonfrom./components/HmButton// 调用Vue.component 进行全局注册
// Vue.component(组件名, 组件对象)
Vue.component(HmButton, HmButton)组件的使用
组件名/组件名
技巧
一般都用局部注册如果发现确实是通用组件再抽离到全局。
