网站模板下载地址,wordpress首页添加js,北京网站排名优化公司,临海如何制作公司网站框架目录
一、组件化编程 1.基本介绍 : 2.原理示意图 : 3.全局组件示例 : 4.局部组件示例 : 5.全局组件和局部组件的区别 :
二、生命周期 1.基本介绍 : 2.生命周期示意图 : 3.实例测试 : 一、组件化编程 1.基本介绍 : (1) 开发大型应用的时候#xff0c;页面往往划分成…目录
一、组件化编程 1.基本介绍 : 2.原理示意图 : 3.全局组件示例 : 4.局部组件示例 : 5.全局组件和局部组件的区别 :
二、生命周期 1.基本介绍 : 2.生命周期示意图 : 3.实例测试 : 一、组件化编程 1.基本介绍 : (1) 开发大型应用的时候页面往往划分成很多部分不同的页面时常会有相同的部分例如可能会有相同的头部导航条。 (2) 如果每个页面都独自开发无疑增加了开发的成本。因此可以将页面的不同部分拆分成独立的组件然后在不同的页面共享这些组件避免重复开发。 (3) 组件化编程与之前的“模块化编程”相比范围和目标更加精准。 2.原理示意图 : 组件化编程基本原理示意图如下 : PS : (1) 组件(Component)是Vue.js最强大的功能之一。 (2) 组件也是一个Vue实例拥有自己的data数据池和methods生命周期函数等。 (3) 组件渲染需要HTML模板所以增加了template属性值就是HTML模板。 (4) 对于全局组件任何Vue实例都可以直接在HTML中通过组件名称来使用组件。 (5) data不再是一个对象而是一个函数这样保证了每次引用组件都是独立的对象/数据。 3.全局组件示例 : overall_components.html代码如下 :
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDemonstrate overallComponents/titlescript typetext/javascript src../vue.js/script
/head
bodydiv idapph2组件化编程———全局组件/h2!-- ... --!-- 利用全局组件的名称来引用全局组件 --counter/counterbr/ br/counter/counter/divscript typetext/javascript/*(1) 定义一个全局组件第一个参数表示该组件的名称此处为“counter”;(2) 第二个参数———{}中表示的就是该组件相关的内容。(3) template用于指定该组件的View,由于要用到data数据池中的数据因此要使用到ES6新特性———模板字符串.(方便操作数据)(4) 组件也是一个Vue实例拥有自己的data数据池和methods生命周期函数等。(5) 对于组件来说数据池中的数据要以函数/方法的形式来返回与传统返回形式不同,这么做的目的是保证每个组件的数据都是独立的。*/Vue.component(counter, {template: button v-on:clickclickTest()这个按钮被点了{{ count }}次/button,// data: {// count: 5,// },data() {return {count: 5}},methods: {clickTest() {this.count;}}})//传统Vue示例方式let vm new Vue({el: #app,data: {count: 5},methods: {// clickTest() {// this.count;// }}})/script
/body
/html 运行效果 : (如下GIF图) 4.局部组件示例 : local_components.html代码如下 :
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDemonstrate localComponents/titlescript typetext/javascript src../vue.js/script
/head
body
div idapph2 stylecolor: deepskyblue组件化编程———局部组件/h2!--因为引入局部组件的Vue实例挂载到了该div上因此可以在该div中使用定义的局部组件。--counter/counterbr/ br/counter/counter
/divscript typetext/javascript//1.定义一个局部组件(组件本质就是一个Vue实例)let buttonCounter {template: button v-on:clickclickTest()这个按钮被点了{{count}}次/button,data() {return {count: 11}},methods: {clickTest() {this.count;}}}//2.若想使用局部组件需要在Vue实例中引入//此时局部组件的使用范围在当前Vuelet vm new Vue({el: #app,data: {},methods: {},components: {counter: buttonCounter}})
/script
/body
/html 运行结果 : (如下GIF) 5.全局组件和局部组件的区别 : (1) 全局组件属于所有Vue实例可以在所有Vue实例挂载的元素上使用[全局组件本质也是依赖于Vue实例]通过组件名就可以直接使用全局组件。 (2) 局部组件需要引入才能使用只有引入了局部组件的Vue实例其挂载的元素上才能使用定义的局部组件。 (3) 共性——组件的定义必须在Vue实例的定义之前否则无法识别。 二、生命周期 1.基本介绍 : (1) Vue实例有一个完整的生命周期从开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程称为Vue实例的生命周期。 (2) 每个Vue实例在被创建时都要经过一系列的初始化过程(比如设置数据监听、编译模板、将实例挂载到DOM、在数据变化时更新DOM等)同时在这个过程中也会运行一些叫做生命周期钩子的函数也叫钩子函数、监听函数、生命周期函数这给了用户在不同阶段添加自己的代码的机会。 2.生命周期示意图 : 如下图所示 : (1) new Vue(): new了一个Vue实例对象此时就会进入组件的创建过程。 (2) Init Events Lifecycle: 初始化组件的事件和生命周期函数。 (3) beforeCreate: 组件创建之后遇到的第一个生命周期函数这个阶段data和methods以及dom结构都未被初始化即获取不到data的值也不能调用methods中的函数。 (4) Init injections reactivity: 这个阶段会初始化data和methods中的方法。 (5) created: 这个阶段组件的data和methods中的方法已初始化结束可以访问但是DOM结构未初始化页面未渲染。 PS : 往往在“created”这个阶段发出Ajax请求因为下一步就是编译模板。 (6) 编译模板结构 (7) beforeMount: 当模板在内存中编译完成时此时内存中的模板结构还未渲染至页面上看不到真正的数据。 (8) Create vm.$el and replace el with it: 把内存中渲染好的模板结构替换至真实的DOM结构也就是页面上。 (9) mounted: 此时页面已渲染好用户看到的是真实的页面数据生命周期创建阶段完毕进入运行阶段。 (10) 生命周期运行中 (10.1) beforeUpdate: 当执行此钩子函数时数据池的数据是新的但是页面是旧的。 (10.2) Virtual DOM re-render and patch: 根据最新的data数据重新渲染内存中的模板结构并把渲染好的模板结构替换至页面上。 (10.3) updated: 页面已经完成了更新此时data数据池和页面的数据都是新的。 (11) beforeDestroy: 当执行此函数时组件即将被销毁但是还没有真正开始销毁此时组件的datamethods数据或方法还可被调用。 (12) Teardown......: 注销组件和事件监听 (13) destroyed: 组件已经完成了销毁。 3.实例测试 : 在各个钩子函数中尝试打印出data数据池中的数据调用methods中的方法并获取DOM对象以查看当前生命周期中能否使用data数据池中的数据能否调用methods中的方法能否获取到渲染后的DOM对象。 life_cycle.html代码如下 :
!DOCTYPE html
html langen
headmeta charsetUTF-8titleLife cycle Demonstration/titlescript typetext/javascript src../vue.js/script
/head
bodydiv idappspan idnum{{num}}/span!-- 是v-on:的简写 --button clicknumLike/buttonh2{{name}} has {{num}} likes/h2/divscript typetext/javascriptlet vm new Vue({el: #app,data: {name: Cyan_RA9,num: 5},methods: {getName() {return this.name;}},//组件创建后遇到的第一个钩子函数beforeCreate() {console.log(beforeCreate~能否得到数据池中的数据?,this.name,this.num);//不能,在beforeCreate阶段调用methods中的方法会报错。// console.log(beforeCreate~能否使用methods中的方法?,this.getName());console.log(beforeCreate~能否得到渲染后的DOM对象,document.getElementById(num));},//(4)Init injections reactivity:这个阶段会初始化data和methods中的方法//(5)created:created() {console.log(created~能否得到数据池中的数据?,this.name,this.num);console.log(created~能否使用methods中的方法?,this.getName());console.log(created~能否得到渲染后的DOM对象,document.getElementById(num));},//挂载DOM之前beforeMount() {console.log(beforeMount~能否得到数据池中的数据?,this.name,this.num);console.log(beforeMount~能否使用methods中的方法?,this.getName());console.log(beforeMount~能否得到渲染后的DOM对象,document.getElementById(num));},//挂载DOM之后mounted() {console.log(mounted~能否得到数据池中的数据?,this.name,this.num);console.log(mounted~能否使用methods中的方法?,this.getName());console.log(mounted~能否得到渲染后的DOM对象,document.getElementById(num));},//数据变化前不会调用beforeUpdate钩子函数//只有当数据发生变化后才会调用beforeUpdate钩子函数。beforeUpdate() {console.log(beforeUpdate~能否得到数据池中的数据?,this.name,this.num);console.log(beforeUpdate~能否使用methods中的方法?,this.getName());console.log(beforeUpdate~能否得到渲染后的DOM对象,document.getElementById(num));console.log(beforeUpdate~能否得到渲染后的DOM对象,document.getElementById(num).innerText);},//调用beforeUpdate钩子时还没更新页面。//需要等下一步Virtual DOM re-render and patch://根据最新的data数据重新渲染内存中的模板结构并把渲染好的模板结构替换至页面上。//接着调用updated钩子时页面已经更新。updated() {console.log(updated~能否得到数据池中的数据?,this.name,this.num);console.log(updated~能否使用methods中的方法?,this.getName());console.log(updated~能否得到渲染后的DOM对象,document.getElementById(num));console.log(beforeUpdate~能否得到渲染后的DOM对象,document.getElementById(num).innerText);},})/script
/body
/html 运行效果 : (如下GIF图) 控制台打印出的结果如下 : 此时由于num属性的值还未变化因此不会调用beforeUpdate钩子函数和updated钩子函数 点击按钮修改num属性的值会看到新的钩子函数被调用如下图所示 : System.out.println(END------------------------------------------------------);
