vue/cli
文章平均质量分 68
谷歌玩家
这个作者很懒,什么都没留下…
展开
-
Vue----Vuex
单页面状态管理我们看下面这张图片:State:表示状态,例如一些变量View:视图层。可以针对State的变化,显示不同的信息Actions:代表各种事件,例如:点击,输入等,会导致状态的变化下面来看一个例子:<template> <div id="app"> <h2>{{ count }}</h2> <button @click="count++">+</button> <butto原创 2022-01-23 21:12:01 · 523 阅读 · 0 评论 -
具名插槽的使用
具名插槽则是当子组件需要显示不同的效果时使用具名插槽,通过name属性给插槽命名。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia原创 2022-01-11 11:41:42 · 3116 阅读 · 0 评论 -
slot插槽
为什么要使用slot有些页面的某些组件效果相似,但又不完全相同,这时候我们就需要用到slot。组件的插槽是为了让我们封装的组件更具有扩展性,让使用者决定组件内部的一些内容到底展示什么。如何使用slot在想要使用插槽的地方预留一个slot标签<template id="child"> <div> <p>我是子标题</p> <h2>我是子组件</h2> <slot></原创 2022-01-11 11:17:14 · 151 阅读 · 0 评论 -
$children和$refs
在组件中访问子组件有两个种方法,一种是$children,另外一种是$refs。$children返回该组件的全部子组件的一个组件数组,这样很难寻找一个具体的组件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie原创 2022-01-11 10:00:11 · 297 阅读 · 0 评论 -
ES6----箭头函数
学习借鉴:https://blog.csdn.net/qq_32614411/article/details/80897256使用ES6的箭头函数语法定义函数,将原函数的function关键字和函数名都删掉,使用 => 代替,链接参数列表和函数体<script type="text/javascript"> // 使用ES6的箭头函数语法定义函数,将原函数的function关键字和函数名都删掉,使用 => 代替,链接参数列表和函数体 let f1 = (a, b)转载 2021-12-29 21:00:35 · 168 阅读 · 0 评论 -
ES6高阶函数----filter、map、reduce
filterfilter():创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素filter()不会对空数组进行检测,不会改变原始数组例如:想要数组中小于100的数字 <script type="text/javascript"> // filter(): 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素 // filter()不会对空数组进行检测,不会改变原始数组 // filter()中的回调函数返回一个布尔值原创 2021-12-29 20:20:46 · 448 阅读 · 0 评论 -
v-for中的:key
不在v-for的标签中加入key时。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-11-22 22:38:10 · 1361 阅读 · 0 评论 -
v-if和v-show的区别
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=".原创 2021-11-22 22:00:31 · 387 阅读 · 0 评论 -
v-if和v-bind结合案例
做了一个简单的登录切换案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip原创 2021-11-22 21:35:38 · 452 阅读 · 1 评论 -
计算属性与methods的对比
在某些时候,调用methods和计算属性达到的效果是一样的,那么他们到底有什么区别呢?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init原创 2021-11-18 22:39:56 · 825 阅读 · 0 评论 -
总结vue生命周期所学
前言之前写的博客多是以总结知识点为主,但写完我发现过了很久即使我忘记了那些知识点也还是会去百度,不会重看我的博客,所以从这篇开始想多以在学习时遇到的问题以及思考为主,记录在遇到问题时的解决思路和方法,以此加深印象。Vue生命周期先放一张vue官方文档图首先,在生命周期钩子函数中,this都指向调用它的Vue实例,并且在写生命周期函数时不要使用箭头函数的写法。这是两个需要注意的点。其次用我自己的理解解释一下各个生命周期函数主要在做什么:beforeCreate()函数:在初始化实例之后,此时V原创 2021-11-16 21:05:14 · 1486 阅读 · 0 评论 -
关于Object.defineProperty()
Object.defineProperty()给对象添加属性。Vue底层很多地方都用到了该方法,例如:数据代理、计算属性、数据劫持。Object.defineProperty()语法Object.defineProperty(obj, prop, descriptor)obj:定义属性的对象prop:定义或修改的属性的名称或Symbol类型descriptor:定义或修改的属性描述符例子首先定义一个对象// 定义一个对象 let Person = { name: "张原创 2021-11-15 20:45:12 · 367 阅读 · 0 评论 -
Vuex的学习
1.Vuex概述1.1 组件之间共享数据的方式父向子传值:v-bind属性绑定(语法糖:)子向父传值:v-on事件绑定(语法糖@)兄弟组件之间共享数据:EventBus$on 数据接收方$emit 数据发送方1.2 Vuex是什么Vuex是实现组件全局状态(数据)管理的一种机制,可以方便实现组件之间的数据共享。2. Vuex的基本使用2.1 安装Vuex安装Vuex依赖包npm install vuex --save导入Vuex包import Vuex from '原创 2021-08-22 14:02:20 · 70 阅读 · 0 评论 -
vue-cli3.0使用及配置
vue-cli3.0使用及配置1.先全局安装vue-cli3.0检测安装:vue -V2.创建项目(这个就跟react创建脚手架项目比较像了)这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个下一步之后问询问你安装哪一种 CSS 预处理语言,你随意选择,我是一直用的less...原创 2020-04-21 19:55:20 · 182 阅读 · 0 评论