Vue 组件介绍及使用
2023-06-13 09:17:02 时间
1. 什么是组件
组件是可复用的 Vue 实例,通过自定义元素实现组件
组件名定义规范: html 不区分大小写,统一使用小写,多个单词使用短横线隔开(art-list)
2. 组件的使用
第一步: 创建组件构造器对象
const notice = Vue.extend({
template: `
<div>
<p>国庆放假通知</p>
<div>国庆节假期为10.1~10.7,共七天</div>
</div>
`,
});
第二步: 注册组件(全局组件、局部组件)
全局组件: 可在任意 vue 实例中使用
Vue.component("notice", notice);
局部组件: 哪个 vue 实例中注册才能在哪个 vue 示例中使用
3. 全局组件注册语法糖
https://cn.vuejs.org/v2/api/#Vue-component
全局组件注册语法糖写法: 将 Vue.extend() 的参数作为 Vue.component() 的第二个参数直接传入
4. 组件模板抽离
script 标签写法
<script type="text/x-template" id="notice">
<div>who im i</div>
</script>
template 标签写法
<template id="notice">
<div>how are you</div>
</template>
5. 为什么组件的 data 必须是一个函数(经典问题)
先抛出答案: 为了实现组件不管被复用多少次,组件中的 data 数据都是互相隔离的,互不影响
组件是不能访问 vue 实例中的数据的,组件是一个单独功能模块的封装,组件有属于自己的 html 模板,也有属于自己的数据 data, 只是这个 data 属性必须是一个函数,而且这个函数返回一个对象,对象内部保存着数据
组件是可复用的 vue 实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件的中的 data 数据应该是相互隔离的,互不影响的。
先来看下以下代码
多次复用组件想实现数据共享可以这样写: return 一个对象变量,因为变量存储的是内存地址
相关文章
- vue父子组件传值 简单了解vuex
- vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]
- Vue中显示img图片,显示不出来怎么办?vue显示图片
- Vue通过axios发送ajax请求
- vue上传图片组件编写
- antd table编辑_vue修改组件样式
- Markdown文件居然也可以直接作为Vue路由组件?
- Vue组件库文档站点的搭建思路
- mac安装vue开发环境_vue项目有几个环境
- VUE组件封装_vue使用组件
- VUE组件封装_vue组件内部双向绑定
- Vue组件封装的过程[通俗易懂]
- vue 组件插槽_vue插槽的使用
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- 异步加载 Vue 组件以减小 chunk 体积
- 【Web技术】1445- 如何使用 Hooks 写出高质量的 React 和 Vue 组件?
- Vue调试工具安装(vue devtools)
- 给 Vue 模态框组件添加过渡和动画效果
- vue使用elementUI组件提交表单(带图片)到node后台
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- Vue 组件间通信的几种方式
- vue在自定义组件中使用v-model及v-model的本质
- Vue前后端页面下载功能实现演示,Python+flask提供后台下载服务
- Vue实现图片大图预览,v-viewer组件的使用方法演示
- Vue的beforeRouteEnter如何使用组件实例的方法
- Vue进阶课堂之《从HTML到Pug》
- vue入门篇之Vue.js 组件
- Vue使用printjs组件打印页面
- 2023年想运行vue-element-admin遇到的那些问题
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- vue.js 路由参数传给组件详解编程语言
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue接入Redis拓展应用的可能性(vue调redis)
- 使用Vue从Redis获取数据(vue去redis取数据)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)