10.VUE组件中的data和methods

最新推荐文章于 2024-06-20 13:52:07 发布

休息休息夏

最新推荐文章于 2024-06-20 13:52:07 发布

阅读量428

点赞数 1

分类专栏： VUE基础学习文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_42881159/article/details/117186356

版权

VUE基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <cf></cf>
    <cf2></cf2>
</div>
<template id="t1">
	<!--这里的cf是指方法-->
    <p @click="cf">{{msg}}</p>
</template>
</body>
<script>
    Vue.component('cf',Vue.extend({
        template:"#t1",
        /*自定义组件中的data属性必须是一个函数类型，并且这个函数一定要返回一个对象类型*/
        data:function (){
            return{
                msg:"九亿少女的梦",
            }
        },
        methods: {
            cf(){
                this.msg = "我是林更新";
            }
        }
    }))

    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{
            cf2:{
                template: "#t1",
                data(){
                    return{
                        msg:"国民老公"
                    }
                },
                methods:{
                    cf(){
                        this.msg="我是王思聪"
                    }
                }
            }
        }
    });
</script>
</html>