vue之组件

最新推荐文章于 2022-08-26 16:08:28 发布

无声的雾

最新推荐文章于 2022-08-26 16:08:28 发布

阅读量152

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/wb785074651/article/details/105873839

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先先来看下如何定义一个组件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
<counter></counter>

</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    Vue.component("counter",{
        template:"<div>" +
                    "<button @click='num++'>" +
                    "+1" +
                    "</button>" +
                     "<br>" +
                    "{{num}}" +
                 "</div>",
        data(){
            return {
                num:0
            }
        }
    })
    const app = new Vue({
        el:"#app",
    })

</script>
</html>

这里在定义模板的时候，最外层只能只能定义一个标签（就不可以同级定义两个div），使用的时候，直接加到div里面就可以了。

上面这个就是显示的全局组件，再看看局部组件是如何定义的：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
<counter></counter>

</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
   const cl =  {
        template:"<div>" +
                    "<button @click='num--'>" +
                    "减1" +
                    "</button>" +
                     "<br>" +
                    "{{num}}" +
                 "</div>",
        data(){
            return {
                num:100
            }
        }
    }
    const app = new Vue({
        el:"#app",
        components:{
            counter:cl
        }
    })

</script>
</html>

无声的雾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue之组件

首先先来看下如何定义一个组件<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> &l...
复制链接

扫一扫