小白学习vue第五天(理解使用组件开发,组件第一弹)
组件怎么从创建到使用?
第一步创建组件构造器对象
感觉个人理解就是创建一个模板,和创建MongoDB数据模板相似
const cpnC = Vue.extend({
template: `
<div >
<h1>我是标题</h1>
<p>我是内容</p>
</div>`
})
第二步注册组件
模板做好了就要注册一下才能用,注册成Vue的组件
Vue.component('my-cpn', cpnC)
const app = new Vue({
el: '#app',
data: {
message: "你好,世界",
},
})
第三步使用组件
<div id="app">
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
小白学习vue第五天(理解使用组件开发,组件第一弹)的更多相关文章
- 小白学习vue第五天-第二弹(全局局部、父子、注册语法糖,script/template抽离模板)
全局组件: 就是注册的位置在实例对象的外面 并且可以多个实例对象使用 而局部: 就是在实例对象的内部注册 父组件和子组件的关系 子组件就是在另一个组件里面注册的组件 组件注册语法糖: 就不用Vue.e ...
- 小白学习Vue第五天(v-model实用的地方)
用法一radio单选项 <!-- 添加name男女选项互斥 --> <label for="male"> <input type="radi ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- 小白学习django第五站-简易案例
首先在setting.py文件中编写数据库配置内容 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': ' ...
- 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板
环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...
- 学习vue第五节,vue中使用class和style的css样式
vue中使用class样式 数组 <h1 :class="['red', 'thin']">这是一个H1</h1> 数组中使用三元表达式 <h1 :c ...
- 小白学习vue第三天,从入门到精通(computed计算属性)
computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...
- 小白学习Spark系列五:scala解析多级json格式字符串
一.背景 处理json格式的字符串,key值一定为String类型,但value不确定是什么类型,也可能嵌套json字符串,以下是使用 JSON.parseFull 来解析多层json. 二.实例代码 ...
- c#面向对象基础技能——学习笔记(五)委托技术在开发中的应用
委托 delegate 1.是一种全新的面向对象语言的特性: 2.开发事件驱动程序变得非常简单: 3.简化多线程难度. 理解委托:可以理解成一个方法的指针.(接收的变量是方法) 步骤: 1.声明委托, ...
随机推荐
- SpringBoot 拦截器妙用,让你一个人开发整个系统的鉴权模块!
我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章,回复[资料],即可获得我精心整理的技术资料,电子书籍,一线大厂面试资料和优秀简历模板. Han ...
- 虚拟机安装Windows7旗舰版-超详细图文
虚拟机安装Windows7旗舰版 ----就是想弄一个自己用的CTF+渗透测试的工具集成系统,本来想着用真实机弄就好了,但还是出于安全的考虑,还是再装个虚拟机吧~ 1.先到MSDN找好安装包:http ...
- 11 监控MySQL主从状态是否异常
#!/bin/bash source /etc/profile # 主从同步 # master:binlog # slave:relaylog # 写->master->binlog< ...
- Rsync+Sersync数据实时同步(双向)
Rsync+Sersync数据实时同步(双向) 服务介绍 一.为什么要用rsync+sersync架构? 1.sersync是基于inotify开发的,类似于inotify-tools的工具 2.se ...
- ACM金牌选手整理的【LeetCode刷题顺序】
算法和数据结构知识点图 首先,了解算法和数据结构有哪些知识点,在后面的学习中有 大局观,对学习和刷题十分有帮助. 下面是我花了一天时间花的算法和数据结构的知识结构,大家可以看看. 后面是为大家 精心挑 ...
- 0shell变量
1.定义变量 2.使用变量 3.修改变量的值 4.将命令的结果赋值给变量 5.只读变量 6.删除变量 一.变量 1.定义变量 在 Bash shell 中,每一个变量的值都是字符串,无论你给变量赋值时 ...
- Leetcode 递归题
24. 两两交换链表中的节点 题目描述: 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2-&g ...
- SwaggerHub 更快,标准化的API设计软件
更快,标准化的API设计 在功能强大且直观的编辑器中设计API,该编辑器旨在提高速度和效率,而不会损失设计一致性. SwaggerHub帮助我们简化了设计和实现API的方式-作为一名架构师,我喜欢良好 ...
- 续PA协商过程
续PA协商过程 当sw3的接口恢复之后会发生2中情况. ①sw3的G0/0/2口先发BPDU ②sw3的G0/0/3口先发BPDU sw3先发送BPDU sw3和sw1的交互过程: sw3的2口恢复后 ...
- VBA:考场场标打印
Function pda(x) a = x If Len(a) = 1 Then ab = "00" & a ElseIf Len(a) = 2 Then ab = &qu ...