vue3通过axios获取数据(JavaScriptVUE实例生命周期)

MVVM模式(Model-View-ViewModel)

MVVM,一个软件架构设计模式,由微软WPF和Silverlight的架构师Ken Cooper和Ted Peters开发,是一种简化用户界面的事件驱动编程方式。

客户端架构有三种:MVC: Model-View-Controller、MVP: Model-View-Presenter和MVVM: Model-View-ViewModel。

MVVM的本质上是MVC的改进版,就是将其中的View的状态和行为抽象化,将视图UI和业务逻辑分开。

vue3通过axios获取数据(JavaScriptVUE实例生命周期)(1)

vue3通过axios获取数据(JavaScriptVUE实例生命周期)(2)

VUE实例的生命周期

下图:

vue3通过axios获取数据(JavaScriptVUE实例生命周期)(3)

代码:

<div id="app"> <p>{{message}}</p> <h1>{{message '在outer HTML中了'}}</h1> </div> <script src="vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: "小奋斗的悲哀,知与谁说!" }, template: "<h1>{{message '在template中了'}}</h1>", // render: function(createElement) { // return createElement('h1', 'this is createElement') // }, beforeCreate: function () { console.group('beforeCreate 创建前状态===============》'); console.log("%c%s", "color:red", "el : " this.$el); //undefined console.log("%c%s", "color:red", "data : " this.$data); //undefined console.log("%c%s", "color:red", "message: " this.message) }, created: function () { console.group('created 创建完毕状态===============》'); console.log("%c%s", "color:red", "el : " this.$el); //undefined console.log("%c%s", "color:red", "data : " this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " this.message); //已被初始化 }, beforeMount: function () { console.group('beforeMount 挂载前状态===============》'); console.log("%c%s", "color:red", "el : " (this.$el)); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red", "data : " this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " this.message); //已被初始化 }, mounted: function () { console.group('mounted 挂载结束状态===============》'); console.log("%c%s", "color:red", "el : " this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red", "data : " this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " this.message); //已被初始化 }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); console.log("%c%s", "color:red", "el : " this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " this.$data); console.log("%c%s", "color:red", "message: " this.message); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log("%c%s", "color:red", "el : " this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " this.$data); console.log("%c%s", "color:red", "message: " this.message); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log("%c%s", "color:red", "el : " this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " this.$data); console.log("%c%s", "color:red", "message: " this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); console.log("%c%s", "color:red", "el : " this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " this.$data); console.log("%c%s", "color:red", "message: " this.message) } }) </script>

效果:

vue3通过axios获取数据(JavaScriptVUE实例生命周期)(4)

总结:

beforeCreate,在实例初始化之后,数据观测(data observer)和 event/watcher 事件配置之前被调用;

created,实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el 属性目前不可见;

beforeMount,在挂载开始之前被调用:相关的render函数首次被调用;

mounted,el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

beforeUpdate,数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。 可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

updated,由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy,实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed,实例销毁后调用。调用后,Vue实例指向的所有内容都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

常用的方法:created、mounted。

Vue路由

Vue.js路由允许通过不同的URL访问不同的内容。

通过Vue.js可以实现多视图的单页Web应用(single page web application ,SPA)。

Vue.js路由需要载入vue-router库。

代码:

<div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/">首页</router-link> <router-link to="/user">用户管理</router-link> <router-link to="/role">角色管理</router-link> <router-link to="/system">系统管理</router-link> <router-link to="/config">配置管理</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> // 1. 定义(路由)组件。 // 可以从其他文件 import 进来 const Home = { template: '<div>欢迎!!!</div>' } const User = { template: '<div>user list!</div>' } const Role = { template: '<div>role list!</div>' } const System = { template: '<div>system list!</div>' } const Config = { template: '<div>config list!</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 const routes = [ { path: '/', redirect: '/home' }, //设置默认指向的路径 { path: '/home', component: Home }, { path: '/user', component: User }, { path: '/role', component: Role }, { path: '/system', component: System }, { path: '/config', component: Config } ] // 3. 创建 router 实例,然后传 `routes` 配置 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) // 4. 创建和挂载根实例。 // 从而让整个应用都有路由功能 const app = new Vue({ el: '#app', router }) </script>

Axios(基于Promise的HTTP客户端库)

Axios,易用、简洁且高效的http库;

安装:npm install axios

特点:支持node端和浏览器端,同样的API,node和浏览器全支持,平台切换无压力;支持 Promise,使用Promise管理异步,告别传统callback方式;丰富的配置项,支持拦截器等高级配置。

代码:

033.json

{ "status":200, "data":{ "current":1, "size":20, "total":4, "records":[ { "roleId":1, "roleName":"角色1", "roleCode":"role1", "roleType":"1" }, { "roleId":2, "roleName":"角色2", "roleCode":"role2", "roleType":"2" }, { "roleId":3, "roleName":"角色3", "roleCode":"role3", "roleType":"3" }, { "roleId":4, "roleName":"角色4", "roleCode":"role4", "roleType":"4" } ] } }

<div id="app"> <table border="1"> <tr> <td>序号</td> <td>角色ID</td> <td>角色名称</td> <td>角色编号</td> <td>角色类型</td> </tr> <tr v-for="(role, index) in roleList"> <td>{{index 1}}</td> <td>{{role.roleId}}</td> <td>{{role.roleName}}</td> <td>{{role.roleCode}}</td> <td>{{role.roleType}}</td> </tr> </table> </div> <script src="vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var app = new Vue({ el: '#app', data: { roleList: []//数组 }, created() { this.getList(0) }, methods: { getList(id) { //vm = this axios.get('033.json?id=' id) .then(response => { console.log(response) this.roleList = response.data.data.records }) .catch(error => { console.log(error) }); } } }); </script>

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页