一.前言

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

二.代码如下

<!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. surfer白化

    surfer白化的方法: 方法一: 1.griddata需白化的文件(surfer处理成grd格式,也就是surfer绘图的基本数据格式) 注意:用surfer转换格式时,插值间距(spacing)大 ...

  2. AWK工具 使用介绍

    第6周第5次课(4月27日) 课程内容: 9.6/9.7 awk扩展把这里面的所有练习题做一下http://www.apelearn.com/study_v2/chapter14.html 9.6/9 ...

  3. MySQL主从介绍、配置主从、测试主从同步

    6月28日任务 说明:有不少同学不能一次性把实验做成功,这是因为还不熟悉,建议至少做3遍17.1 MySQL主从介绍17.2 准备工作17.3 配置主17.4 配置从17.5 测试主从同步有的同学,遇 ...

  4. C语言I作业09

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

  5. js递归优化

    递归优化 递归在我们平时撸码中会经常用到,不过可能很多人不知道递归的弊端,就是会导致调用栈越来越深.如果没有节制的使用递归可能会导致调用栈溢出. 那什么是递归呢? 递归调用是一种特殊的嵌套调用,是某个 ...

  6. Spring Boot2 系列教程(二十九)Spring Boot 整合 Redis

    经过 Spring Boot 的整合封装与自动化配置,在 Spring Boot 中整合Redis 已经变得非常容易了,开发者只需要引入 Spring Data Redis 依赖,然后简单配下 red ...

  7. 重磅！普惠AI--华为云语音语义万次调用1元购，有奖问答@评论区等你来！【华为云技术分享】

    活动快速入口:https://activity.huaweicloud.com/language_speech_promotion0.html 语音交互与自然语言处理 语音交互是一种人机交互方式,以开 ...

  8. 时至今日，我们应该承认.Net目前的状况实在堪忧

    一:  .Net之前 .Net 经历了多年的锤炼,语言特性本身非常优雅和完善,也是非常甜品的一种语言 二:  .Net现状 但是与此同时,.Net的生态日益糟糕,困扰着广大.Neter 三:   .N ...

  9. Xcode10.0: NO BUNDLE URL PRESENT

    目录 解决方案 1.删除build, 重新运行, 没有work 2.删除node_modules, npm i, 重新运行, 没有work 3.删除端口占用 4.代理设置, 可能work了 解决方案 ...

  10. golang包管理的古往今来

    https://golang.org/ before GO1.5-GOPATH 在GO1.5之前用GOPATH以及GOROOT这两个环境变量来决定包的位置. GOROOT就是告知当前go的安装位置,编 ...