1.全局组件组件是一个特殊的实例。 全局组件通过Vue.component()方法定义<div id="app"> <!-- 组件使用:当自定义标签,真正渲染的是组件的template--> <!--dom元素的模版中必须用双标记,不可用单标记,因为有时会出问题--> <my-button></my-button> <my-
转载 2024-09-26 14:57:49
55阅读
一、组件基础格式1:<div id="id的名字"> <组件的名字></组件的名字> </div> <script type="text/javascript"> //把这个组件加载到VUE容器中 Vue.component('组件的名字',{ //第二个参数的形式,都是{data:function(){xxx},template}
转载 11月前
24阅读
前言作为一个想成为前端工程师的大龄熊孩子,自学前端的日子已经挺久了。然后自学的时候特想拥有一个自己的个人网站、个人博客之类的。有一天我在用vue + elementUi + koa2 + mongoDB搭建我期待已久的个人博客的时候。突然我想了一件事情,我究竟为什么要为了写个博客去用这么多技术栈呢?于是乎懒癌发作,于是我找到了这个东西,就是VuePress1. VuePressVuePress是
1.Vue中的组件什么是组件组件:component,前端项目开发中组件一般表示包含了视图界面(html/css),业务是数据处理(js)以及独立功能的组成部分,组件的出现是为了视图的复用 根据项目中的使用情况,区分为两种组件:全局组件:任何Vue实例都可以引用的组件 局部组件/私有组件:在当前组件内部可以嵌套使用,其他组件中无法使用组件声明和使用全局组件Vue.component(组件名,{
这篇文章面向使用 Vuepress 来开发 Vue 组件文档库的用户服务,去年差不多这个时候我为公司开发了一个基于 AntDesignVue 封装的高阶组件库,经过一年的版本迭代与文档更新,收获了很多坑点,其中有一个就是关于组件示例维护相关的,今年有意重构组件库的文档与代码结构,后面会陆陆续续将踩到的坑点与相应的解决方案一一描述,好的进入今天的主题:文档示例编写的最佳实践方案。
转载 2024-06-13 20:08:54
317阅读
vuepress 实用插件这些插件都是官方提供的,有些在我们实用默认主题的时候已经安装了,不需要再单独安装,有些插件需要我们单独安装。具体请看下面的介绍默认主题自带的插件@vuepress/plugin-active-header-links@vuepress/plugin-nprogress@vuepress/plugin-searchvuepress-plugin-containervuepr
转载 2024-03-16 10:11:54
277阅读
一、描述 Vue 组件生命周期组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。 组件的销毁操作是先父后子,销毁完成的顺序是先子后父。加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted 子组件
组件”是 Vue 中比较基础的概念,但我发现,许多同学对 Vue 组件的概念和由来并不是清楚。因此,我希望通过这个专题,带大家换个角度来分析,最终让大家更清楚组件开发。首先,我们先不谈组件,我想问大家一个问题:我们平常用任何编程语言写方法(method)的时候,当一个方法里的逻辑过多时,我们会怎么办?当多个方法里有很多相似的逻辑时,我们该怎么办?答案很明了:拆分成一个独立的方法。如果拆分后还是有
Vue组件使用方式一1使用Vue.extend创建组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性,指定了组件要展示的HTML结构 }) 2、使用 Vue.component('组件的名称
VitePress和VuePress都是基于Vue.js构建的静态站点生成器,它们都提供了一种快速创建文档网站的方法。虽然它们都是由Vue.js开发的,但它们在使用方式和功能上存在一些区别。构建方式 VitePress使用Vue 3的新特性:Vite构建工具,它可以提供更快的构建速度,而且在开发模式下,可以做到热更新,提供了更好的开发体验。 VuePress使用Webpack进行构建,并且在开
转载 2024-07-15 09:59:44
63阅读
开发流程1.创建项目,(vue-cli/公司现有架构) 2.调整项目静态目录结构 3.使用webpack相关库模式打包编译 4.使用npm或者公司源地址发布到你需要的平台步骤创建项目,省略;调整项目静态目录结构 在项目同级目录下创建lib文件夹 => assets / components / css / utils / index.js / UploadUi.vue (依据自己喜好而
转载 2024-06-09 10:23:03
111阅读
系列文章目录VuePress 2.0 在 2021 年中旬发布,由webpack改为使用vite进行构建。在vuePress1.0时代,很好的解决了vuePress使用webpack打包构建缓慢的问题。但现在使用vuePress 是更好的选择!!! 文章目录系列文章目录前言一、为什么选择VuePress而非VitePress一、安装VuePress二、项目结构三、基础文件三、配置文件四、进阶操作1
推荐一款优雅高效的VuePress主题:VuePress Theme Aurora aurora-blog项目地址:https://gitcode.com/gh_mirrors/vu/vuepress-theme-aurora 是一个基于 VuePress 构建的精美且功能强大的主题,旨在提供更优质的阅读和开发体验。项目简介VuePress Theme Aurora 主题的设计理念是“极简、优雅、
转载 2024-10-24 17:00:15
33阅读
目录Vue中的ref 引用1使用 ref 引用 DOM 元素2. 使用 ref 引用组件3. 控制文本框和按钮的按需切换4.this.$nextTick(cb) 方法mixin.js混合配置1.局部混合(在组件中)2.全局混合(在main.js)Vue的插件1.定义插件(在plugin.js)2.使用插件(在main.js)Vue中的ref 引用 ref 用来辅助开发
转载 6月前
34阅读
概述vue组件之间的传值传值情况主要有以下三种父组件向子组件传值子组件向父组件传值兄弟组件之间相互传值或者是两个没有关系的组件之间的传值在开始介绍之前我们先建立3个vue文件,文件名分别为:Parent.vue , Child1.vue , Child2.vue组件向子组件传值这种情况是三种传值方案中最简单的, 通过在子组件使用 props就可以实现父组件Parent.vue中的代码<
VuePress 由两部分组成:一部分是支持用 Vue 开发主题的极简静态网站生成器,另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的
使用VuePress快速搭建博客最近我在3A平台购买了服务器,准备搭建一个博客。VuePress介绍VuePressVuePress官网https://www.vuepress.cnVuePress指南https://www.vuepress.cn/guide…VuePress安装安装前请安装 Node.jsNode.js下载地址http://www.nodejs.com.cn你可以在一个硬盘创建
转载 2024-06-18 14:05:11
80阅读
前言:Vue.js(读音 /vjuː/, 类似于 view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的
这篇博文用来记录 .vue 组件使用方法。 可以把组件代码按照 template、style、script 的拆分方式,放置到对应的 .vue 文件中。 模板( template)、初始数据( data)、接受的外部参数( props)、方法( methods)、生命周期钩子函数( lifecycle hooks)。 基本步骤在 html
目录一、怎么引入vue到项目中使用1)第一类引入方式1.下载到本地,然后引入2.自己引入CDN3.自己把vue.js文件放在项目文件夹中引入项目 然后webpack打包4.编辑器直接生成cdn的方式2) 第二类引入方式1. 自己构建vue的脚手架(面试):    用npm下载vue 引入到项目中 然后webpack打包2.使用官方脚手架的方式来构建项目环境(面试)3.
  • 1
  • 2
  • 3
  • 4
  • 5