心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

Vue全家桶--09 生命周期和 Ajax 服务端通信

发布时间：2022-07-01 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue全家桶--09 生命周期和 Ajax 服务端通信，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue全家桶--09 生命周期和 Ajax 服务端通信

9.1 vue实例生命周期

生命周期钩子函数

 每个 Vue 实例在被创建时都要经过一系列的初始化过程

　　生命周期分为三大阶段：初始化显示、更新显示、销毁Vue实例

　　初始化阶段的钩子函数：

　　　　beforeCreate() 实例创建前：数据和模板均未获取到

　　　　created() 实例创建后: 最早可访问到 data 数据，但模板未获取到

　　　　beforemount() 数据挂载前：模板已获取到，但是数据未挂载到模板上。

　　　　mounted() 数据挂载后： 数据已挂载到模板中

　　更新阶段的钩子函数：

　　　　beforeUpdate() 模板更新前：data 改变后，更新数据模板前调用

　　　　updated() 模板更新后：将 data 渲染到数据模板中

　　销毁阶段的钩子函数：

　　　　beforedestroy() 实例销毁前

　　　　destroyed() 实例销毁后

 

生命周期图示

Vue全家桶--09 生命周期和 Ajax 服务端通信

DEMO

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        VAR vm = new Vue({
            //el: '#app',
            data: {
                msg: 'heloo'
            },

            beforeCreate() {
                console.LOG('beforeCreate()', this.$el, this.$data)
            },
            created() {
                // 已初始化 data 数据，但数据未挂载到模板中
                console.log('created()', this.$el, this.$data)
            },
            beforeMount() {
                // 模板已获取到，但是数据未挂载到模板上
                console.log('beforeMount()', this.$el, this.$data)
            },
            mounted() {
                // 编译完成 ，数据已挂载到模板中
                console.log('mounted()', this.$el, this.$data)
            },
            beforeUpdate() {
                // 当 data 改变后，去更新模板中的数据前调用
                // 注意：浏览器问题，需使用 this.$el.innerHTML 获取更新前的 Dom 模板数据
                console.log('beforeUpdate()', this.$el.innerHTML, this.$data)
            },
            updated() {
                // data 被 Vue 渲染之后的 Dom 数据模板
                console.log('updated()', this.$el.innerHTML, this.$data)
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            destroyed() {
                console.log('destroyed');
            }


        }).$mount('#app'); // 实例中未使用 el 选项，可使用$mount()手动挂载 Dom

        // vm.$destroy() 销毁 Vue 实例
    </script>
</body>

 

9.2 liveServer服务端插件

1. 在 VS Code 中安装 liveServer 服务端插件，用于 Ajax 接口调用

Vue全家桶--09 生命周期和 Ajax 服务端通信

2. 启动服务器：方式1：任意打开一个 html 页面，在最下面可看到 GoLive 点击启动，默认端口5500方式2：在 html 页面单击右键 ，点击如下，访问页面注意：如果之前启动过服务器，则使用 方式2 启动html页面，不能使用 方式1 会端口占用

Vue全家桶--09 生命周期和 Ajax 服务端通信

3. 更改 liveServer 默认端口号： 按 Ctrl + , 打开 Settings ，如下操作，打开 settings.json, 再json文件中添加 "liveServer.settings.port": 8080,

Vue全家桶--09 生命周期和 Ajax 服务端通信

 

9.3 Vue中常用的ajax库

目前 Vue 官方没有内置任何 ajax 请求方法1 vue-resource在 vue1.x 版本中， 被广泛使用的非官方 Vue 插件 vue-resource2 axios在 vue 2+ 版本中，官方推荐使用非常棒的第三方 ajax 请求库

使用：结合生命钩子获取数据，渲染数据 created()

 

9.4 vue-resource的使用

参考手册：https://gIThub.COM/pagekit/vue-resource/blob/develop/docs/http.md

npm安装命令： npm install vue-resource 

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in msg" :key="index">{{item.name}}</li>
        </ul>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-resource/dist/vue-resource.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: []
            },
            created() {
                this.$http.get('http://127.0.0.1:5500/vue-07-lifecycle&ajax/db.json').then((response) => {
                    // 如果要使用Vue实例的this，此处需要使用箭头函数
                    // success callback
                    console.log(response.data) // 响应数据
                    this.msg = response.data
                }, (response) => {
                    // error callback
                    console.log(response.statusText) //错误信息
                })
            }
        });

    </script>
</body>

 

9.5 axios的使用

参考手册：https://github.com/axios/axios/blob/master/README.md

npm安装命令：npm install axios

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in msg" :key="index">{{item.name}},{{item.age}}</li>
        </ul>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: []
            },
            created() {
                axios.get('http://127.0.0.1:5500/vue-07-lifecycle&ajax/db.json').then(response => {
                    console.log(response.data) // 得到返回结果数据
                    this.msg = response.data
                }).catch(error => {
                    console.log(error.message)
                })
            }
        });
    </script>
</body>

 

9.6 组件化axios通信

将上一章的Bootstrap案例，添加axios异步访问

安装npm :npm install axios

引入axios.js 

<script src="../node_modules/axios/dist/axios.js"></script>

emp.json

@H_777_720@[
{"id": 1, "name": "张三1", "salary": 9899},
{"id": 2, "name": "张三2", "salary": 9999},
{"id": 3, "name": "张三3", "salary": 9099},
{"id": 4, "name": "张三4", "salary": 9199}
]

重构 AppHome.js

; (function () {

    const template = ` <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

    <!--右边上半区域-->
    <!--<h1 class="page-header">dashboard</h1>-->
    <!--定义插槽-->
    <slot name="dashboard"></slot>
    <dash-board :hobbies='hobbies' @del-Hobby="deleteHobby"></dash-board>

    <!--右边下半区域-->
    <h2 class="sub-header">Section title</h2>
    <home-list :empList='empList' :delItem="delItem"></home-list>
  </div>`;

    window.AppHome = {
        template,
        components: {
            DashBoard,
            HomeList
        },
        data() {
            return {
                hobbies: ['看书', '台球', '睡觉', '撸代码'],//dashboard显示数据
                empList: []
            };
        },
        created() {
            axios.get('http://127.0.0.1:5500/vue-07-lifecycle&ajax/04-bootstrap-ajax/emp.json').then(response => {
                console.log(response.data) // 得到返回结果数据
                this.empList = response.data
            }).catch(error => {
                console.log(error.message)
            })
        },
        methods: {
            // 删除指定下标的数据
            // 因为删除 emp 会对 empList 做更新操作，
            // 而 empList 是初始化在当前这个组件里，所以删除的函数要定义在这个组件中
            delItem(index) {
                this.empList.splice(index, 1);
            },
            deleteHobby(index) {
                this.hobbies.splice(index, 1);
            }
        }
    }

})()

 

脚本宝典总结

以上是脚本宝典为你收集整理的Vue全家桶--09 生命周期和 Ajax 服务端通信全部内容，希望文章能够帮你解决Vue全家桶--09 生命周期和 Ajax 服务端通信所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：javalistloadloadmasterphppython安装安装程序员程序员重构
猜你在找的心得技巧相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程