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前端项目开发中,多个项目采用基 ...
随机推荐
- Prometheus + Grafana （2） mysql、redis、Docker容器、服务端点以及预警
接着上一节 <Prometheus + Grafana (1) 监控 >,我们继续探讨 Prometheus + Grafana 的复杂应用 实现目标 这节我们的目标是搭建一个多维度监控微 ...
- java8 API 函数式接口
简介 14年,Oracle公司如期发布了Java 8正式版,Java8提供了强大的流式处理及函数式接口编程 函数式接口编程,相信很多人在javascript中都使用过,比如回调函数,如今Java8也吸 ...
- Windows 下自动预约申购 i茅台
今天分享一个自动预约抢茅子的工具! 前期准备工作: 1.需安装:.Net6 依赖 (根据操作系统选择 x64 或 x86 版本进行下载.) 安装软件 1.软件下来下来之后,解压并进入软件目录,我们双击 ...
- css 让页面变灰色
html { -webkit-filter: grayscale(1); }-webkit-filter(滤镜)有十种效果,分别是: // grayscale 灰度 // sepia ...
- 基于 WEB 的 WMS 3D 可视化管理系统
基于 WEB 的 WMS 3D 可视化管理系统 前言 首先介绍一下什么是WMS.WMS是仓库管理系统(Warehouse Management System) 的缩写,仓库管理系统是通过入库业务.出库 ...
- 关于tomcat中servlet的url-pattern匹配规则
首先需要明确几点容易混淆的规则: servlet容器中的匹配规则既不是简单的通配,也不是正则表达式,而是特定的规则.所以不要用通配符或者正则表达式的匹配规则来看待servlet的url-pattern ...
- R语言遍历文件夹求取其中所有栅格文件的平均值
本文介绍基于R语言中的raster包,遍历读取多个文件夹下的多张栅格遥感影像,分别批量对每一个文件夹中的多个栅格图像计算平均值,并将所得各个结果栅格分别加以保存的方法. 其中,本文是用R语言来 ...
- Maven Helper插件——实现一键Maven依赖冲突问题
业余在一个SpringBoot项目集成Swagger2时,启动过程一直出现以下报错信息-- An attempt was made to call a method that does not exi ...
- SMOTE与SMOGN算法R语言代码
本文介绍基于R语言中的UBL包,读取.csv格式的Excel表格文件,实现SMOTE算法与SMOGN算法,对机器学习.深度学习回归中,训练数据集不平衡的情况加以解决的具体方法. 在之前的文章S ...
- Jenkins 添加Linux固定代理节点
实践环境 Jenkins 2.304 jdk-8u131-linux-x64.rpm centos-release-7-9.2009.1.el7.centos.x86_64 操作步骤 安装JDK 在预 ...