VUE -- 自定义控件(标签)

首先我们在 src目录下新建一个目录叫”component”,建一个mycomponent.vue文件，然后也让他打2句话吧

<template>

<div id="mycomponent">

<h1>我是第一个自定义控件</h1>

<p>{{ msg }}</p>

</div>

</template>

<script type="text/javascript">

export default{

data(){

return{

msg : "hi i am wjj"

}

</script>

然后在我们的app.vue里调用他

<template>

<div id="app2">

<p>{{ message }}</p>

<input v-model="message"></input>

<mycomponent></mycomponent>

</div>

</template>

<script>

import mycomponent from './component/mycomponent.vue'

export default {

name: 'app2',

data () {

return {

message: 'Hello Vue.js!'

}

},

components: { mycomponent }

}

</script>

这里有几个知识点

1.Vue的导入操作是在<script></script>标签里。

2.如果存在子/父控件的概念的话，一定要先初始化/加载子控件。

效果如下：

VUE -- 自定义控件(标签)相关推荐

Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: 参考文章: (1)Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: (2)https://www.cnblogs. ...
Vue本地图片循环加载显示不出来，vue img标签 :src地址拼接
Vue本地图片循环加载显示不出来,vue img标签 :src地址拼接上代码: <img:src="img"alt="banner" /> dat ...
vue实现标签云，让你的标签动起来
欢迎大家进群,一起探讨学习微信公众号,每天给大家提供技术干货博主技术笔记博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star vue实现标签云,让你的 ...
vue给标签动态绑定title
vue给标签动态绑定title 在利用vue开发时,如果标签宽度比较小,我们需要利用 overflow:hidden;text-overflow:ellipsis;white-space: nowra ...
vue修改标签页logo图片
vue修改标签页logo图片由于vue2和vue3的项目结构不同,所以修改方式不一样. 1.vue2 首先static文件夹下放入ico图标然后修改webpack.dev.conf.js文件 ne ...
vue 实现标签云效果全码
vue实现标签云 <template><div class="tagcloud-all" ref="tagcloudall" @click=& ...
Vue input标签 email和手机号输入验证
Vue input标签 email和手机号输入验证 1. email邮箱验证规则 2. 手机号正则表达式验证规则 vue写法: <script> export default {data( ...
html自定义属性冒号,vue中标签上的属性加冒号与不加冒号的区别
今天vue的项目中,因为很多结构一样的条目,所以想到了使用循环.但是问题来了,每个条目的图标不一样,这就需要在循环中依次添加不同的字体图标的类名.直接使用class来操作,结果没有报错,但是图标也没有 ...
vue设置标签自定义属性_Vue组件化开发之插槽
插槽为组件提供了强大的扩展能力.我们可以把电脑的主板理解为一个已经封装好的组件,主板上都会预留各种插槽,我们可以往插槽中插入内存条.显卡.声卡等设备.基于同样的思想,Vue在封装组件时,也可以预留插槽 ...

VUE -- 自定义控件(标签)

VUE -- 自定义控件(标签)相关推荐

最新文章

热门文章