Gavin小黑屋——Vue 学习笔记 ：生命周期特点（先渲染HTML标签再渲染数据）
Vue基础 生命周期特点（先渲染HTML标签再渲染数据）
目录
Vue基础 生命周期特点（先渲染HTML标签再渲染数据）
一、Vue生命周期
Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
1、父子组件的加载顺序为
2、父组件更新顺序为
3、子组件更新顺序为
4、父子组件销毁顺序为
二、全局变量和全局方法
三、项目结构
四、vue指令
vue提供的修饰方法
v-bind 动态绑定类
函数和计算属性的区别
页面路由配置（在router下的index.js文件做配置）
脚手架安装其他库
创建VUE项目及运行
一、Vue生命周期
Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
- 页面元素创建前.beforeCreate() 表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。
- 页面元素创建时.created() 数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。
- 页面数据加载前.beforeMount() vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。
- 页面数据加载时.mounted() vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。
- 页面数据更新前beforeUpdate() 当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。
- 页面数据更新后updated() 当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。
- 页面销毁前.beforeDestroy() 组件销毁之前调用 ，在这一步，实例仍然完全可用。
- 页面销毁后.destroyed() 组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。
1、父子组件的加载顺序为
父beforeCreated ->父created ->父beforeMounted ->子beforeCreated ->子created ->子beforeMounted ->子mounted -> 父mounted
2、父组件更新顺序为
父beforeUpdate->父updated
3、子组件更新顺序为
父beforeUpdate->子beforeUpdate->子updated->父updated
4、父子组件销毁顺序为
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
二、全局变量和全局方法
- 通过this.变量名 调用全局变量
- 通过this.方法名() 去调用methods定义的方法
三、项目结构
components存放组件
assets存放静态资源
views存放页面Router配置页面路由
四、vue指令
数据绑定方法 ：v-bind 简写 ‘ : ’
差值表达式 {{}}支持js运算符、插入函数、可以嵌套代码段、不能在标签属性中插入
@click点击事件
事件修饰符.stop可以阻止事件冒泡，用法=》@click.stop
如果你想在某个组件的根元素上绑定事件，直接使用 @click=''function' 是不生效的，则可以添加.native修饰符 @click.native=''function''，
v-on键修饰符@keyup.enter.native 且位于 v-model绑定数据之后 才生效
键盘事件@keyup.enter回车事件
vue提供的修饰方法
.stop.prevent.capture.self.once.passive<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --> <form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div><!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit"<!-- 同上 --> <input v-on:keyup.enter="submit"><!-- 缩写语法 --> <input @keyup.enter="submit">V-if用于控制标签的显示和隐藏（可与v-if-else一起使用）
v-show和v-if的区别：
v-show是给标签设置了display：none的样式；v-if则不渲染标签
v-if可以嵌套条件循环
v-bind指令，动态绑定属性（可以缩写为: ，例如v-bind：id =：id）
v-for循环html标签，用法例如<h1 v-for="item in 5">v-for循环渲染 {{item}}</h1>
v-bind 动态绑定类
1支持三目运算符
:class=[‘类名1’,’类名2’,’类名3’, 条件？‘类名4’：‘类名5’]2支持对象绑定
:class=[‘类名’,{‘类名’,true}]3支持Model对象绑定
:class=’obj’Data(){Retrue{Obj:{ ‘类名’:true } }}v-bind 动态绑定样式
注意点:
只需将样式代码放到对象中赋值给style，但取值必须用引号括起来
如果样式名称带 - 也需要用引号括起来
:style=”color:’red’,’font-size’:’100px’”
如果Model中保存多个样式对象 :style=’[‘’,’’]’ 用数组接收既可
函数和计算属性的区别
Methods函数每次调用都会被执行
计算属性：只要返回的结果没有变化，那么计算属性就只执行一次
Computed：{
（key：valeu（function（）{}））
}
应用场景：由于计算属性会将返回的结果缓存起来，如果返回的数据不经常变化，计算属性的性能比函数高
页面路由配置（在router下的index.js文件做配置）
脚手架安装其他库
npm i axios -S请求工具
npm i crypto-js js-cookie -S缓存工具
npm i vuex -S辅助函数
npm i vuex-persistedstate -S
npm install jquery --save
创建VUE项目及运行
打开cmd命令行
vue init webpack 项目名
npm run dev指令 运行项目
如果项目受损 通过npm i （项目初始化）重新安装项目依赖
Gavin小黑屋——Vue 学习笔记 ：生命周期特点（先渲染HTML标签再渲染数据）相关推荐
- Gavin小黑屋——Servilet学习笔记
这里写自定义目录标题 1.什么是Servlet? 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一个表 ...
- vue学习之生命周期，钩子函数执行顺序
vue的生命周期,钩子函授执行顺序 一般的执行顺序(从上往下): beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用 ...
- day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记 组件 生命 ...
- React学习：生命周期、过滤器、event、axios-学习笔记
文章目录 React学习:生命周期.过滤器.event.axios-学习笔记 生命周期 过滤器 webapp小例子: event - 和原生JavaScript写法一样的 axios React学习: ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
- Vue.js 基础语法 入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记 学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验 响应式:数据一旦改变,视图就会响应改 ...
- 狂神说 vue学习笔记
vue学习笔记 文章目录 vue学习笔记 一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期 二.V ...
- 入门 vue 学习笔记
Vue 学习笔记 学习资料来源:网易云Vue视频: ES6 语法 Vue 语法 Vue 组件使用 Vue 组件间通讯 Vue router Vue resource 目录 用 [TOC]来生成目录: ...
- Vue学习笔记01——Vue开发基础
一.Vue实例配置选项 选项 说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
最新文章
- “进度条”博客——第三周
- 保护企业网络安全，不要忽视数据
- 基于双向链表的增删改查和排序（C++实现）
- 使用javap分析Java的字符串操作
- c语言回调函数构架程序,c语言函数回调函数回调
- KeelKit 数据库文档生成器已完成
- Freeswitch配置：一台Freeswitch向另外一台Freeswitch转发视频会议命令
- 标准MIDI文件格式
- pyodbc linux 乱码,关于python：无法在Linux上安装pyodbc
- 【深度学习笔记】AUC(Area under Curve Roc曲线下面积）
- Excel如何将单元格公式显示出来
- 04.HTML基础-表单标签基础标签
- python 降低图片分辨率的两种方法
- 基于PT8.2汽车尾气C0监测及联动控制
- 互联网快讯：极米NEW Z6X凭出众音画表现获好评；京东科技与天奇股份达成深度合作
- PySerial学习系列1--serial.tools
- 博文视点名家讲坛之七经典对答回顾
- 韩顺平—基础—重载、构造器、对象（P228 - P263）
- 解决word 2016中不能加载EndNote x7
- 彻底卸载 Visual Studio 2010 和 2012 并安装免费的 Visual Studio 2013 社区版！