[TOC]

Vue 高级使用

1.1、自定义组件

  • 学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如 就是对的封装。
  • 本质上，组件是带有一个名字且可复用的 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>

1.2、Vue的生命周期

  • 生命周期

Vue生命周期.png

  • 生命周期的八个阶段
    生命周期的八个阶段.png
  • 代码实现
    ```html <!DOCTYPE html> 
     {{message}}


    
<a name="2bf29a39"></a>
## 1.3、Vue异步操作

-  **在Vue中发送异步请求，本质上还是AJAX。我们可以使用axios这个插件来简化操作！** 
-  **使用步骤**<br />1.引入axios核心js文件。<br />2.调用axios对象的方法来发起异步请求。<br />3.调用axios对象的方法来处理响应的数据。 
-  **axios常用方法**<br /> ![axios常用方法.png](https://cdn.nlark.com/yuque/0/2021/png/1455470/1629612553294-be52fdd1-8c51-45ae-a5bf-316609bd7c5a.png#clientId=uc3d9fc2f-3a3d-4&from=drop&id=u25314bed&margin=%5Bobject%20Object%5D&name=axios%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95.png&originHeight=211&originWidth=672&originalType=binary&ratio=1&size=43221&status=done&style=none&taskId=u08042522-ad53-49f4-815a-c4524b68d77)
-  **代码实现** 
   - **html代码**
```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代码 ```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);
}

    }

    
<a name="6dd3bf47"></a>
## 1.4、小结

-  自定义组件：本质上，组件是带有一个名字且可复用的 Vue 实例，我们可以自己来定义。  
```tex
Vue.component(组件名称, {
 props:组件的属性,
 data: 组件的数据函数,
 template: 组件解析的标签模板
})
    • 生命周期：核心八个阶段
      beforeCreate：创建前
      created：创建后
      beforeMount：载入前
      mounted：载入后
      beforeUpdate：更新前
      updated：更新后
      beforeDestroy：销毁前
      destroyed：销毁后
    • 异步操作：通过 axios 插件来实现。
      axios常用方法.png