做网站需要学会什么软件,互联网下载,怎么用个人电脑做网站,wordpress漂浮侧边栏文章目录 Vue生命周期Vue 组件化编程 - .vue文件非单文件组件组件的注意点组件嵌套Vue实例对象和VueComponent实例对象Js对象原型与原型链Vue与VueComponent的重要内置关系 应用单文件组件构建 Vue脚手架 - vue.cli项目文件结构refpropsmixin插件scoped样式 Vue生命周期 1、bef… 文章目录 Vue生命周期Vue 组件化编程 - .vue文件非单文件组件组件的注意点组件嵌套Vue实例对象和VueComponent实例对象Js对象原型与原型链Vue与VueComponent的重要内置关系 应用单文件组件构建 Vue脚手架 - vue.cli项目文件结构refpropsmixin插件scoped样式 Vue生命周期 1、beforeCreate(数据代理尚未开始此时无法通过vm访问到data中的数据methods中的方法。2、created()数据监测和数据代理完成了可以通过vm访问到data中的数据methods中的方法。3、beforeMount()页面呈现的是未经Vue编译的DOM结构所有对DOM的操作最终都不奏效。4、mounted()页面中呈现的是经过Vue编译的DOM此时对DOM的操作均有效一般在此进行开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。1-4步骤构成了挂载的主要流程5、beforeUpdate()此时数据是新的但是页面是旧的即新的数据尚未更新到页面上。6、updated()此时页面的显示的是新数据页面和数据同步完毕。7、beforeDestroy()此时vm中所有的data、methods、指令等等都处于可用状态马上要执行销毁的过程一般在此阶段关闭定时器、取消订阅消息解绑自定义事件等收尾操作。8、destroyed()销毁完毕。可以使用this.$destroy()让vue实例自己销毁Vue实例销毁后自定义事件会失效但原生DOM事件依然有效。
Vue 组件化编程 - .vue文件
组件的定义——实现应用中局部功能代码和资源的集合。 非单文件组件
一个组件文件中由多个其他组件构成称为非单文件组件。
Vue使用组件的三大步骤
1、定义组件创建组件2、注册组件Vue的components局部注册或者使用Vue.component(‘组件名’, 组件)全局注册。3、使用组件写组件标签
1、创建组件 创建组件时需要注意
不需要写el标签el标签是将Vue实例与DOM元素绑定的当你创建组件时你并不知道需要将其用在哪里因此不需要写el标签。组件的data属性需要写成函数式的因为一个组件可能在多个地方使用如果写为对象式的各个组件之间的数据变化会相互影响。使用Vue.extend({})创建组件在template属性中使用反引号包裹HTML标签。 2、注册组件 局部注册在Vue实例的components属性中标注上构建的组件。
使用Vue.componet(‘组件名’, 组件)可以注册全局组件即所有的Vue实例尽管在components属性中没声明该组件也可直接使用。
3、使用组件写组件标签。
组件的注意点 组件嵌套
组件可以嵌套使用。注册给谁的组件就可以在它的template属性中应用这个组件标签。
Vue实例对象和VueComponent实例对象
以定义的school组件为例
1、当我们使用school标签时本质上是调用了VueComponent构造函数该构造函数是Vue.extend生成的。2、当使用school标签时Vue框架解析时会帮助创建school组件的实例对象方式就是执行new VueComponent(options)3、特别注意每次调用Vue.extend返回的都有一个全新的VueComponent对象。4、关于this指向组件配置中data函数、methods中的函数watch、computed函数它们的this均是VueComponent实例对象。而在new Vue(options)配置中data函数、methods中的函数watch、computed函数它们的this均是Vue实例对象5、根组件Vue实例对象会有$children属性其中就是VueComponent实例对象数组。6、Vue实例对象和VueComponent实例对象在创建时接收的options选项除了Vue实例可以使用el 绑定具体的DOM标签外其余都一样。 Js对象原型与原型链 JavaScript 是一种基于原型的语言 (prototype-based language)每个对象拥有一个原型对象对象以其原型为模板从原型继承方法和属性这些属性和方法定义在对象的构造器函数的 prototype 属性上而非对象实例本身。 每个Js对象都会有一个名为__proto__的内部属性该属性指向当前对象的原型对象。在Js中当我们访问一个对象的某个属性时如果该对象没有这个属性Js语法引擎就会沿着该对象的原型链在对象的__proto__上找向上查找直到找到该属性为止。在查找对象属性时通过__proto__查找原型的属性这个过程就用到原型链。
当然在Js对象中根原型为Object而Object的__proto__是为null的。
原型属性又可分为显示原型属性和隐式原型属性。
显示原型属性访问构造函数名.prototype隐式原型属性访问实例对象名.__proto__由这两种方式访问到的原型对象是等价的即指向的是同一个原型对象。构造函数名.prototype 实例对象名.__proto__由原型链的属性访问方式可知如果给原型对象添加一个属性x 99那么可以由实例对象d的原型对象属性访问它即d.__proto__.x实际上对于__proto__的访问是Js执行引擎自动完成的因此d.__proto__.x访问的方式可以等价于使用d.x Vue与VueComponent的重要内置关系
VueComponentVue组件的原型对象的原型对象是Vue的原型对象
应用单文件组件构建
1、构建一个单文件组件 一个单.vue文件基本结构如下; 定义好单文件组件是为了提供给 别的文件使用因此需要使用export将该文件进行暴露。 export default { …… } 实际上是一种简写等价于 const vc Vue.extend( { …… } )
export vc 2、入口Vue文件App.vue 一般而言Vue项目的根组件为App.vue这里使用其他的组件。 组件化编程三步走
导入注册使用标签 3、入口js文件main.js 构建的根组件App.vue并没有使用在main.js中构建App.vue的实例对象使用el属性为其绑定DOM对象。 4、入口HTML文件index.html
Vue脚手架 - vue.cli
项目文件结构 ref
props
mixin
插件
scoped样式
