Vue-04-笔记

Posted 寻7

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-04-笔记相关的知识,希望对你有一定的参考价值。

Vue高级使用

1、自定义组件

  • 学完了 Element 组件后,我们会发现组件其实就是自定义的标签。例如<el-button> 就是对<button>的封装。

  • 本质上,组件是带有一个名字且可复用的 Vue 实例,我们完全可以自己定义。

  • 定义格式

    Vue.component(组件名称, {
     props:组件的属性,
     data: 组件的数据函数,
     template: 组件解析的标签模板
    })
    
  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自定义组件</title>
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <div id="div">
            <my-button>我的按钮</my-button>
        </div>
    </body>
    <script>
        Vue.component("my-button",{
            // 属性
            props:["style"],
            // 数据函数
            data: function(){
                return{
                    msg:"我的按钮"
                }
            },
            //解析标签模板
            template:"<button style='color:red'>{{msg}}</button>"
        });
    
        new Vue({
            el:"#div"
        });
    </script>
    </html>
    

2、Vue的生命周期

  • 生命周期
    在这里插入图片描述

  • 生命周期的八个阶段
    在这里插入图片描述

  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>生命周期</title>
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
    </body>
    <script>
        let vm = new Vue({
    				el: '#app',
    				data: {
    					message: 'Vue的生命周期'
    				},
    				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);//undefined
    				},
    				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 更新前状态===============》');
    					let dom = document.getElementById("app").innerHTML;
    					console.log(dom);
    					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 更新完成状态===============》');
    					let dom = document.getElementById("app").innerHTML;
    					console.log(dom);
    					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);
    				}
    			});
    
    		
    			// 销毁Vue对象
    			//vm.$destroy();
    			//vm.message = "hehe";	// 销毁后 Vue 实例会解绑所有内容
    
    			// 设置data中message数据值
    			vm.message = "good...";
    </script>
    </html>
    

3、Vue异步操作

  • 在Vue中发送异步请求,本质上还是AJAX。我们可以使用axios这个插件来简化操作!

  • 使用步骤
    1.引入axios核心js文件。
    2.调用axios对象的方法来发起异步请求。
    3.调用axios对象的方法来处理响应的数据。

  • axios常用方法
    在这里插入图片描述

  • 代码实现

    • html代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>异步操作</title>
        <script src="js/vue.js"></script>
        <script src="js/axios-0.18.0.js"></script>
    </head>
    <body>
        <div id="div">
            {{name}}
            <button @click="send()">发起请求</button>  <!--事件绑定-->
        </div>
    </body>
    <script>
        new Vue({
            el:"#div",
            data:{
                name:"张三"
            },
            methods:{
                send(){
                    // GET方式请求
                    // axios.get("testServlet?name=" + this.name)
                    //     .then(resp => {
                    //         alert(resp.data);
                    //     })
                    //     .catch(error => {
                    //         alert(error);
                    //     })
    
                    // POST方式请求
                    axios.post("testServlet","name="+this.name)
                        .then(resp => {
                            alert(resp.data);
                        })
                        .catch(error => {
                            alert(error);
                        })
                }
            }
        });
    </script>
    </html>
    
    • java代码
    package com.itheima;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    @WebServlet("/testServlet")
    public class TestServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //设置请求和响应的编码
            req.setCharacterEncoding("UTF-8");
            resp.setContentType("text/html;charset=UTF-8");
    
            //获取请求参数
            String name = req.getParameter("name");
            System.out.println(name);
    
            //响应客户端
            resp.getWriter().write("请求成功");
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            this.doGet(req,resp);
        }
    }
    

4、小结

  • 自定义组件:本质上,组件是带有一个名字且可复用的 Vue 实例,我们可以自己来定义。

    Vue.component(组件名称, {
     props:组件的属性,
     data: 组件的数据函数,
     template: 组件解析的标签模板
    })
    
  • 生命周期:核心八个阶段
    beforeCreate:创建前
    created:创建后
    beforeMount:载入前
    mounted:载入后
    beforeUpdate:更新前
    updated:更新后
    beforeDestroy:销毁前
    destroyed:销毁后

  • 异步操作:通过 axios 插件来实现。
    在这里插入图片描述

以上是关于Vue-04-笔记的主要内容,如果未能解决你的问题,请参考以下文章

[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段

sh bash片段 - 这些片段大多只是我自己的笔记;我找到了一些,有些我已经找到了

需要一种有效的方法来避免使用 Laravel 5 重复代码片段

Oracle-常用数据库对象笔记(片段)

如何使用导航组件处理片段内的向上按钮

JSP笔记