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前端项目开发中,多个项目采用基 ...
随机推荐
- 3. Elasticsearch 索引基本操作
引言 上一篇教大家安装了Elasticsearch-head插件和kibana可视化分析工具,今天就教大家在kibana的dev-tool里的控制台中如何操作索引 基础概念 索引(index) 索引( ...
- Linux-swap管理
什么是Swap Swap:交换空间,即虚拟内存,用于解决内存不足的问题. 在内存不足的时候,会将内存中不常使用的部分存入硬盘,使得内存得以腾出空间供新的程序使用. 那么,虚拟内存即为硬盘中的部分. S ...
- 【点云检测】OpenPCDet 教程系列 [1] 安装 与 ROS运行
前言与参考 主要是介绍库的使用,做笔记区 首先搜索的时候有个问题 一直在我脑子里 hhh 就是MMlab其实还有一个叫mmdetection3d 的库,然后搜的时候发现 hhh 有网友和我一样的疑惑: ...
- 重复消费Java Stream的三种方法。你选择哪种？
Java中的Stream一旦被消费就会关闭,不能再次使用了.如果的确有需要该怎么办呢? 这里介绍三种重复消费Stream的方法. 1. 从集合再次创建 这里你都不用往下继续看就知道该怎么办,不过我还是 ...
- SpringBoot集成Mongodb文档数据库
添加Maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...
- 你真的了解Java内存模型JMM吗?
哈喽,大家好,我是世杰. 本文我为大家介绍面试官经常考察的「Java内存模型JMM相关内容」 面试连环call 什么是Java内存模型(JMM)? 为什么需要JMM? Java线程的工作内存和主内存各 ...
- 能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？
这个router有两种模式:hash模式(默认).history模式(需配置mode: 'history') 然后,我们来研究下两者的原理: 我们先来认识下这位朋友#,这个#就是hash符号,中文名哈 ...
- yolov5+deepsort+slowfast复现
1.运行环境 ubuntu 18.04.1 Cuda 11.5 Python 3.8.15 torch 1.10.1+cu113 torchvision 0.11.2+cu113 2.安装PyTorc ...
- .NET6 API 部署标准流程
一.安装dotnet环境 #第一步:将 Microsoft 包签名密钥添加到受信任密钥列表,并添加 Microsoft 包存储库 sudo rpm -Uvh https://packages.micr ...
- C#委托的2种调用方式
第一种:直接调用,通过invoke方法: 第二种:这是第二种将委托作为方法的参数的间接调用: 下面举个栗子演示: using System; using System.Collections.Gene ...