vue2专栏
关注
分享
扫一扫
文章平均质量分 82
vue+vue-cli+vue-router+vuex
白桃味稠鱼烧
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue 插槽 slot
template> 标签中 通过 v-slot='slotProps' 接收了这个 slotProps，这个名字是随便定义的，对应的就是 组件中 中绑定的 games 数据。在 App 组件中报了这个错，games 不存在，肯定不存在啊，我的 games 数据是存在 组件中的啊，在 组件中随便你怎么使用都没毛病。那么这个默认插槽在被使用时，v-slot 指令，可以直接作用在 组件标签上，可以简写为。原创 2023-08-09 14:33:39 · 830 阅读 · 2 评论 -
Vue 全局事件总线 Event-Bus
3、在 Vue 原型对象，以及 组件实例对象上都是不存在这个东西的，但是我们又需要使用 Vue 实例对象上的 $on、$emit、$off 等方法，所以这玩意应该继承了 Vue 原型对象，或者 组件实例对象。两个兄弟组件之间没有任何关联，但是现在需要 School 子组件 获取到 Student 子组件 传递的数据，这个时候，我们的事件总线就起到作用了。相当于是独立于所有组件之外的旁观者，不参与组件内的任何逻辑，只负责调用 Vue 实例对象上的方法，且所有组件都能访问到它。定义 Student 子组件。原创 2023-08-03 17:28:22 · 1043 阅读 · 0 评论 -
Vue 自定义事件绑定与解绑
8 、注意：通过 this.$refs.xxx.$on( 'xxx' , callback )，绑定自定义事件时，callback 回调要么配置在 mtenods 中，要么使用箭头函数，否则 this 指向存在问题( 因为 callback 函数接收的参数都是从子组件中传递的，包括 this也是，如果使用 function () {} 函数，则该函数内部 this 指向子组件 )该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。原创 2023-08-02 15:59:56 · 1434 阅读 · 0 评论 -
Vue style中的 scoped 属性
用来隔离样式 -- Scoped CSS一个是在编译之后，直接在 DOM 节点上给类名增加一个hash后缀，不会在节点上增加自定义属性用来隔离样式，且DOM节点与样式文件展示类名一致 -- CSS Modules。这样一对比，发现 CSS Modules 是更好用一点哈。所以在。原创 2023-07-26 16:54:44 · 4085 阅读 · 0 评论 -
Vue mixin 混入
创建一个 mixin 混入对象是很简单的，只是我们需要注意的是，配置的键值对，只能是创建组件时传入的配置项，如果，你传了一个 其他不存在的属性 ，组件接收之后，是不会对其解析的，就相当于你在组件内部，定义了一个不存在属性，Vue 底层是不会管这个玩意的。这就看出来很多余了。其次、我们创建的 mixin 对象，在组件中引用的时候，mixin 对象 中的键值对会 混入 该组件的配置详项中，至于是怎么混入的，下面在讲。创建了一个 mixin 对象之后，组件需要使用的时候，就和引入公共组件和公共方法一样。原创 2023-07-25 16:16:26 · 577 阅读 · 0 评论 -
new Vue () 中的 render 函数与 templete 模板
如果我们引入了完整版的 vue.js ，那么在我们webpack 打包编译的时候，生成的包就会变大，就会增加浏览器的加载时间。文档上说的是，可以是 HTML 标签名称，可以是 组件，那也就是说，我的 App 组件，直接放进去当做参数，有问题没，那必须是没问题的啊。在官网上存在这么一个例子，说的比较清楚，按照之前的理解，我使用 templete 模板是没有问题的，但是 因为 脚手架生成的项目，引入的 Vue 文件，是不带 templete 模板编译器的 运行时文件，所以导致出现了这个问题。原创 2023-07-21 14:34:52 · 1677 阅读 · 0 评论 -
Vue与VueComponent的内置关系
构造函数 VueComponent 的原型对象也是一个对象，也存在 __proto__ 属性，按理来说是 VueComponent .prototype.__proto__ 指向的同样是是 Object。6、通过 注册组件之后应用，Vue 自动帮我们 使用 New VueComponent() 生成了一个实例对象，这里叫他vc，以便于后续操作。这里只需要理解一个点，那就是构造函数的prototype 属性(显式原型属性) === 实例对象的 __proto__属性(隐式原型属性)，注意，原创 2022-12-28 18:29:29 · 497 阅读 · 1 评论 -
Vue-extend和VueComponent
在一个非单文件组件中(一个文件中包含n个组件，最常见的就是单个html文件中存在多个组件)，如果我们需要在这个文件中创建n个组件，然后再页面上展示，这时候我们就需要先定义组件，然后注册组件，最后使用组件。原则上，默认一个非单文件组件中 只存在一个 new Vue() 定义的根组件，可以有无数个 Vue.extend() 定义的子组件，这是因为，如果所有组件都用 new Vue() 定义，那么如果存在组件包裹的情况，子组件内部双向绑定的数据不会生效。， 因为是通过函数返回的。.........原创 2022-08-10 20:53:35 · 2308 阅读 · 0 评论 -
Vue2-生命周期
之前说完了Vue的基础知识，说了语法、数据代理、数据监听、计算属性、指令、过滤器等等，但是没有涉及到Vue的声明周期，其实之所以把生命周期放在后面讲，是因为，如果最开始讲生命周期，里面涉及到的概念性东西比较多，初学者不容易理解，只能死记硬背。但是在理解了前面的这些基础知识之后，回过头来理解生命周期，就会很方便了。这就是 Vue 官网上的生命周期图，在这里 对每个生命周期以及每个模块都标注了tips，可以根据这些图例来辅助理解Vue的生命周期。源起 new Vue()当我们通过 new V原创 2022-06-23 14:37:51 · 9513 阅读 · 1 评论 -
Vue-自定义指令
上面说完了 Vue 的内置指令，了解了这些内置指令的使用及原理，接下来我们来说说 Vue 的自定义指令。自定义指令定义v-show ：Vue 的内置指令，通过这个指令能展示和隐藏节点 ，其实也就是Vue底层控制了该节点的 display 属性。自定义指令：在构建项目过程中，虽然我们都是使用的组件形式，但是在某些情况下，我们仍然需要对普通DOM元素进行底层操作，这个时候就会用到自定义指令。自定义指令既可以像 v-show 一样，不搭配属性值，也可以像 v-text配置属性值来实现特殊效果原创 2022-01-24 16:44:51 · 6568 阅读 · 0 评论 -
Vue-内置指令
之前用到过的 v-bind、v-model等等都是属于Vue 的内置指令，是Vue给我们定义好的，我们可以直接使用，接下来我们来说一说之前没有用到过的其他的内置指令v-text指令：向所在节点中 渲染文本内容初始化一个 Vue ，在data内部添加 name 属性，分别通过插值语法、v-text 指令来绑定到不同的标签上进行展示<div id='root'> <div>你好，{{name}}</div> <div v-text='name'原创 2022-01-18 18:08:02 · 586 阅读 · 0 评论 -
Vue-过滤器
数组过滤( filter )我们都不陌生，就是对数组的每一项做一些处理之后，返回一个新的数组。 那么Vue的 过滤器又是个啥玩意呢？我们现在有一个需求，就是将当前时间戳转为为正常时间展示出来，我们可以有很多种方法来实现首先，引入 dayjs，这是一个类似于Moment.js de 处理时间和日期的 js库，但是更为轻量。computed实现<body> <div id='root'> <!-- 计算属性实现 --> <h2&g.原创 2022-01-17 15:21:21 · 517 阅读 · 0 评论 -
Vue-数据监听-数组监听
说完了对象的监听和后期添加对象的操作，接下来，我们来说一说针对于数组的监听。1、首先还是定义一组数据用于展示，hobbys 为字符串数组，friends 为对象数组const vm = new Vue({ el: '#root', data() { return { hobbys: ['抽烟', '喝酒', '烫头'], firends: [ { name: 'al', age: 20 }, { name: 'hj', age原创 2022-01-12 17:42:55 · 16776 阅读 · 0 评论 -
Vue-Vue.set() 的原理及使用
上面刚刚讲完 Vue 监听对象的改变，接下来本应该说说数组的监听过程，但是在这里需要插播一节 Vue.set() ，这是因为 Vue.set() 与对象的连接较为紧密，所以串联在一起方便理解。1、首先，定义一批数据用来渲染到页面上展示<body> <div id="root"> <h2>姓名：{{student.name}}</h2> <h2>年龄：真实{{student.age.realAge}} 虚拟{{stude原创 2022-01-11 20:01:55 · 19283 阅读 · 7 评论 -
Vue-数据监听-对象监听
之前说到了Object.defineProperty() 用来监听 data 的数据改变，从而实现响应式，但是在回顾definePropety方法博客中，出现了一个问题，那就是我在 改变数据，调用 set() 函数的时候，出现了堆栈溢出的问题，这是因为出现了递归的情况。在这里我们就来看看Vue是怎么解决这个问题的。首先，我们来实现一个简单的数据监听效果，以此来深入理解一下，Vue的数据监听是怎么做到的。1、新建一个html文件，不需要引入Vue ，然后定义一个对象<script&...原创 2022-01-11 10:08:58 · 3421 阅读 · 1 评论 -
Vue-v-for列表渲染中的key
在上一章讲到 v-for 列表渲染的博文中，只是说到了 v-for 的基本使用，并没有对其内部进行更深层次的 解读，其实在 v-for 这个指令下，有一个及其关键的 连带属性 key。这个 key 才是 Vue 或者是是 MVVM 框架的 最精髓的东西。key的使用方式：以数组为例<ul> <li v-for='(person,index) of personArr' :key='index'> {{person.name}} </li>...原创 2021-12-06 16:27:31 · 1146 阅读 · 0 评论 -
Vue-v-for列表渲染
列表渲染这个东西，在远古时期( 或者说是在没有这种Vue、React等这种便捷工具时期 )，我们的渲染都是手工写出来的。例如以前的 使用 jq 写 列表页的时候，我们都是先写出静态页面，然后根据返回的数组数据，通过forEach 循环，然后 append 到父节点内部，从而完成展示。但是这样的缺陷其实很大，因为如果数据很多的话，一旦返回的数组数据中，有某一条数据发生了，会导致所有的数据全部重写渲染一遍，造成了极大的性能开销。但是在新的 Vue 工具中，为我们提供了简单方便的渲染方法 ：v-for原创 2021-11-26 15:29:20 · 2042 阅读 · 0 评论 -
Vue-条件渲染if与show的区别
v-show：当绑定的值( 或表达式的值 ) 为 true 时，在页面上展示当绑定的值、绑定的表达式 分别为 true 和 false 时<div id="root"> <div id="root"> <h3 v-show="true">{{name}}</h3> <h3 v-show="1 === 1">{{name}}</h3> <h3 v-show="false">{{name}}&l..原创 2021-11-24 16:34:42 · 1314 阅读 · 0 评论 -
vue-绑定class样式
css样式<style> .basic { padding: 20px; background: #ddd; } .red { border: 1px solid red; } .radius { border-radius: 5px; }</style>绑定单个的class类名绑定单个class类名，且能动态切换<!-- 绑定class样式--字符串写法，适用于：样式类名不确定，需要动态..原创 2021-11-22 17:41:56 · 633 阅读 · 0 评论 -
Vue-watch与computed对比
以姓名案例为版本，使用 watch 实现<div id="root"> <div>姓：<input type="text" v-model='firstName'></div> <div>名：<input type="text" v-model='lastName'></div> <div>全名：{{fullName}}</div></div><script&原创 2021-11-08 17:07:28 · 270 阅读 · 0 评论 -
Vue-watch-deep 深度监听
首先明确一个概念，Vue 是可以监听到 多层级数据改变的，且可以在页面上做出对应展示。但是 Vue 提供的 watch 方法，默认是不提供 深度监听的( deep 默认为 false，也就是不开启深度监听)举例这是例子的html 片段：点击对应按钮之后，a 或 b 分别自增1<div id="root"> {{numbers.a}} <button @click='numbers.a++'>a++</button> <br><原创 2021-11-04 17:54:28 · 37975 阅读 · 0 评论 -
Vue-watch 侦听器
定义在官方文档里面是这么定义的就是说当属性变化的时候，我们能通过 watch 来监听到属性的变化，从而来执行异步操作或者是耗费性能的操作常见使用1、首先，侦听器也是一个配置对象，可以监听多个属性的改变。2、键就是需要监听的属性，值也同时是一个对象，既可以是data中的属性，也可以是计算属性。3、对象内部存在几个常用的属性和方法( handler () {} 、deep、immediate)4、handler () {} ：就是监听函数，能接收两个参数，一个是 newV...原创 2021-11-01 20:51:31 · 713 阅读 · 0 评论 -
vue-computed计算属性
什么是计算属性在 Vue中是这样定义计算属性的：简而言之就是，如果我们有比较复杂的逻辑，我们都可以使用计算属性来实现ps：这里用的是可以，而不是必须，需要注意computed的正确使用在上面的例子中我们可能看的不是很明显，所以新建了一个例子<div id="root"><div>姓：<input type="text" v-model='firstName'></div><div>姓：<inp...原创 2021-10-31 16:35:22 · 1513 阅读 · 0 评论 -
Vue事件
Vue事件处理在jq中的事件处理，我们都很熟悉了，模式类似于下面这样，通过DOM节点，执行click事件$("button").click(function () { $("p").hide();});但是在Vue中，我们触发事件，并不是这样的。首先，绑定方式不一样，在Vue中绑定事件使用的是 v-on： ，当然肯定也是存在简写的，那就是 @ ，例如：绑定按钮事件<button v-on:click='showInfo'>点击打印信息</button&...原创 2023-07-28 11:28:35 · 142 阅读 · 0 评论 -
Vue中的数据代理
何为数据代理数据代理 ：通过一个对象去代理对另外一个对象中属性的操作(读/写)<script> // 最基本最简单的数据代理 // 有两个对象分别是obj1{ x: 100 } 和obj2{ y: 200 } ， // 我想通过obj2访问 obj1的 x 属性，且还能通过 obj2 去修改 obj1的x属性 let obj1 = { x: 100 } let obj2 = { y: 200 } Object.defineProperty(obj2, '..原创 2021-10-08 11:33:58 · 668 阅读 · 0 评论 -
回顾definePropety方法
definePropety顾名思义，这个方法就是给对象添加属性的方法，属于es6的知识点。默认情况下，使用Object.defineProperty()添加的属性值是不可修改（immutable）的。这个方法传递三个参数，分别是 给 哪个对象 添加 哪个属性，且 这个属性需要做什么配置。配置项存在四个属性，分别是 value，enumerable，writable，configurablevalue：该属性对应的值。可以是任何有效的 JavaScript 值（数...原创 2021-10-05 20:18:30 · 977 阅读 · 0 评论 -
el与data的两种写法
Vue实例使用一个变量来接收 由 Vue() z这个构造函数生成的 Vue实例对象，我们看看实例对象上有什么const vm = new Vue({ el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象 value: '1234', }})console.log(vm, 'vm')从上图 可以看出，我将其中的属性分为了..原创 2021-10-04 17:17:38 · 573 阅读 · 0 评论 -
Vue数据绑定
单向绑定模式 v-bind：之前说的指令语法只是说了一个 v-bind：及其简写模式 ：，但是 v-bind：是一个单向绑定模式，只能将data中的数据解析到页面上，但是在页面上做的更改不会同步更新data中的数据<div id="root"> <h1>数据绑定</h1> <div> <span>单项数据绑定：</span> <input type="text" v-bind:value='value'&...原创 2021-10-04 14:51:53 · 640 阅读 · 0 评论 -
Vue指令语法
除了插值语法(解析标签体的内容)之外，还有指令语法(解析标签：包括标签属性，标签体内容，绑定事件等等)，这两者一起构成了Vue的模板语法指令语法标签中的属性，我们一般使用的都是指令语法进行数据绑定，例如a标签中的 href 属性包括其他的自定义标签属性写在标签中写死的href属性<h1>指令语法</h1><a href="https://www.baidu.com/">跳转到百度1</a>通过插值语...原创 2021-10-01 18:22:05 · 317 阅读 · 0 评论 -
Vue插值语法
Vue的插值语法：{{}}chacao中需要写 js 表达式，且能够自动读取到data中定义的属性<!-- 创建容器 --><div id="root"> <h1>hello,{{name}}</h1> <h1>我的年龄是,{{age}}</h1> <h1>1+1的和,{{1+1}}</h1> <h1>当前时间：{{ new Date().getTime()}}<..原创 2021-09-30 15:31:07 · 1836 阅读 · 0 评论 -
模板与实例的关系
首先确定一个问题：实例与模板只能一一对应，不存在一对多的关系一个容器对应多个实例一个容器只能对应一个实例，若是多个实例接管了同一个容器，只有第一个实例中的数据渲染 ，且容器中用到的其他实例中的数据不会展示，控制台也会输出错误<!-- 创建容器 --><div id="root"> <h1>hello,{{name}}</h1> <h1>我的年龄是,{{age}}</h1></div>&l..原创 2021-09-29 18:07:34 · 267 阅读 · 0 评论 -
初识Vue
上一节搭建了vue的简单项目的开发环境，这一节来说说Vue的基本使用 初识Vue：想让程序运行，必须要创建一个Vue实例，且传入配置对象（el） root容器（命名可以更改，class也行）中的代码符合html规范，只是混入了Vue语法 root容器中的代码被称为【Vue模板】1、创建容器这是一个容器，通过id区分，里面的al和22分别是姓名和年龄数据，这样看来其实就这样就行了，但是如果数据发生了动态变化，那我们怎么做动态展示呢<!-- 创建容器 -->&...原创 2021-09-29 17:21:45 · 122 阅读 · 0 评论 -
搭建开发环境
搭建开发环境可以分为两种：第一种是项目非常简单，可能简单到只有一两个页面就可以搞定，这时候我们就直接新建一个html页面进行开发就行第二种则是项目较为复杂，这时候，我们就需要使用cli脚手架生成项目，因为脚手架以及帮我们配置了很多东西，我们只需要改动一点，然后更多的可以专注于开发单HTML页面项目：1、直接新建html文件，然后根据文档说明，引入vue.js文件，此时引入的vue.js文件存在两种模式，所以我们在开发的时候，一般使用的都是开发版本，此时可以...原创 2021-10-01 15:50:37 · 285 阅读 · 0 评论 -
vue-09-Vue.set和数组方法
在全局之下：vm.$set(this.lists,2,'alalal') ： 首先，如果你实例化了 Vue 对象，你可以使用 vm.$set ( 需要改变的数据对象 ， 需要改变的数据的key ， 需要改变后得到的值 )在组件内部：this 可以取代 vm ，但是必须是在 Dom 节点 挂载之后 ，也就是需要在 mounted 以及 。 mounted 之后的钩子函数内部才能使用 ...原创 2020-04-27 19:09:18 · 994 阅读 · 1 评论 -
vue-11-cli3 vue.config.js 文件配置
由于vue-cli3及以上版本将webpack的基础配置全部内嵌了，这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了，vue-cli3预留了一个 vue.config.js 的js文件供我们对webpack进行自定义配置，参考vue.config.js官方配置指南1、在项目根目录下新建 vue.config.js 文件与package.json同级...原创 2020-06-01 09:25:55 · 955 阅读 · 0 评论 -
vue-11-cli3多环境配置
原创 2020-05-08 22:01:40 · 1763 阅读 · 0 评论 -
vue-10-cli2多环境配置
原创 2020-05-06 19:15:58 · 661 阅读 · 0 评论 -
Vue 兄弟组件传值
上一篇讲到了父子组件传值，我将其分别概括为传值和传事件两大类。但是除了父子组件传值之外，还存在兄弟组件传值等情况。兄弟组件传值：是使用发布对应模式解决组件间传值问题，叫总线机制，也叫Bus / 总线 / 发布订阅模式 / 观察者模式1、新建一个js文件 ：取名随意， 不过一般都是见名知意直接叫做 Bus.jsimport Vue from 'vue'const Bus = new ...原创 2020-04-22 19:42:45 · 191 阅读 · 0 评论 -
Vue 父子组件传值&自定义事件
因为vue 的数据是单向流动的，这是为了避免数据污染。在官方文档中也说到：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。大致归纳一下：父传子--传值、子传父--传事件1、父传子如果传递的数据是对象格式的，那么在子组件 内部监...原创 2020-04-21 19:20:35 · 1415 阅读 · 0 评论 -
vue-06-watch监听器
watch监听器，我把它分为两部分来看待，第一部分是，在组件内部监听组件内部属性的变化。第二部分，则是在父子组件传值的时候，监听父组件传递到子组件的值。1、组件内部的属性监听<template> <div> <el-input v-model="demo"></el-input> {{value}} </div...原创 2020-04-20 19:19:06 · 155 阅读 · 0 评论