vue学习day2

最新推荐文章于 2025-08-05 22:11:48 发布

灞波儿奔、和奔波儿灞

最新推荐文章于 2025-08-05 22:11:48 发布

阅读量731

点赞数 14

CC 4.0 BY-SA版权

文章标签： vue.js 学习前端

本文链接：https://blog.youkuaiyun.com/build_the_countr/article/details/139378878

Vue组件

首先要引用vue.js cdn

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

自定义组件

<script>
    Vue.component("mycomponent",{
        props:['message'],
        template: '<h1>{{message}}</h1>>'
    });

    var vm=new Vue({
        el:"#app",
        data:{
            items:["java","linux","前端"]
        }
    });
</script>

其中mycomponent是自己定义组件的名字，

props中的数组是自己定义的属性（自己理解的），

template是内容模板元素，里面可以使用自己定义的属性来渲染画面。

注意：自己定义的组件不能为大写，否则会无效（亲测）！！！

然后使用自己定义的<mycomponent>

<div id="app">
<!--    模板不能有大写 要不然不去作用-->
    <mycomponent v-for="item in items" :message="item"></mycomponent>
</div>

遍历data中的items，把items中的元素绑定给自定义的message元素。

Axios异步通信

引用vue.js和axios cdn

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <li v-for="item in info.links">
        <a :href="item.url">{{item.name}}</a>
    </li>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data(){
            return {
                info: {}
        }
        },
        mounted(){//钩子函数    链式编程    ES6新特性
            axios.get("../hello.json").then(response=>(this.info=response.data))
        }
    });
</script>
</html>

axios是链式编程，使用前需要将idea的JavaScript设置成ES6否则会报语法错误！

其中hello.json为

{
  "name":"小孙",
  "url": "",
  "page": "1",
  "links": [
    {"name": "哔哩哔哩",
    "url": "https://www.bilibili.com/"
    },
    {"name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]

}

再其中mounted是钩子函数，

一共有八个钩子函数，再vue的生命周期当中

再vue的官网上可以查询

生命周期钩子 | Vue.js (vuejs.org)

beforeCreate：创建vue实例之前执行的钩子函数；

create：vue实例创建完成后执行的钩子函数；

beforeMount：将编译完成的HTML挂载到对应的虚拟dom时触发的钩子函数；(此时页面并没有内容)

Mount：编译浩的HTML挂载到页面完成后执行的事件钩子函数，该函数中一般做一些ajax请求获取数据进行数据初始化；

beforeUpdate：更新之前的钩子函数；

Updated：更新之后的钩子函数；

beforeDestory：vue实例被销毁之前执行的钩子函数；

Destroy：实例被销毁完成执行的钩子函数；

vue计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{time}}:{{timeNow}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            time:"时间",
        },
        computed:{
            timeNow(){
                this.time;
                return Date.now();
            }
        }
    });
</script>
</html>

个人理解：与缓存相似再计算属性中的timeNow方法中的time变化后方法就会执行一次，与methods方法相比，再HTML中调用methods方法是{{timeNow()}}，而computed计算属性使用则是{{timeNow}}.

注意：如果methods和computed中的方法重名，则会执行methods方法中的，computed中的方法则会失效！

vue插槽

在自定义组件中加入插槽slot

如下图

Vue.component("mycomponent",{
        template:'<div>' +
                    '<slot name="title"></slot>' +
                    '<ul>' +
                        '<slot name="item"></slot>' +
                    '</ul>' +
                    '</div>'

    })

在写两个自定义组件，用来填充进插槽中，

Vue.component("mycomponent-title",{
        props:['message'],
        template: '<div>{{message}}</div>'
    })

    Vue.component("mycomponent-item",{
        props:['item'],
        template: '<li>{{item}}</li>'
    })

然后再HTML中使用

<div id="app">
    <mycomponent>
        <mycomponent-title :message="title" slot="title"></mycomponent-title>
        <mycomponent-item v-for="item in items" :item="item" slot="item"></mycomponent-item>
    </mycomponent>
</div>

var vm=new Vue({
        el:"#app",
        data:{
            title:"hello vue",
            items:['java','python','前端']
        }
    });

注意：插槽名字的定义不能太随意，像title等可能已经存在的标签（自己中的坑）！！！