Vue
文章平均质量分 61
关于Vue的一些相关知识
七锐.
且看烟高云低处,远眸尽过满落辰。
展开
-
Vue3.0 多环境配置
Vue3的配置相比Vue2就简化了很多了。在根目录下新建.env.dev(开发环境)、.env.test(测试环境)、.env.prod(生产环境)文件,具体需要几个环境根据需要决定。.env+后缀叫啥都可以,自己高兴就好,当然最好也要让别人一目了然。.env.devNODE_ENV = ‘development’VUE_APP_MODE = ‘dev’VUE_APP_API_HOST = ‘本地开发api地址’其他的自己照搬,改改就好了注意:自定义变量要以VUE_APP开头哈修改原创 2021-03-03 09:50:10 · 1098 阅读 · 1 评论 -
初始Vue3.
一、知识点defineComponent 构建应用及绑定事件使用 reactive 绑定数据使用 ref ( torefs ) 绑定数据使用 getCurrentInstance 获取当前实例化对象上下文信息watch、watchEffect 数据监听简单的 TodoList 点餐功能1.使用 reactive 绑定数据<template> <div> <h1>使用 reactive 绑定数据</h1> <p>原创 2021-03-02 09:07:25 · 177 阅读 · 0 评论 -
Vue实现简单ToDolist案例
Vue实现简单ToDolist案例<template> <div> <div> <input type="text" v-model="inputValue" @keydown.enter="add"> <span @click="shaix" style="cursor: pointer;">筛选</span> <h3>正在进行({{noList}})</h3&原创 2021-01-22 14:56:12 · 130 阅读 · 0 评论 -
Vue监听和深度监听watch。
watch可以让我们监控一个值的变化,从而做出相应的反应。 <div id="app"> 用户名:<input type="text" v-model='name'> <p>你的名字是:{{name}}</p> </div> <!-- 引入vue --> <script src="/node_modules/vue/dist/vue.js"></scri原创 2021-03-01 10:52:58 · 112 阅读 · 0 评论 -
Vue项目优化.
代码优化1.使用keep-alive缓存不活动的组件实例。keel-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。在动态组件...原创 2021-01-15 19:46:13 · 128 阅读 · 0 评论 -
函数防抖、节流
函数的节流和防抖:函数防抖和函数节流:优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize、scroll,鼠标的mousemove、mouseover,input输入框的keypress等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能。为了优化体验,需要对这类事件进行调用次数的限制。函数防抖(debounce)函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。简单的说,当一个动作连续原创 2021-01-14 16:57:09 · 93 阅读 · 1 评论 -
Vue-router 路由守卫的基本用法
导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览,需要结合meta来实现vue中路由守卫一共有三种:全局路由守卫,组件内路由守卫,路由独享守卫所谓的路由守卫可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里来?总不能随便陌生人就给放进去?要到哪里去?然后保安再告诉你下一步该怎么做?如果你的确是这个房子主人允许进入的人,那就让你进入,否则就要打电话给房子主人,跟房主商量(登录注册),给你原创 2021-01-14 11:13:52 · 282 阅读 · 0 评论 -
Vue自定义指令的概念及使用。
Vue自定义指令:directive在Vue中,除了默认设置的核心指令(v-model和v-show),Vue也允许自定义指令directive.自定义指令分为全局自定义指令和局部自定义指令。全局自定义指令:使用Vue.directive来全局注册指令。Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } })局部自定义指令:在原创 2021-01-13 11:38:07 · 149 阅读 · 0 评论 -
Promise封装axios请求(axios封装与API接口管理)
一、前言axios的封装与api接口的统一管理,其主要目的就是在帮助我们简化代码和利于后期的维护更新。在Vue项目中,和后台交互数据这块,我们通常使用的是axios库,所谓axios它是基于promise的http库,可运行在浏览器端和node.js中。它有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。二、axios封装步骤安装axios npm i原创 2021-01-12 11:10:06 · 607 阅读 · 0 评论 -
Vue双向数据绑定原理
Vue双向数据绑定原理使用Vue双向数据绑定首先我们要了解它的原理:Vue.js则是采用数据劫持结合发布-订阅模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据发生变动时发布消息给订阅者,触发相应的监听回调来渲染视图。实现步骤实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的原创 2021-01-08 14:43:54 · 119 阅读 · 0 评论 -
Vue之自定义组件。
简介组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树功能组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根原创 2021-01-07 20:41:08 · 265 阅读 · 0 评论 -
Vue+Vant ui实现图片上传
Vue+Vant ui实现图片上传一、首先需要安装Vant uinpm i vant -S二、在main.js中引入Vant ui//引入Vantimport Vant from "vant";import "vant/lib/index.css"Vue.use(Vant)三、具体使用Vant Uploader组件详解<div> <p>图片上传</p> <van-uploader v-model="fileList" :after-re原创 2021-01-05 19:15:55 · 501 阅读 · 1 评论 -
浅谈Vuex。
1.什么是Vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。2.Vuex组成结构示意图:vuex的特点是把数据单独隔离,形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出,其中action作为数据的输入,state作为数据的输出。如下图:3.Vuex的核心概念:1. Storevuex中最关键的就是store对象,这是Vuex的核心。可以说,Vuex这个插件其实就原创 2021-01-04 14:52:36 · 148 阅读 · 0 评论