一.前言

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

二.代码如下

<!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. centos7更新php5.4到php5.6/php7

    centos7系统yum安装的php版本为5.4. 因业务需求,开发可能需要php5.6环境. 本文应需而生,介绍从php5.4升级到php5.6. 如需更新到php7环境,步骤一样. 如果是线上应用 ...

  2. 高并发编程-AQS深入解析

    要点解说 AbstractQueuedSynchronizer简称AQS,它是java.util.concurrent包下CountDownLatch/FutureTask/ReentrantLock ...

  3. 【SpringSecurityOAuth2】源码分析@EnableOAuth2Sso在Spring Security OAuth2 SSO单点登录场景下的作用

    目录 一.从Spring Security OAuth2官方文档了解@EnableOAuth2Sso作用 二.源码分析@EnableOAuth2Sso作用 @EnableOAuth2Client OA ...

  4. 程序员修神之路--打通Docker镜像发布容器运行流程

    菜菜哥,我看了一下docker相关的内容,但是还是有点迷糊 还有哪不明白呢? 如果我想用docker实现所谓的云原生,我的项目该怎么发布呢? 这还是要详细介绍一下docker了 Docker 是一个开 ...

  5. 在华为云ECS上手工通过Docker部署tomcat

    本文介绍了如何在华为云上ECS上手工通过Docker部署tomcat,并提供了Docker常用操作 一.环境准备 ECS:操作系统版本:    CentOS Linux release 7.6.181 ...

  6. Android多图选择

    多图选择是Android中一个常用的功能,用户可以拍照或者批量选择图片上传,还是国际惯例,先看下效果图,demo地址我会放到文章末尾. 经过对比,这里我选择了一个第三方开源库PictureSelect ...

  7. MongoDB下载+安装+运行

    一. 官网下载安装 MongoDB 提供了 OSX 平台上 64 位的安装包,你可以在官网下载安装包. 下载地址:MongoDB官网-Community Server 选择适合自己平台的版本, 下载对 ...

  8. 60%的人不懂Python进程Process，你懂吗？

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:蒋狗    新手注意:如果你Python基础学的不够扎实,遇问题没人解答 ...

  9. kerberos&ssh 原理、免密登录搭建

    原理 详细介绍 参考oracle文档:Kerberos 服务 安装过程 1.安装krb5 yum install -y krb5-server yum install krb5-workstation ...

  10. Selenium之下拉框操作

    下拉框操作: 一般下拉框适用场景:在新增时有下拉框选项,在二级联动或多级联动有下拉(比如:在选择省市县时的多级联动下拉). 下拉框选择都有select的标签属性,存在两个属性select和option ...