一.前言

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

二.代码如下

<!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. mysql 基础知识整理

    什么是MySQL? MySQL 是一种关系型数据库,在Java企业级开发中非常常用,因为 MySQL 是开源免费的,并且方便扩展.阿里巴巴数据库系统也大量用到了 MySQL,因此它的稳定性是有保障的. ...

  2. Linux海量数据高并发实时同步架构方案杂谈

    不论是Redhat还是CentOS系统,除去从CDN缓存或者数据库优化.动静分离等方面来说,在架构层面上,实 现海量数据高并发实时同步访问概括起来大概可以从以下几个方面去入手,当然NFS的存储也可以是 ...

  3. Hudi基本概念

    Apache Hudi(发音为"Hoodie")在DFS的数据集上提供以下流原语 插入更新 (如何改变数据集?) 增量拉取 (如何获取变更的数据?) 在本节中,我们将讨论重要的概念 ...

  4. 【Python3网络爬虫开发实战】6.4-分析Ajax爬取今日头条街拍美图【华为云技术分享】

    [摘要] 本节中,我们以今日头条为例来尝试通过分析Ajax请求来抓取网页数据的方法.这次要抓取的目标是今日头条的街拍美图,抓取完成之后,将每组图片分文件夹下载到本地并保存下来. 1. 准备工作 在本节 ...

  5. 深入比特币原理（三）——交易的输入(input)与输出(output)

    本节内容非常重要,如果你不能很好的掌握本节内容,你无法真正理解比特币的运行原理,请务必要学习清楚. 比特币的交易模型为UTXO(unspend transaction output),即只记录未花费的 ...

  6. 洛谷 题解 CF299A 【Ksusha and Array】

    本蒟蒻又双叒叕被爆踩辣! 这就是道大水题 首先,题目意思: 给你n个数,要你找这些数字中找到一个能够被这些所有数字整除的数,若有多个,可任意输出其中一个,其实答案只有一个,因为在大于等于自己的数中能被 ...

  7. CF1236B Alice and the List of Presents

    题意翻译 有nn种物品和mm个背包,每种物品有无限个,现将若干个物品放到这些背包中,满足: 1.每个背包里不能出现相同种类的物品(允许有空背包): 2.在所有的mm个背包中,每种物品都出现过. 求方案 ...

  8. [TimLinux] scrapy 在Windows平台的安装

    1. 安装Python 这个不去细说,官网直接下载,安装即可,我自己选择的版本是 Python 3.6.5 x86_64bit windows版本. 2. 配置PATH 我用的windows 10系统 ...

  9. HDU5973 Game of Geting Stone(威佐夫博弈)

    Two people face two piles of stones and make a game. They take turns to take stones. As game rules, ...

  10. 19.DjangoRestFramework学习二之序列化组件、视图组件

    一 序列化组件 首先按照restful规范咱们创建一些api接口,按照下面这些形式写吧: Courses --- GET ---> 查看数据----->返回所有数据列表[{},{},] C ...