广州企业建站 网络服务,网站制作公司官网,网站建设要考虑哪些,有什么网站可以做微信支付宝支付宝生命周期 关于VueComponent 生命周期又叫生命周期钩子#xff0c;生命周期函数 生命周期是#xff0c;Vue在关键的时刻帮我们调用的一些特殊名字的函数 生命周期的this指向vm或者组件实例对象 mounted会将初始化的Dom挂载到页面上 templatediv classhe…生命周期 关于VueComponent 生命周期又叫生命周期钩子生命周期函数 生命周期是Vue在关键的时刻帮我们调用的一些特殊名字的函数 生命周期的this指向vm或者组件实例对象 mounted会将初始化的Dom挂载到页面上 templatediv classhello!-- 第一个是css样式,第二个变量名 opacity为指定一个元素的不透明度--h3 :style{opacity:opacity}会变化的字体/h3!-- 缩写形式 --!-- h3 :style{opacity}/h3 --/div
/template
script
export default {name: Select,data () {return {opacity: 1}},// mounted是生命周期函数。用于把初始化的DOM元素放到页面后(也叫做挂载完毕后),就调用mountedmounted(){// 设置定时器setInterval((){this.opacity - 0.01if(this.opacity 0)this.opacity 1},16)}
}
/script 组件 组件是用来实现局部功能效果的代码集合html/css/js/image...) 组件的作用为 复用编码,简化项目编码提高运行效率 模块化和组件化的区别当应用中的js都以模块化编写时这个应用为模块化应用。当应用中的功能都是多组件方式编写。这个应用就是组件化的应用 School组件本质上是一个名为Component的构造函数且不是程序员定义的是Vue.extend生成的 我们只需要写 school/(这个只有脚手架有效)或者 school /school。Vue解析时会帮我们创建school组件的实列对象。 注意每次调用Vue.extend。返回的都是一个全新的VueCompon 关于this指向 1、组件配置中 data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象 2、new.Vue()配置中 data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是Vue实例对象 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- root为容器,注册成功即可使用School组件 --div idrootSchool/School/div
/bodyscript typetext/javascriptVue.config.productionTip false// 定义school组件,extends为继承的意思。但这里少了s。用于定义VueComponentconst School Vue.extend({name: School,// 用而不是这样的好处是可以换行书写只能单行书写代码。换行则报错template: // 错误写法// h2{{name}}h2// h3{{address}}h3// 正确的写法,需要加入div将所有模块包起来。符合模块化开发divh2{{name}}h2h3{{address}}h3/div,data(){return {name: school,address: 广东}},})// vm是一个构造函数{}为配置项new Vue({el:#root,// vm管理所有的组件,故每个组件都要来vm这里注册才能使用。//为方便管理为vm设置一个管理者(app)vm直接管理app。而app管理所有的组件。以下代码可以认为School就是管理者components:{School}})/script
/html
