小白学习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.声明委托, ...
随机推荐
- [HTML]常用的文本标签(标题、段落、加粗、下划线等标签)
标签类型 写法 说明 标题 <h1></h1>......<h6></h6> 加粗.独占一行(块级元素) 段落 <p></p> ...
- 【LeetCode每日一题 Day 1】1. 两数之和
大家好,我是编程熊,今天是LeetCode每日一题的第一天,今天的你比昨天更加优秀啦! 题意 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target ...
- centos7 system自定义服务
1.介绍 centos中service命令与/etc/init.d的关系 service httpd start 其实是启动了存放在/etc/init.d目录下的脚本. 但是centos7的服务管 ...
- 使用docker搭建最新版本的gitea,并配置HTTPS访问
使用docker搭建最新版本的gitea,并配置HTTPS访问 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 之前有搭建 ...
- Ansible自动化运维应用实战
实验环境 centos7.4 主机名称 IP 配置 用途 controlnode 172.16.1.120 1核/1G/60G ansible slavenode1 172.16.1.121 1核/1 ...
- CSS经典布局——圣杯布局与双飞翼布局
一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...
- 你真的懂 export default 吗?
export default A 和 export { A as default } 乍一看是一样的,但是里面有一些细微的区别比较容易留坑.本文介绍两种写法的不同之处. import 语句导入的是引用 ...
- linux 退出状态码
状态码 描述 0 命令成功结束 1 一般性未知错误 2 不适合的shell 命令 123 命令不可执行 127 没找到命令 128 无效退出参数 128+x 与linux信号x相关的严重错误 130 ...
- Linux学习之路(RPM和YUM)
rpm包的管理 介绍: 一种用于互联网下载包的打包及安装工具(类似windows中的setup).它包含在某些Linux分发版中.它生成具有RPM扩展名的文件.RPM是RedHat软件包管理工具缩写, ...
- 不同版本docker修改存储位置补充
前言:最近发现yum安装docker,安装的版本不一样,有点蛇皮,虽然存放默认位置都是/var/lib/docker,但是它的配置文件不一样,这里做个补充 对于docker版本是1.13及以下 操作如 ...