vue
关注
分享
扫一扫
vue学习比即
lhrdlp
变成更好的自己
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
输入的ip地址添加校验规则(Vue)
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-07-15 14:58:08 · 3354 阅读 · 1 评论 -
表单动态操作数据交互
使用 Vue和 BootStrap 实现下面的功能:默认情况下:姓名和学号框全为空的时候,提交按钮不能点击姓名和学号框全有一项不为空的时候,重置按钮才可以点击表格中默认显示暂无数据,添加数据之后暂无数据隐藏点击删除按钮,弹出弹框点击弹框中的删除按钮后才会真正删除数据先搭建一个基本的页面:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti原创 2020-09-08 23:07:24 · 510 阅读 · 1 评论 -
Vue知识总结
文章目录1.概念1.1 对SPA单页面的理解,优缺点是什么?1.2 什么是MVVM?2. 基础知识2.1 v-show 和 v-if 的区别?2.2 computed 和 watch 的区别和运用场景?3.组件3.1 组价中的data为什么是一个函数?3.2 Vue组件间通信的方式?3.3 对keep-alive的理解?4.生命周期4.1谈谈你对 Vue 生命周期的理解？4.2 Vue 的父组件和子组件生命周期钩子函数执行顺序？4.3 父组件可以监听到子组件的生命周期吗?4.4 在哪个生命周期内调用异步请原创 2020-08-28 22:20:51 · 698 阅读 · 0 评论 -
Vue项目首页实现思路总结
文章目录1.项目的基本配置项目结构css初始化和全局样式vue.config.js和.editorconfigTabBar的封装axios封装首页开发首页NavBar的开发请求首页轮播图和推荐的数据轮播图的展示推荐部分数据的展示TabControl的封装和使用请求首页商品数据展示商品数据点击TabBar切换对应的内容使用better-scroll对项目的滚动进行重构回到顶部backTop组件的封装点击组件回到顶部的封装backTop组件的显示和隐藏根据b站上coderwhy老师的视频做的Vue项目,在老原创 2020-08-24 23:25:14 · 4173 阅读 · 13 评论 -
Vue基础语法复习
文章目录1.插值语法1.1 Mustache1.2 v-once1.3 v-html1.4 v-text1.5 v-pre1.6 v-cloak2.绑定属性2.11.插值语法1.1 Mustache如何将data中的文本数据，插入到HTML中呢？可以通过Mustache语法(也就是双大括号)。Mustache: 胡子/胡须.我们可以像下面这样来使用，并且数据是响应式的1.2 v-once但是，在某些情况下，我们可能不希望界面随意的跟随改变这个时候，我们就可以使用一个Vue的指令v-原创 2020-08-23 23:15:27 · 524 阅读 · 0 评论 -
vue自定义底部导航栏Tabbar
使用vue封装一个如下图所示的组件主要的项目结构如下:在component/tabbar中新建组件TabBar.vue,内容如下:<template> <div class="tab-bar"> <slot></slot> </div></template><script>import TabBarItem from './TabBarItem' export default {原创 2020-08-06 21:58:43 · 1481 阅读 · 1 评论 -
Vue路由: Vue-router基本配置与使用
目前前端流行的三大框架, 都有自己的路由实现:Angular的ngRouterReact的ReactRouterVue的vue-router当然, 我们的重点是vue-routervue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/vue-router是基于路由和组件的路由用于设定访问路径, 将路径和组件映射起来.在vue-r..原创 2020-08-06 20:32:35 · 1110 阅读 · 0 评论 -
前端路由,后端路由,前端渲染,后端渲染了解
文章目录1.什么是路由2. 后端路由阶段2.1 后端路由2.2. 后端渲染2.3 后端渲染的优缺点3. 前后端分离阶段3.1 前端渲染3.2 前端渲染的优缺点4.前端路由阶段4.1 前端路由的概念4.2 单页面开发的优缺点4.3 什么时候使用到前端路由?写在前面:认识前端路由和后端路由前端路由相对于后端路由而言的, 在理解前端路由之前先对于路由有一个基本的了解路由: 简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是: 根据不同的url地址展示不同的页面内容.1.什么是原创 2020-08-02 21:52:36 · 639 阅读 · 0 评论 -
Vue 混入对象
1.认识混入混入是一种代码的组织方式,可以在多个组件间横向的复用代码.定义混入对象,只需要把混入对象添加到组件中,那么该组件就可以获取到该混入对象中存储的任何东西.2.混入的基本使用听到混入这个词是不是会有一种熟悉的感觉,我们在less 的基本语法中也有一个混入Mixin,但今天的混入和那个还是不一样哦…混入(mixin)提供了一种非常灵活的方式来分发vue 组件中的可复用功能.一个混入对象可以包含任意组件选项,当组件使用混入对象的时候,所有混入对象的选项将会被"混合"进入该组件本身的选项.示例原创 2020-06-14 17:16:50 · 599 阅读 · 0 评论 -
Vue动态组件和keep-alive保持组件状态
1.动态组件动态组件:顾名思义,动态组件就是可以动态的切换组件的显示需求:根据不同的状态显示不同的状态1.1 使用 v-if 或 v-show 切换组件示例代码如下: <style> *{ margin: 0; padding: 0; } li{ list-style: none; } #app{ wid原创 2020-06-13 12:32:17 · 1570 阅读 · 0 评论 -
Vue插槽的认识和基本使用
文章目录1.编译作用域2.插槽的基本使用2.1 插入基本的文本内容写在前面:加入我们的需求是设置一个通用性的按钮,按钮的内容是使用的时候来决定,我们可能会通过一个属性来设置按钮的文本,示例代码如下:<div id="app"> <my-com value="注册"></my-com> <my-com value="提交"></my-com> <my-com value="重置">&l原创 2020-06-12 21:53:47 · 266 阅读 · 0 评论 -
Vue 兄弟组件之间的传参
经过之前的学习,我们已经大致了解到了数据在组件之间的传递父组件通过 props 属性将数据传递给子组件子组件通过自定义事件将数据传递给父组件那么我们之前所了解到的都是父子组件之间的数据传递,那么有时候我们就会碰到不是父子关系的组件也需要数据的传递,这个时候我们怎么办呢?不是父子关系的组件可能会有下面的两种情况:两个组件,有一个共同的父组件的兄弟组件.两个组件之间并没有太大的关系,甚至要找好几层才能找到共同的祖先组件.1.兄弟组件之间的数据传递兄弟关系的组件拥有一个共同的父组件,那么就原创 2020-06-12 08:37:47 · 1815 阅读 · 0 评论 -
Vue子组件向父组件传参(事件传参)
文章目录1.自定义事件1.1 认识自定义事件1.2自定义事件的基本使用2.子组件触发父组件数据的改变3.子组件给父组件传参1.自定义事件1.1 认识自定义事件处理可以使用原生的 DOM 事件, v-on 也可以触发组件内部的自定义事件,调用 this.$emit("事件名") 就可以触发一个自定义事件.$emit() 触发事件函数接受一个自定义事件的事件名以及其他任何给事件函数传递的参数. 然后就可以在组件上使用 v-on 来绑定这个自定义事件this.emit("事件名",参数1,参数2....原创 2020-06-11 15:07:06 · 2937 阅读 · 0 评论 -
Vue 组件的双向数据绑定
我们之前已经有学过在普通的 DOM 元素上通过 v-model 指令来进行简单的双向数据绑定,一般我们会在表单元素上使用这个指令.通过下面的代码先复习一下 v-model 指令的基本用法: <div id="app"> <input type="text" v-model = "value"> {{value}} </div> <script> let vm = new Vue({原创 2020-06-11 09:13:01 · 369 阅读 · 0 评论 -
Vue利用$parent,ref,$children,$root实现父子组件传参
文章目录1. \$parent,\$children属性2.利用$parent在子组件中执行父组件的方法3.父组件中执行子组件的方法3.1 通过 $children 属性3.2 通过$ref属性来执行4. $root属性的使用1. $parent,$children属性在介绍传参方式之前,我们先来看一下 $parent,$children属性.我们先来看下面的代码,在里面定义了一个子组件,一个父组件,在子组件中添加了 handleClick 方法: <div id="app">原创 2020-06-10 10:17:04 · 1395 阅读 · 1 评论 -
Vue 非Props 特性
文章目录1.非props属性的了解1.非props属性的了解尽管为组件定义明确的 props是推荐的传参方式，组件的作者却并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的特性，这些特性都会被添加到组件的根元素上。简单的说就是父组件可以在使用子组件的时候给子组件传递n多的属性, 只有子组件使用props接受的才会成为子组件的参数, 没有通过props声明的属性就是非props, 这些属性会自动添加为子组件根标签的属性.示例如下: <div id="app">原创 2020-06-07 18:05:06 · 467 阅读 · 0 评论 -
Vue组件传参之Vue父组件向子组件传参(props传参)
文章目录1.组件的嵌套1.1 组件嵌套的基本使用1.2 组件间的数据关系2. props属性2.1 props的基本使用2.2 数据传递的分类2.2.1 传递数据注意事项2.2.2 传递基本类型数据2.2.2 传递引用类型数据2.3 单向下行数据流解释3. props响应式4.props验证4.1 验证父组件传过来数据的类型4.2 允许传递多种类型数据4.3 设置必须传递的数据4.4 指定默认值4.5 自定义验证规则1.组件的嵌套1.1 组件嵌套的基本使用Vue 组件跟 Vue 实例是一样的,因此在原创 2020-06-07 16:36:19 · 2985 阅读 · 0 评论 -
使用Vue组件的注意事项
文章目录1.Vue组件名推荐使用大驼峰命名法1.Vue组件名推荐使用大驼峰命名法为什么我们一直在强调 Vue 组件命名使用大驼峰呢???在此之前,我们对 Vue 组件已经有啦一定的了解,我们也知道局部组件的使用频率会高于全局组件,推荐使用大驼峰命名也和我们局部组件的使用有关,接下来我们慢慢分析.我们先写一个简单的组件来观察一下: <div id="app"> <!-- 在注册了局部组件的实例中使用局部组件 --> <my-com原创 2020-06-06 16:01:09 · 626 阅读 · 0 评论 -
Vue组件的认识,创建并使用
文章目录1.组件数的认识1.1 什么是组件1.2 组件化开发的优势1.3 创建组件的基本步骤1.4 组件的基本使用示例1.5 理解组件的创建和注册1.6 Vue构造器扩展直接创建Vue实例1.7 直接通过选项对象创建组件1.8 组件的分类2. 全局组件2.1 全局组件的创建2.2 创建多个Vue实例2.3在多个Vue实例中使用全局组件2.4 注意事项3. 局部组件3.1 局部组件的使用步骤3.2 使用构造器创建并使用局部组件3.3 直接通过选项对象来创建局部组件1.组件数的认识组件系统是 Vue 的一个原创 2020-06-05 12:29:50 · 253 阅读 · 0 评论 -
vue实例化
文章目录1. 创建一个vue实例2. 声明式渲染2.1 关于{{}}插值表达式2.2 使用JavaScript语法3.1. 创建一个vue实例通过vue函数来创建一个vue 实例,一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可嵌套的、可复用的组件树组成。let wm = new Vue({ //选项})虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例原创 2020-06-04 16:28:00 · 1817 阅读 · 1 评论