Vue的自定义组件

  • 自宣言组件: 本质上, 组件是带有一个名称且可复用的Vue实例
Vue.component(组件名称,{
        props:组件的属性,
        data:组件的数据函数,
        template:组件解析的标签模板
    }
)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义组件</title>
    <script src="../js2/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>

Vue的生命周期

  • 生命周期的八个阶段
状态          阶段周期
beforeCreate  创建前
created       创建后
beforeMount   载入前
mounted       载入后
beforeUpdate  更新前
updated       更新后
beforeDestroy 销毁前
destroyed     销毁后

Vue 异步操作

  • 在Vue中发送异步请求, 本质上还是AJAX. 我们可以使用axios这个插件来简化操作
  • 使用步骤
    • 引入axios核心js文件
    • 调用axios对象的方法来发起异步请求
    • 调用axios对象的方法来处理响应的数据
  • axios常用方法
方法名                          作用
get(请求的资源路径与请求的参数) 发起GET方式请求
post(请求的资源路径,请求的参数) 发起POST方式请求
then(reponse)                   请求成功后的回调函数,通过resposnse获取响应的数据
catch(error)                    请求失败后的回调函数,通过error获取错误信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.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)
                // })

                axios.post("testServlet","name="+this.name)
                .then( resp =>{
                    alert(resp.data);
                })
                .catch( error =>{
                    alert(error)
                })
            }
        }
    })
</script>
</html>