快速搞懂Vue里面components和template

vue可以把内容变成组件化，然后提高复用性,那是怎样进行组件化，然后使用呢？

1.先写组件

2.引用组件

我们是单独写的一个js文件存放组件的所以它不是全局引用的，所以我就要把上面写好的registerForm组件引用过来，在这里它的名字被我指定做了loginForm

3.使用组件

上面我们只是引用了，就好像声明一样，我还没有使用它，所以，要使用它就要在template：写出我们的引用后的组件名，每个组件都是一个标签，就想input ，radio一样，
所以是。

4.运行结果

5.易混淆点 Vue.component

Vue.component 是注册全局组件，如果注册全局组件，我们就可以直接在html直接写了，全局可以。

<div id="app"><!--使用定义好的全局组件--><counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">// 定义全局组件，两个参数：1，组件名称。2，组件参数Vue.component("counter",{template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',data(){return {count:0}}})var app = new Vue({el:"#app"})

6.运行结果

快速搞懂Vue里面components和template相关推荐

【学vue跟玩一样】快速搞懂vue渲染
Vue的渲染分为条件渲染和列表渲染,那究竟什么式渲染呢? 1.条件渲染 1.v-if写法:(1)v-if="表达式"(2)v-else-if="表达式"(3)v ...
快速搞懂平面设计视觉思维的窍门
在这个商业氛围很浓的社会中,各种设计海报让人眼花缭乱,如何脱颖而出?需要靠设计的视觉冲击力.所以做平面设计中,要掌握好视觉设计思维,才能更胜一筹.这里给大家讲几个小窍门,让你们快速搞懂平面设计视觉思维 ...
一文快速搞懂Kudu到底是什么
文章目录引言文章传送门: Kudu 介绍背景介绍新的硬件设备 Kudu 是什么 Kudu 应用场景 Kudu 架构数据模型分区策略列式存储整体架构 Kudu Client 交互 Kud ...
一文快速搞懂对95%置信区间的理解
一文快速搞懂对95%置信区间的理解综合知乎上各大神的解答和网络资料得到本文对95%置信区间的理解先给出结论最常出现的对置信区间的错误理解: 在95%置信区间内,有95%的概率包括真实参数 (错 ...
5个品牌案例，6张优质模板，帮你快速搞懂「商业模式画布」！
新入职.新行业,新人如何快速搞懂它的业务模式?新领域.新业务,投资人如何快速搞明白一个公司?新商机.新模式,创业者如何快速一个业务的商业前景? 推荐大家使用商业模式画布,它可以让你轻松看透商业模式.对 ...
怎么从转移特性曲线上看dibl_「科普向」这篇让你快速搞懂IGBT的静态特性
IGBT的静态特性其实并非难以理解的东西,即便是对于外行人而言. 刚接触那会儿,看到转移特性.输出特性之类的就想溜之大吉,加之网上查询的资料一概笼统简单,只描述特性曲线所表示的关系结果,却并不解释曲线 ...
如何快速搞懂一家公司？
如果没有快速作为前提,你的搞懂,价值会大打折扣一.研究一家公司需要的宏观视野 1.把握长期明确趋势看清宏观大背景能为你搞懂公司做出铺垫,同时看清这个公司和宏观的密切程度是怎样的,也决定了需要多大程 ...
快速搞懂Lombok使用与原理
1 简介 Lombok是一款好用顺手的工具,就像Google Guava一样,在此予以强烈推荐,每一个Java工程师都应该使用它.Lombok是一种Java™实用工具,可用来帮助开发人员消除Java的 ...
vue---十分钟搞懂vue计算属性
计算属性前言这篇文章介绍vue组件基础中的计算属性,文章持续输出中! 废话不多说,直接上刺刀!! 1. 什么是计算属性计算属性本质上就是一个 function 函数,它可以实时监听 data 中 ...