前端基础-vue（基本组件）

最新推荐文章于 2024-05-13 18:14:47 发布

SmallRed-zhb

最新推荐文章于 2024-05-13 18:14:47 发布

阅读量350

点赞数

分类专栏： IT 前端文章标签：前端基础前端框架 vue vue.js vue.js组件

本文链接：https://blog.csdn.net/qq_41442781/article/details/89811866

版权

IT 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

前端

35 篇文章 0 订阅

订阅专栏

html部分：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-zujian></my-zujian>
</div>

js部分：

Vue.component("my-component",{//组件跟vue实例创建的方法一样需要注册后使用，这里是全局注册，my-component就是注册的自定义的标签，之后就可以使用<my-component></my-component>，全局组件可以在任意vue控制的实例中使用,如在#App2中也可以使用
   template:'<div>全局注册的内容</div>',//在<my-component></my-component>添加内容
   template:'<div @click="count++">{{count}}</div>',//在<my-component></my-component>添加内容
   data:function(){//data必须写成函数，写成对象会报错
       return {
           count : 0,
       }
   }
});

var app=new Vue({
   el:'#app',
   data:{
       name:"zhb",
       },
   //template:'<div>{{name}}<div>123</div></div>',//template会覆盖div中已有的元素，并且必须要有一个根元素,将<div>123</div>写在大的<div></div>外面就不会显示
   components:{//定义一个局部组件
   "my-zujian":{//局部组件名，让html用这个组件名调用
       template:"<div>局部组件的内容</div>",
       }
   }
})
var app2=new Vue({
   el:"#app2",
   //template:'<my-component></my-component>',
})

SmallRed-zhb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础-vue（基本组件）

html部分：<!doctype html><html><head><meta charset="utf-8"><title>vue组件</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>...
复制链接

扫一扫