浦东网站建设,广州智能建站,微信短网址在线生成,响应式网站cmsVue框架学习篇(五)
1 组件
1.1 组件的基本使用
1.1.1 基本流程
a 引入外部vue组件必须要的js文件
script src../js/httpVueLoader.js/scriptb 创建.vue文件
template!--公共模板内容--/templatescript!…Vue框架学习篇(五)
1 组件
1.1 组件的基本使用
1.1.1 基本流程
a 引入外部vue组件必须要的js文件
script src../js/httpVueLoader.js/scriptb 创建.vue文件
template!--公共模板内容--/templatescript!--事件绑定的书写位置--/scriptstyle!--样式文件的书写位置--
/style
c 引入外部组件,并给其取名
//这里的相对地址的是以当前html文件为基准的组件名称不要和标签名冲突了哦
var 组件名httpVueLoader(组件相对路径地址);d 注册组件
//这里的组件名和c步骤的组件名是同一个
Vue.component(key值(使用时的标签名),组件名)1.1.2 示例代码
a header.vue代码
templateheaderh3组件基本功能测试/h3/header/templatescript/scriptstyleheader{color:red;border:1px solid blue;}
/style
b 页面代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title组件的基本使用/titlescript src../js/vue.js/script!-- ①引入外部vue组件必须要的js文件--script src../js/httpVueLoader.js/script
/head
bodydiv idapptou/toudiv这里是中间部分的内容/div/divscript//②引入外部vue组件var touhttpVueLoader(../vue/header.vue);//③ 注册组件Vue.component(tou,tou);new Vue({el:#app,})/script
/body
/html1.1.3 运行效果 1.2 组件的绑定事件
1.2.1 使用方法
//在.vue文件的script标签里面写如下代码
module.exports{methods:{方法名(){//方法体执行内容}}
} 1.2.2 示例代码
a bangding.vue文件
templateheaderbutton clickt()点击触发弹窗效果/button/header/templatescriptmodule.exports{methods:{t(){alert(测试组件中事件的绑定);}}}/scriptstyleheader{color:red;border:1px solid blue;}
/styleb 页面文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title测试绑定事件/titlescript src../js/vue.js/script!-- ①引入外部vue组件必须要的js文件--script src../js/httpVueLoader.js/script
/head
bodydiv idapptou/toudiv测试绑定事件/div/divscript//②引入外部vue组件var touhttpVueLoader(../vue/bangding.vue);//③ 注册组件Vue.component(tou,tou);new Vue({el:#app,})/script
/body
/html1.2.3 运行截图 1.3 父组件往子组件传值
1.3.1 使用方法
//① 在.vue文件里面写入如下代码
module.exports{props:[传递参数名1,传递参数名2...传递参数名n],
}
//②在vue文件中使用,是通过{{传递参数名}} 来使用(templates标签里面)
//③在页面文件中,通过:传递参数名data里面的数据所对应的key值的方式进行传值(可以联想到之前的:title)
组件所使用的标签名 :参数名字数据所对应的key/组件所使用的标签名1.3.2 示例代码
a transmitValue.vue文件
templatefooterh3得到外部传入的参数 {{r}}-----{{m}}/h3/footer
/template
scriptmodule.exports{props:[r,m],}
/script
style footer{color:orangered;border:1px solid blue;}
/styleb 页面文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title测试绑定事件/titlescript src../js/vue.js/script!-- ①引入外部vue组件必须要的js文件--script src../js/httpVueLoader.js/script
/head
bodydiv idappdiv测试绑定事件/divwei :rclassName1 :mclassName2/wei/divscript//②引入外部vue组件var weihttpVueLoader(../vue/transmitValue.vue);//③ 注册组件Vue.component(wei,wei);new Vue({el:#app,data:{className1:HTML,className2:JAVA,}})/script
/body
/html1.3.3 运行截图 2 Vue的生命周期
2.1 创建
2.1.1 组件实例创建之初
a 对应的方法
beforeCreate() {
}b 表现形式
el元素不存在,data和methods里面的数据还没有初始化2.1.2 组件实例已经完全创建
a 对应的方法
created() {
}b 表现形式
el元素不存在
data和methods里面的数据已经初始化好了2.2 挂载
2.2.1 挂载前
a 对应的方法
beforeMount() {},b 表现形式
el元素存在,data和methods里面的数据已经有数据了
模板在内存中已经编译好了,但尚未挂载到页面中2.2.2 挂载后
a 对应的方法
mounted() {
}b 表现形式
el元素存在,data和methods里面的数据已经有数据了
页面已经被渲染成功了,此时进入运行状态
一般在这个方法里面写异步提交2.3 修改
2.3.1 修改前
a 对应的方法
beforeUpdate() {},b 表现形式
组件数据更新前使用
页面数据为旧,但得到的data数据是最新的2.3.2 修改后
a 对应的方法
updated() {
}b 表现形式
组件数据更新以后,页面和data数据都是最新的(已经同步完成)2.4 销毁
2.4.1 销毁前
a 对应的方法 beforeDestroy() {}b 表现形式
组件销毁前调用,vue实例从运行阶段进入到销毁阶段
但此时vue实例上的所有东西都是可以用的2.4.2 销毁后
a 对应的方法
destroyed() {
}b 表现形式
组件销毁后调用,vue实例上的所有东西都不可以用了2.5 测试
2.5,1 测试代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0!-- 生命周期需要记一下 --script src../js/vue.js/scripttitleVue的生命周期/title
/head
bodydiv idapp年龄{{age}}button clickage30修改年龄/button/divscriptvar vnew Vue({el:#app,data:{age:20},beforeCreate() {//el,data部分没有用//获取el这个对象console.log(beforeCreate----EL元素this.$el数据:this.age);},created() {//date methods都有了,最早可以在这里面设置数据console.log(created---EL元素this.$el数据:this.age);},beforeMount() {console.log(beforeMount---EL元素this.$el数据:this.age);},mounted() {//数据初始话了也渲染上去了 el和data都有console.log(mounted--EL元素this.$el数据:this.age);// console.log(EL元素this.$el);},beforeUpdate() {console.log(beforeUpdae--EL元素this.$el数据:this.age);},updated() {console.log(updated--EL元素this.$el数据:this.age);},beforeDestroy() {console.log(beforeDestory--EL元素this.$el数据:this.age);},destroyed() {console.log(destroyed--EL元素this.$el数据:this.age);},})/script
/body
/html2.5.2 运行截图
a 初次进入页面时 b 变更age值后
