建网站流程,seo网站推广专员,天津网站建设zymxart,莱芜金点子电子版关于vue实例的声明周期#xff0c;从Vue实例创建、运行、到销毁期间#xff0c;总是伴随着各种各样的事件#xff0c;这些事件#xff0c;统称为生命周期 #xff08;https://cn.vuejs.org/v2/guide/instance.html#实例生命周期 #xff09; 而声明周期勾子就是生命周期… 关于vue实例的声明周期从Vue实例创建、运行、到销毁期间总是伴随着各种各样的事件这些事件统称为生命周期 https://cn.vuejs.org/v2/guide/instance.html#实例生命周期 而声明周期勾子就是生命周期事件的别名而已 https://cn.vuejs.org/v2/api/#选项-生命周期钩子 生命周期钩子 生命周期函数 生命周期事件 一、生命周期函数的主要分类
1、创建期间的生命周期函数
1、beforeCreate #实例刚在内存中被创建出来此时还没有初始化好 data 和 methods 属性2、created #实例已经在内存中创建OK此时 data 和 methods 已经创建OK#此时还没有开始 编译模板。我们可以在这里进行Ajax请求。3、beforeMount #此时已经完成了模板的编译但是还没有挂载到页面中4、mounted #此时已经将编译好的模板挂载到了页面指定的容器中显示#mounted之后表示真实DOM渲染完了可以操作DOM了
案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.6.10/dist/vue.js/script
/headbody!--这个div区域就是MVVM中的 View 视图--
div idapp1
/div
/bodyscriptnew Vue({el: #app1,data: {msg: hello vuejs},// 这是第1个生命周期函数表示实例完全被创建出来之前会执行它beforeCreate: function () {console.log(01 beforeCreate, this.msg);//注意在 beforeCreate 生命周期函数执行的时候data 和 methods 中的 数据都还没有没初始化},// 这是第2个生命周期函数created: function () {console.log(02 created, this.msg);//注意如果要调用 methods 中的方法或者操作 data 中的数据最早只能在 created 中操作},// 这是第3个生命周期函数表示 模板已经在内存中编辑完成了但是尚未把模板渲染到页面中beforeMount: function () {console.log(03 beforeMount, this.msg);// 在 beforeMount 执行的时候页面中的元素还没有被真正替换过来只是之前写的一些模板字符串},// 这是第4个生命周期函数表示内存中的模板已经真实的挂载到了页面中用户已经可以看到渲染好的页面了mounted: function () {console.log(04 mounted, this.msg);// 注意 mounted 是 实例创建期间的最后一个生命周期函数当执行完 mounted 就表示实例已经被完全创建好了// 此时如果没有其它操作的话这个实例就静静的 躺在我们的内存中一动不动}});
/script/html2、运行期间的生命周期函数
1、beforeUpdate #状态更新之前执行此函数 此时 data 中的状态值是最新的#但是界面上显示的 数据还是旧的因为此时还没有开始重新渲染DOM节点2、updated #实例更新完毕之后调用此函数此时 data 中的状态值 和 界面上显示的数据#都已经完成了更新界面已经被重新渲染好了PS数据发生变化时会触发这两个方法。不过我们一般用watch来做
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.6.10/dist/vue.js/script
/headbody!--这个div区域就是MVVM中的 View--
div idapp1input typebutton value修改flag clickmyMethodh3 idh3{{ flag }}/h3
/div
/body
scriptnew Vue({el: #app1,data: {msg: hello vue,flag: false},methods: {myMethod: function () {this.flag true;}},// 接下来的是运行中的两个事件// 这时候我们的界面还没有被更新【但是数据被更新了吗 数据肯定被更新了】beforeUpdate() {console.log(-------------05 beforeUpdate, this.msg);// 结论当执行 beforeUpdate 的时候页面中的显示的数据还是旧的此时 data 数据是最新的页面尚未和 最新的数据保持同步console.log(界面上DOM元素显示的内容 document.getElementById(h3).innerText)console.log(data 中的 msg 数据 this.flag)},updated() {console.log(-------------06 updated, this.msg);// 结论updated 事件执行的时候页面和 data 数据已经保持同步了都是最新的console.log(界面上DOM元素显示的内容 document.getElementById(h3).innerText)console.log(data 中的 msg 数据 this.flag)}});
/script/html可以看得到当执行 beforeUpdate 的时候页面中的显示的数据还是旧的但此时 data 数据是最新的。 updated 事件执行的时候页面和 data 数据已经保持同步了都是最新的 3、销毁期间的生命周期函数
1、beforeDestroy #实例销毁之前调用。在这一步实例仍然完全可用。2、destroyed #Vue 实例销毁后调用。调用后Vue 实例指示的所有东西都会解绑定#所有的事件监听器会被移除所有的子实例也会被销毁PS可以在beforeDestroy里清除定时器、或清除事件绑定 4、生命周期函数图解 二、axios 发送Ajax请求
#参考文档
https://blog.csdn.net/sunyctf/article/details/129002056
https://blog.csdn.net/weixin_40017062/article/details/131810859 我们直接所有的vue代码都是写在index.html文件中的这样其实很不好我们将他修改一下改成从.vue中读取配置 vi public/index.html
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbodydiv idapp/div/body
/html index.html文件回归初始状态声明app表示入口 vi my-vue-app/src/main.js
import { createApp } from vue
import App from ./App.vueconst app createApp(App)
app.mount(#app)vi my-vue-app/src/App.vue
templatediv idappHelloWorld/HelloWorld/div
/templatescript
import HelloWorld from ./components/HelloWorld.vueexport default {name: App,components: {HelloWorld}
}
/script vi my-vue-app/src/components/HelloWorld.vue
template
123
/templatescript
export default {name: HelloWorld,
}
/scriptstyle scoped/style
访问
http://127.0.0.1:8080/ 我们上面经过绑定配置已经将HelloWorld.vue 绑定到了index.html中了后续配置都是基于HelloWorld.vue文件 安装axios
cd .\my-vue-app\
npm install axios --save三、GET请求
创建测试json文件
vi my-vue-app/public/data.json
{ret: 0,data: [{ path: page1, component: Page1 , ip: Page1 },{ path: page2, component: Page2 , ip: Page1},{ path: page3, component: Page3 , ip: Page1}]
} 我们通过get请求其他后端的api通常会返回类似上面的一个json配置我们通过这个来模拟请求接口返回的数据因为我们这个json文件是直接添加到index.html的同级目录可以直接通过浏览器访问 http://127.0.0.1:8080/data.json vi my-vue-app/src/components/HelloWorld.vue
template{{json}}
/templatescript
import axios from axios
export default {name: HelloWorld,data(){return{json: //定义一个空数据与div交互用}},created() { //created 页面部署时自动执行axios.get(http://localhost:8080/data.json).then((result) {this.json result.data //result.data 会将返回的json交给data中的json变量console.log(result.data)}).catch((err) {{console.log(err)}})}
}
/scriptstyle scoped/style
访问页面
http://localhost:8080/ 目前看起来没什么问题直接请求地址json文件返回了信息但是一遍来说我们的后端程序都不会放到前端节点的相同主机上需要跨站访问比如 https://www.runoob.com/try/ajax/json_demo.json 我们把上面代码中的url地址换成这个再跑下 vi my-vue-app/src/components/HelloWorld.vue
template{{json}}
/templatescript
import axios from axios
export default {name: HelloWorld,data(){return{json: //定义一个空数据与div交互用}},created() { //created 页面部署时自动执行axios.get(https://www.runoob.com/try/ajax/json_demo.json).then((result) {this.json result.data //result.data 会将返回的json交给data中的json变量console.log(result.data)}).catch((err) {{console.log(err)}})}
}
/scriptstyle scoped/style 我们打开页面发现什么信息都没有按F12打开开发者工具发现下面这么一条报错 已拦截跨源请求同源策略禁止读取位于 http://localhost:8080/data.json 的远程资源。原因CORS 头缺少 Access-Control-Allow-Origin。状态码200。 跨域访问--配置代理 我们在自己独立使用的时候你直接改成127.0.0.1其实也能访问但不可能所有的接口都在当前本机上只要跨主机都会报错并且无法获取到数据所以我们要先做一点改造 my-vue-app/vue.config.js
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer: {proxy: {/try:{ //try 这个用来和根路径 baseURL 进行匹配 以try开头的请求会转到下面的地址target: https://www.runoob.com,changeOrigin: true,}}}})重启服务
ctrl c 停止#启动npm run serve 如果要配置多个代理就把proxy那好行多复制几次 四、POST请求 post请求常用的数据请求格式有三种 1、Content-Type : application/x-www-form-urlencoded。
ajax默认的数据格式。请求体中的数据会以json字符串的形式发送到后端。2、Content-Type : application/json ; charsetutf-8。
axios默认的数据格式。请求体中的数据会以普通表单形式键值对发送到后端。3、Content-Type : multipart/form-data 。
它会将请求体的数据处理为一条消息以标签为单元用分隔符分开。既可以上传键值对也可以上传文件1、Content-Type:application/x-www-form-urlencoded json请求后端
my-vue-app/src/components/HelloWorld.vue
templatediv classhello.../div
/templatescript
import axios from axios;
import qs from qs;export default {name: HelloWorld,created() {// 对象data的属性名uname和upwd引号可加可不加let data {uname:dingding,upwd:123456};axios.post(/data.json,qs.stringify({ data })).then(res{console.log(res);})},
};/script 因为我这里是post了一个json文件所以会有报错不过没关系我们查看一下这条post请求的请求头发现确实是application/x-www-form-urlencoded请求参数也可以看到 2 Content-Type: multipart/form-data常用于表单提交图片上传、文件上传
templatediv classNamehello....../div
/templatescript
import axios from axios;export default {name: HelloWorld,created() {let data {uname: dingding, upwd: 123456};let formData new FormData();for (let key in data) {formData.append(key, data[key]);}console.log(formData);axios.post(/date.json, formData).then((res) {console.log(res.data);});},
};
/script
style scoped
/style 3、Content-Type: application/json 方式一 、请求别名的使用 axios.post(url[, data[, config]]) 用于发送数据 data对象是作为请求主体被发送的数据 post 无参数请求
templatediv classhello....../div
/templatescript
import axios from axios;
export default {name: HelloWorld,created() {//把get无参请求的get改为post即可axios.post(/data.json).then(res{console.log(res)});},
};
/scriptstyle scoped.../style post 带参数 查询字符串形式
templatediv classhello....../div
/templatescript
import axios from axios;
export default {name: HelloWorld,created() {//发送post请求携带参数直接使用unamedingdingupwd123456axios.post(/data.json, unamedingdingupwd123456).then(res{console.log(res)});},
};
/scriptstyle scoped.../style
post 带参数 对象形式
templatediv classhello....../div
/templatescript
import axios from axios;
export default {name: HelloWorld,created() {//发送post请求携带参数直接使用unamedingdingupwd123456axios.post(/data.json, unamedingdingupwd123456).then(res{console.log(res)});},
};
/scriptstyle scoped.../style
方式二通过向axios传递相关配置来创建请求
templatediv classhello....../div
/templatescript
import axios from axios;
export default {name: HelloWorld,created() {let data {uname:dingding,upwd:123456};axios({method:post,url:/data.json,// 与get请求使用params不同的是post请求使用data属性data:data}).then(res{console.log(res)})},
};
/scriptstyle scoped.../style 注意别名方式和data方式的相关请求信息 - 请求地址Request URL: http://localhost:8080/data.json - 请求头中Content-Type: application/json - 参数形式{uname: dingding, upwd: 123456} 五、put和patch方法 put和patch请求与post请求用法一样类似同样有x-www-form-urlencoded、applicition/json和form-data只有method不同其他相同 let data {uname:dingding,upwd:123456};
// axios.put(url[, data[, config]]) 用法同post类似用于修改数据
axios.put(/data.json, data).then(res{console.log(res)
});let data {uname:dingding,upwd:123456};
// axios.patch(url[, data[, config]]) 用法同post类似用于修改数据
axios.patch(/data.json, data).then(res{console.log(res)
}); 六、delete方法 axios.delete(url[, config])与axios.get(url[, config])用法基本相似但是作用不同它用于删除数据同get方法一样也可以有几种写法 delete请求有时候需要把参数拼接到URL上有时候像post请求那样把参数放在请求体里面。至于具体怎么调用需要和后端商量好 方式一get - params
// 使用别名法// 传参的2种形式同get1、params
axios.delete(/data.json, {params: {id: 12}}).then(res {console.log(res, delete);});2、查询字符串形式即参数拼接到url里
axios.delete(/data.json?id2, {params: {id: 12}}).then(res {console.log(res, delete);});// 不使用别名法 —————通过向axios传递的相关配置创建请求__axios(config)
let params {id: 5
};
axios({method:delete,url:/data.json,params:params
}).then(res{console.log(res)
}) 方式二post - data 使用类似post请求方式把axios.delete()中的params改为data这样请求会把内容放入请求体里面 // 使用别名法
// data
axios.delete(/data.json, {data: {id: 5}}).then(res {console.log(res);});// 不使用别名法 ————通过传递相关配置创建请求
let data {id: 5
};
axios({method:delete,url:/data.json,data:data
}).then(res{console.log(res)
}) 注意delete请求中get-params方式和post-data方式相关请求信息的区别 - params方式会将请求参数拼接在URL上面Request URL: http://localhost:8080/data.json?id5 - 参数形式id:5 - Content-Type: text/html; charsetutf-8
