一.前言

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

二.代码如下

<!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. Djangoday2第二个app加减法

    第二个app 计算新建一个app在view定义显示的内容修改urls指定连接对应的视图测试另一种通过路径传参的方式访问网址路径传参的urls定义方法网址路径传参测试urls的urlnamedjango ...

  2. NSAttributedString可以强制转换为NSMutableAttributedString类型吗？下面这代码有什么问题 为什么报错

    -(void)insetEmotion:(EmotionModel*)emotionModel{ if(emotionModel.code){ /** 在TextView中插入图片首选要知道光标的位置 ...

  3. 对Java单例模式 volatile关键字作用的理解

    单例模式是程序设计中经常用到的,简单便捷的设计模式,也是很多程序猿对设计模式入门的第一节课.其中最经典的一种写法是: class Singleton { private volatile static ...

  4. PHP根据经纬度获取在范围坐标的数据

    // 计算范围,可以做搜索用户 function GetRange($lat,$lon,$raidus){ //计算纬度 $degree = (24901 * 1609) / 360.0; $dpmL ...

  5. 微信小程序——页面栈

    刚开始用小程序的时候没怎么在意页面的跳转,也没仔细看文档中说的页面栈的内容.只要能跳转就行,wx.navigateTo,wx.redirectTo 这些方法一顿乱用.最后在做一个十层页面(以前页面栈是 ...

  6. 【LiteOS】STM32F103-LiteOS移植教程（详细篇）

    总览 本文基于STM32F103C8T6,详细讲述华为LiteOS的移植过程.开发工具是MDK5.LiteOS官方已经适配过cortex M系列内核的单片机,因此移植过程非常简单. LiteOS有两种 ...

  7. springboot-整合多数据源配置

    简介 主要介绍两种整合方式,分别是 springboot+mybatis 使用分包方式整合,和 springboot+druid+mybatisplus 使用注解方式整合. 一.表结构 在本地新建两个 ...

  8. luogu P1712 [NOI2016]区间

    题目描述 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得存在一个 x,使得对于每一 ...

  9. iOS 网络基本剖析

    一.网络通信的本质 数据传输,数据交换 Client     <＝＝＝＝＝＝>  服务器 二.HTTP.TCP,IP.UDP.Socket关系刨析 Socket:套接字,是一个用于网络传输 ...

  10. 使用Spring Boot和AspectJ实现方法跟踪基础结构

    了解如何使用Spring Boot和AspectJ实现方法跟踪基础结构!最近在优锐课学习收获颇多,记录下来大家一起进步! 在我们的应用程序中,获取方法的堆栈跟踪信息可能会节省很多时间.具有输入输出参数 ...