随笔分类 - vue / # vue2 学习路程
摘要：1. 介绍 理解： 一个路由（route）就是一组映射关系（key-value）, 多个路由需要路由器（router）进行管理前端路由： key是路径,value是组件，通俗的将就是通过一个路径key，可以访问vue的组件，实现组件的访问与跳转以及传参 2. 基本使用 安装vue-router, 命
阅读全文
摘要：1. vuex是什么 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。这个怎么理解呢？可以暂时理解成全局事件总线、消息订阅与发布一样的道理，把vuex当成是外部的一个储存空间
阅读全文
摘要：1. nextTick下一次更新结束后执行指定的操作 语法： this.$nextTick(回调函数)作用：在下一次DOM更新结束后执行其指定的回调什么时候用： 当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行 举个栗子：例子中有updated生命周期和
阅读全文
摘要：写在最前：父组件引用子组件，如何能在应用子组件内容的同时，还能在自定义内容呢？ 1. 插槽 作用： 让父组件可以向子组件指定位置插入html结构，也是一种组件通信的方式，适用于父组件 >子组件分类： 默认插槽，具名插槽，作用域插槽使用方式： 默认插槽 父组件中： <MyContainer> <div
阅读全文
摘要：抛出问题:我们多级组件，或者任意不想关的子组件如何传递数据呢？ 1. 全局事件总线（$bus） 一种组件间通信的方式，适用于任意组件间通信 全局事件总线示意图： 安装全局事件总线： new Vue({ .... beforeCreate(){ Vue.prototype.$bus = this //
阅读全文
摘要：1. 组件传值 组件化编码流程： 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 一个组件在用，放在组件自身即可一些组件在用，放在他们共同的父组件上（状态提示） 实现交互：从绑定事件开始 props适用于： 父
阅读全文
摘要：1. ref属性 被用来给元素或子组件注册引用信息（id的替代者）应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（VC（VueComponent））使用方式： 打标识<h1 ref="xxx">.....</h1>或者<School ref="xxx"></School>
阅读全文
摘要：1. 文件分析 1. 补充： 什么叫单文件组件？ 一个文件中只有一个组件 vue-cli创建的项目中，.vue的文件都是单文件组件，例如App.vue 2. 进入分析 1. package.json: 项目依赖配置文件： 如图，我们说主要的属性： name: 项目的名称version: 项目版本sc
阅读全文
摘要：1. 安装node 网址：https://nodejs.org/en下载LTS版本表示长期支持版本说明： node是一个基于Chrome V8引擎的javascript运行环境,让JavaScript 运行在服务端的开发平台vuecli创建的项目必须运行在node环境中，npm为node自带包管理工
阅读全文
摘要：1 多文件组件：一个文件中包含多个组件 组件步骤 第一步：定义 const school = Vue.extend({ template:`<div>{{schoolName}}</div>`, data(){ return { schoolName: '美丽的学校' } } }) // exten
阅读全文
摘要：1.0 引入组件 传统方式编写应用 使用组件方式编写应用 1.1 模块 理解：向外提供特定的js程序，一般就是一个js文件为什么：js文件很多很复杂作用：复用js,简化js的编写，提高js运行效率 1.2 组件认识 理解： 用来实现应用中局部（特定）功能代码和资源集合（html/css/js/ima
阅读全文
摘要：抛出问题：一进入页面就开启一个定时器，每隔1秒count就加1，如何实现 示例： <body> <div id="app"> {{ n }} <button @click="add">执行</button> </div> <script> let vm = new Vue({ el: "#app",
阅读全文
摘要：1. 过滤器 定义：对要显示的数据进行特定格式转换再显示（适用于一些简单逻辑的处理）语法： 注册过滤器：Vue.filter(name, callback) 或 new Vue{filters:{}}使用过滤器：{{ xx | 过滤器名 }} 或 v-bind:属性 = "xxx | 过滤器名" 备
阅读全文
摘要：1. 条件渲染 v-if v-if=“表达式”v-else-if = “表达式”v-else = “表达式” 适用于：切换频率较低的场景 特点：不显示dom元素，直接被删除 注意：v-if和v-else-if、v-else一起使用，但要求结构不能被打断 v-if和template一起使用, v-sh
阅读全文
摘要：1. 监听(watch): 监听一个属性的变化，又叫监听器，侦听器 监视属性watch: 当监视的属性变化时，回调函数自动调用，进行相关操作监视的属性必须存在，才能进入监视监视的两种写法： new Vue时传入watch配置通过vm.$watch()监视 immediate初始化时让handler调
阅读全文
摘要：Vue 1. 事件 v-on @ 基础 使用 v-on:xxx或者@xxx绑定事件，其中xxx是事件名 事件的回调需要配置在methods对象中，最终会在vm上 methods中配置函数，不要用箭头函数，否则this就不是vm了 methods中配置函数，都是被Vue管理的函数，this指向 vm
阅读全文
摘要：1. data中的两种方式 对象式 data:{ } 函数式 data(){ return { } } 示例： <body> <div id="app"> {{ name }} {{ age}} {{$options}} <input type="text" v-model="value"> </d
阅读全文
摘要：Vue2的终止支持时间为2023年12月31日。 在这个矛盾的时间点，还是决定先把vue2的笔记放出来，在Vue2完结后再把Vue3的笔记补上。这样呢，2和3都不落下，也算是来一个启承的作用吧。在工作中呢，旧的项目可以维护，新的项目也可以上手。 后续呢会有react16和react18、node、w
阅读全文
