借贷网站建设方案,企业馆,安阳网站推广优化,网络设计过程1. 生命周期函数
beforeCreate #xff1a; 无法通过 vm 访问data 中的数据、methods 中的方法created #xff1a;可以访问 vm 中的 data 的数据#xff0c; methods 中的方法beforeMount#xff1a;为经 Vue 编译的 dommounted#xff1a;经过 vue 编译的 dom #x…1. 生命周期函数
beforeCreate 无法通过 vm 访问data 中的数据、methods 中的方法created 可以访问 vm 中的 data 的数据 methods 中的方法beforeMount为经 Vue 编译的 dommounted经过 vue 编译的 dom 对dom 操作有效可以进行开启定时器、发生网络请求、订阅信息、绑定自定义事件等初始化操作beforeUpdate数据是更新的页面没有更新updated数据也页面都是更新的beforeDestroyvm 中所有的 data、methods、指令处于可用状态马上执行销毁过程一般此状态关闭定时器、取消订阅信息、解绑自定义事件收尾操作destroyed完全销毁一个实例清除它与其他实例的连接解绑它的全部指令以及事件监听器
vm. $template 是替换掉根节点
总结
1. 常用的生命周期函数
mounted发送ajax 请求启动定时器、解绑自定义事件、订阅消息等【初始化操作】beforeDestroy清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
2. 关于销毁 vue 实例
销毁后借助 vue 开发者工具看不到任何信息销毁后自定义事件会失效。但是原生的 DOM 事件任然有效一般不会再 beforeDestroy 操作数据因为操作数据不会再触发更新流程了
2. 组件化
2.1 理解组件
2.1.1 基础概念
组件的定义实现应用中局功能代码css、html、js和资源mp3、zip的集合模块 前端的模块就是一个js文件模块化一个js 文件里面划分了很多小的js文件a.js\b.js组件化一个功能一个组件
2.1.2 非单文件组件
定义一个组件中包含n个组件不要写el配置项因为最终的vm都要被一个vm管理由vm决定服务data ( ) { } : 一定要写成函数形式不要写对象data { } 形式因为避免组件复用数据存在引用关系template 可以配置组件结构组件第一个字母最好大写
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript typetext/javascript src../js/vue.js/script
/headbodydiv idroot!-- 三、编写组件标签 --girl/girlhr /boy/boy/div/body
script typetext/javascriptVue.config.productionTip false// 一、创建组件1const girl Vue.extend({// name 是同时改变创建组件和注册组件的名字name: peopeltemplate: divh2姓名{{name}} /h2h2年龄{{age}} /h2/div,data() {return {name: linda,age: 18,}}})// 一、创建组件2const boy Vue.extend({template: divh2姓名{{name}} /h2h2年龄{{age}} /h2/div,data() {return {name: json,age: 28,}}})// 全局注册组件,所有的root 里面都可以使用组件Vue.component(girl, girl)// 创建vmnew Vue({el: #root,// 二、注册(局部)组件组件名组件 key value形式components: {// girl: girl,boy: boy,},data: {}})/script/html 组件本质是一个VueComponent 的构造函数是Vue.extend 生成的 只需要写School/, vue 解析时会帮我们创建组件的实例化对象即执行 new VueComponentoptions每次调用Vue.extend ,返回的是一个全新的vueComponentthis 指向 1组件配置中data函数、method函数、watch函数、component中的函数、他们的 this 指向均是 VueComponent 实例对象 2new Vueoptions配置中data 函数、method函数.... this 指向的是Vue 实例对象 VueComponent的实例对象以后简称vc也可称之为组件实例对象。Vue的实例对象以后简称vm。 一个重要的内置关系 VueComponent.prototype._proto_Vue.prototype 结果是让组件实例化对象vc可以访问vue原型的属性和方法
2.1.3 单文件组件
定义一个组件只包含一个组件常用
2.1.4 组件注意点
可以使用name 配置项指定组件在开发者工具中的名字
1. 一个单词组成
首字母小写school首字母大写School2. 多单词组成
keybab-case命名 my-schoolCamelCase命名MySchool需要Vue脚手架支持
3. 组件标签
school /schoolschool/ 没有使用vue脚手架组件会不能渲染
4. 一个注册组件的简写
const school Vue.extend (option)可简写const school option
