一.前言

这是自己重新写的一个，感觉以前的太写了很多不必要的方式 实际当中基本不会用的 所以自己写了一个常用的组件什么方式 更加的通俗易懂

二.代码如下

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>组件练习</title>

		<!-- 引入vue.js -->

		<script src="../vue/vue.js"></script>

	</head>

	<body>

		<div id="app">

			<!-- {{msg}} -->

			<!-- 全局组件 -->

			<my-div></my-div>

			<!-- 局部组件 -->

			<my-div2></my-div2>

			<!-- //templata 注册全局组件 -->

			<clj></clj>
　　　　　　　　　　　　　　<!-- //templata 注册局部组件 -->

			<clj2></clj2>

		</div>

		<!-- //templata 注册全局组件 -->

		<template id="my-template">

			<div>

				我是template全局组件

			</div>

		</template>
　　　　　　　　　　<!-- //templata 注册全局组件 -->

		<template id="my-template2">

			<div>

				我是template局部组件

			</div>

		</template>

		<script>

			// 全局组件

			Vue.component('clj',{template:"#my-template"})

			Vue.component("my-div",{template:`<div>我是全局组件</div>`})

			new Vue({

				el:'#app',

				data(){

					return{

						msg:'我不爱大海和森林'

					}

				},

			//局部组件

				components:{

					'my-div2':{template:`<div>我是局部组件</div>`},

					'clj2':{template:"#my-template2"}

				}

			})

		</script>

	</body>

</html>

vue组件常用声明方式的更多相关文章

  1. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  2. vue 组件间传值方式

    /* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2.在子组件里 ...

  3. vue组件常用传值

    一.使用Props传递数据   在父组件中使用儿子组件 <template> <div> 父组件:{{mny}} <Son1 :mny="mny"&g ...

  4. vue组件的调用方式

    vue中一般都会把公共内容作为一个组件去布局,但是如何引用自定义的组件呢?下面就是vue调用自定义组件的方式,主要代码如下: <template> <div> <span ...

  5. Vue组件的定义方式

    1.使用template标签定义组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. vue组件的拆分

    vue组件的拆分 <div class="div"> <!-- 拆分出来的组件 自定义名字moban --> <moban></moban ...

  7. vue-class-component 以class的模式写vue组件

    vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件.vue-class-component(以下简称Component)带来了很多便利: 1.me ...

  8. vue组件的配置属性

    vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...

  9. Vue组件的介绍与使用

    组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...

随机推荐

  1. 单核苷酸多态性SNP(single nucleotide polymorphism)

    定义 主要指基因组水平上由单个核苷酸的变异所引起的 DNA 序列多态性. 在基因组水平上由单个核苷酸的变异所引起的DNA序列多态性.即:在不同个体的同一条染色体或同一位点的核苷酸序列中,绝大多数核苷酸 ...

  2. c语言l博客作业08

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  3. 怎么解决js中如滑动到最底端一次操作触发多次

    定义一个布尔类型到标志,处理中将起设置为true ,处理完改完false,逻辑: data{ isInProcessing:false } //逻辑函数过程中: if(isInProcessing){ ...

  4. python推导式pythonic必备【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  5. NoSql中的CAP原则

    C:一致性 .A:可用性.P:分区容错性 Partition tolerance(分区容错性): 大多数分布式系统都分布在多个子网络.每个子网络就叫做一个区(partition).分区容错的意思是,区 ...

  6. 深入理解Android异步消息处理机制

    一.概述 Android 中的异步消息处理主要分为四个部分组成,Message.Hndler.MessageQueue 和 Looper.其关系如下图所示: 1. Message 是线程之间传递的消息 ...

  7. luogu P1731 [NOI1999]生日蛋糕 |暴力枚举

    题目背景 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层 生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1<=i<=M)层蛋糕是半径为Ri, 高度为Hi的圆柱 ...

  8. iOS app反编译

    对于APP store 上的应用都是加密的了,反编译起来有难度. 对于自己用xcode 编译的ipa 或者是其他渠道下载的ipa包都可以使用反编译工具进行反编译. https://cnbin.gith ...

  9. acm模板总结

    模板链接 字符串模板 KMP EXKMP Trie 可持久化Trie树+DFS序 01Trie Manacher 字符串哈希 2019上海网络赛G题 17 SA(后缀数组)  最大不重叠相似子串 求两 ...

  10. （重点）Python深入之Python内存管理机制你会吗？

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:醍醐三叶 请注意:如果你平时学Python遇到问题找不到人解答?或者没有 ...