vue之组件的简单使用
1.背景
2.组件的简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件使用的基本步骤</h2>
<pre>
1.创建组件构造器 const componentMy = Vue.extend({ template:'html模板'})
2.注册组件 Vue.component('c-my', componentMy)
3.使用组件 写一组标签 c-my 这三步的执行分析: 1.Vue.extend()：
调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。 2.Vue.component()：
调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器 3.组件必须挂载在某个Vue实例下，否则它不会生效。 </pre>
<div id="app">
<!-- <div>
<h4>我是主键01</h4>
你好,我是自定义的组件
</div>-->
<!-- 3.使用组件-->
<c-my></c-my>
</div>
<script>
// 1.创建组件构造器
const componentMy = Vue.extend({
// 相当于一个模板
template: '<div>' +
' <h4>我是主键01</h4>' +
' 你好,我是自定义的组件' +
' </div>'
})
// 2.注册组件
Vue.component('c-my', componentMy) let app = new Vue({
el: '#app'
})
</script>
</body>
</html>
3.全局组件与局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>局部组件与全局组件</h2>
<pre> </pre>
<div id="app">
<!-- 3.使用组件-->
<c-my></c-my>
</div>
<script>
// 1.创建组件构造器
const componentMy = Vue.extend({
// 相当于一个模板
template: '<div>' +
' <h4>我是主键01</h4>' +
' 你好,我是自定义的组件' +
' </div>'
})
// 2.注册组件(在这里注册的是 全局 组件,在任意一个vue实例下都可以使用)
// Vue.component('c-my', componentMy) let app = new Vue({
el: '#app',
// 2.注册组件(在这里注册的是 局部 组件,只能在id=app下面使用才有效)
components: {
'c-my': componentMy
}
})
</script>
</body>
</html>
完美!
vue之组件的简单使用的更多相关文章
- vue基于组件实现简单的todolist
把todolist拆分为header.footer.list三个模块 index文件 <!DOCTYPE html> <html lang="en"> &l ...
- vuex的简单例子和vue model组件
好久没用过vuex了,vuex官方示例的计算器counter是用的webpack打包了单文件组件,不方便回顾,今天把代码改成了html引人的方式,方便回顾 <!DOCTYPE html> ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- Vue.js—组件快速入门以及实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- 从零开始学 Web 之 Vue.js（六）Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
随机推荐
- 关于Collection和Map的笔记
此二者在日常编程中,用得太频繁,所以多少有必要记录下,便于需要的时候翻翻. 但鉴于它们的后代太多,逐一牢记有有点难度,所以学习上应该把握以下几点即可: 含义 重要区别 常用的实现类和工具 关注要点:有 ...
- Linux内核的5个子系统
--- title: Linux内核的5个子系统 EntryName: subsystems_in_linux_kernel date: 2020-10-10 03:07:07 categories: ...
- ARM 命名规则和ARM 版本
结论:我们所接触到提到的命名规则,应该分成两类. 基于ARM Architecture版本的"指令集架构"命名规则:例如armv6, armv7, armv7s, arm64 等系 ...
- 【仿真】Carla简易安装 Window Ubuntu均适用 附ROS的简单连接 [0]
参考与前言 CARLA Documentation 官方文档 后续链接:[仿真]Carla介绍与使用 [1] 本篇创建于 2020/12/18,安装方式为压缩包安装,无需UE4等软件,但是前提是需要一 ...
- 记一次debian无法启动的解决经历
前言 有几台debian物理机突然无法开机了,断电重启后,一直卡在下面这个界面 参考了博客[linux]解决系统卡在ubuntu loading initial ramdisk 发现无法修复 在rec ...
- position的值， relative和absolute分别是相对于谁进行定位的？
relative: 相对定位,相对于自己本身在正常文档流中的位置进行定位 相对它原来的位置,在走100px.原来在标准流中的位置继续占有. absolute: 生成绝对定位,相对于最近一级定位不为s ...
- Mybatis Plus 3.X版本的insert填充自增id的IdType.ID_WORKER策略源码分析
总结/朱季谦 某天同事突然问我,你知道Mybatis Plus的insert方法,插入数据后自增id是如何自增的吗? 我愣了一下,脑海里只想到,当在POJO类的id设置一个自增策略后,例如@Table ...
- 开源免费的专注于建立大型个人知识库推荐-Trilium Notes
Trilium Notes是一个分层的笔记应用程序,专注于建立大型个人知识库. 支持相当丰富的 markdown,包括 mermaid 和 latex,而且即时渲染,和 typora 一样.支持代码类 ...
- windows下mysql服务局域网访问配置
在局域网中访问本机(Windows)的MySQL服务器,需要确保MySQL服务器配置为允许远程访问,并且防火墙设置允许外部连接.以下是详细的步骤: 1. 修改MySQL配置文件允许远程访问 找到并编辑 ...
- 关键点检测（1）——标注关键点检测数据（labelme和CVAT）
关键点检测,作为计算机视觉领域的重要分支,广泛应用于人体姿态估计.面部表情识别.手部动作分析等多个场景.其核心在于从图像中准确检测并定位特定的关键点位置.然而,高效的模型训练离不开大量高质量的标注数据 ...