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前端项目开发中,多个项目采用基 ...
随机推荐
- Python连接Etcd集群基础教程
1.背景介绍 最近接手了一个项目,项目是使用Python开发的,其中使用到了Etcd,但是项目之前开发的方式,只能够支持单节点连接Etcd,不能够在Etcd节点发生故障时,自动转移.因此需要基于现有e ...
- springboot+security自定义登录-1-基础-自定义用户和登录界面
为何学习spring security? 理由如下: 1)虽然可以不用,但难免部分客户又要求 2)某种程度上,security还是不错的,譬如csrf,oauth等等,省了一些功夫. 3)虽然spri ...
- 集成学习与随机森林（二）Bagging与Pasting
Bagging 与Pasting 我们之前提到过,其中一个获取一组不同分类器的方法是使用完全不同的训练算法.另一个方法是为每个预测器使用同样的训练算法,但是在训练集的不同的随机子集上进行训练.在数据抽 ...
- 高通Android分区表详解
高通Android分区表详解 Label Purpose of this partition Modem Partition for modem Fsc Cookie partition to sto ...
- ReST，以及RESTful的 简单介绍
什么是 ReST 阮一峰说的比较清楚,具体见他的博客文章. 二.名称 ReST这个词,是[Roy Thomas Fielding](http://en.wikipedia.org/wiki/Roy_F ...
- 静态 top tree 入门
理论 我们需要一个数据结构维护树上的问题,仿照序列上的问题,我们需要一个方法快速的刻画出信息. 比如说线段树就通过分治的方式来通过将一个区间划分成 \(\log n\) 个区间并刻画出这 \(\log ...
- HTTP常见的状态码？
100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 200 OK 正常返回信息 201 Created 请求 ...
- 【Playwright+Python】系列教程（五）元素定位
一.常见元素定位 定位器是 Playwright 自动等待和重试能力的核心部分.简而言之,定位器代表了一种随时在页面上查找元素的方法,以下是常用的内置定位器. 1.按角色定位 按显式和隐式可访问性属性 ...
- oeasy教您玩转vim - 51 - # 读写文件
读写文件 回忆上节课内容 命令行的光标控制 方向键️️️️️可以控制左右移动 shift+️️️️️按照word左右移动光标 ctrl+b 到开头begin ctrl+e 到结尾end ctrl+w ...
- JMeter 配置元件之按条件读取CSV Data Set Config
实践环境 win10 JMeter 5.4.1 需求描述 需求是这样的,需要压测某个接口(取消分配接口),请求这个接口之前,需要先登录系统(物流WMS系统),并在登录后,选择并进入需要操作的仓库,然后 ...