浦东网站建设网页设计怎么写

当前位置： 首页 > news >正文

浦东网站建设,网页设计怎么写,网站开发中制作视频播放器,手工艺品网站建设方案Vue框架学习篇(五) 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值后