![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 61
关于Vue的一些相关知识
七锐.
且看烟高云低处,远眸尽过满落辰。
展开
-
Vue3.0 多环境配置
Vue3的配置相比Vue2就简化了很多了。 在根目录下新建.env.dev(开发环境)、.env.test(测试环境)、.env.prod(生产环境)文件,具体需要几个环境根据需要决定。.env+后缀叫啥都可以,自己高兴就好,当然最好也要让别人一目了然。 .env.dev NODE_ENV = ‘development’ VUE_APP_MODE = ‘dev’ VUE_APP_API_HOST = ‘本地开发api地址’ 其他的自己照搬,改改就好了 注意:自定义变量要以VUE_APP开头哈 修改原创 2021-03-03 09:50:10 · 1132 阅读 · 1 评论 -
初始Vue3.
一、知识点 defineComponent 构建应用及绑定事件 使用 reactive 绑定数据 使用 ref ( torefs ) 绑定数据 使用 getCurrentInstance 获取当前实例化对象上下文信息 watch、watchEffect 数据监听 简单的 TodoList 点餐功能 1.使用 reactive 绑定数据 <template> <div> <h1>使用 reactive 绑定数据</h1> <p>原创 2021-03-02 09:07:25 · 188 阅读 · 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 · 136 阅读 · 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 · 117 阅读 · 0 评论 -
Vue项目优化.
代码优化 1.使用keep-alive缓存不活动的组件实例。 keel-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 在动态组件 ...原创 2021-01-15 19:46:13 · 132 阅读 · 0 评论 -
函数防抖、节流
函数的节流和防抖: 函数防抖和函数节流:优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize、scroll,鼠标的mousemove、mouseover,input输入框的keypress等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能。为了优化体验,需要对这类事件进行调用次数的限制。 函数防抖(debounce) 函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。 简单的说,当一个动作连续原创 2021-01-14 16:57:09 · 98 阅读 · 1 评论 -
Vue-router 路由守卫的基本用法
导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览,需要结合meta来实现 vue中路由守卫一共有三种: 全局路由守卫, 组件内路由守卫, 路由独享守卫 所谓的路由守卫可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里来?总不能随便陌生人就给放进去?要到哪里去?然后保安再告诉你下一步该怎么做?如果你的确是这个房子主人允许进入的人,那就让你进入,否则就要打电话给房子主人,跟房主商量(登录注册),给你原创 2021-01-14 11:13:52 · 285 阅读 · 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 · 160 阅读 · 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 · 630 阅读 · 0 评论 -
Vue双向数据绑定原理
Vue双向数据绑定原理 使用Vue双向数据绑定首先我们要了解它的原理: Vue.js则是采用数据劫持结合发布-订阅模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据发生变动时发布消息给订阅者,触发相应的监听回调来渲染视图。 实现步骤 实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者 实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的原创 2021-01-08 14:43:54 · 126 阅读 · 0 评论 -
Vue之自定义组件。
简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 功能 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根原创 2021-01-07 20:41:08 · 274 阅读 · 0 评论 -
Vue+Vant ui实现图片上传
Vue+Vant ui实现图片上传 一、首先需要安装Vant ui npm i vant -S 二、在main.js中引入Vant ui //引入Vant import 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 · 520 阅读 · 1 评论 -
浅谈Vuex。
1.什么是Vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 2.Vuex组成结构示意图: vuex的特点是把数据单独隔离,形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出,其中action作为数据的输入,state作为数据的输出。如下图: 3.Vuex的核心概念: 1. Store vuex中最关键的就是store对象,这是Vuex的核心。可以说,Vuex这个插件其实就原创 2021-01-04 14:52:36 · 158 阅读 · 0 评论