![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 85
搬砖猴哥
程序员中的猴哥
展开
-
vue2.0简易的数据响应式
vue2.0数据响应式原理概念vue中,当data中的数据一旦发生变化,依赖此数据的会自动同步视图进行更新前置想实现数据响应式,那么我们需要先了解关于对象的属性的特性getOwnPropertyDescriptor该方法返回一个对象,该对象描述给定对象上特定属性的配置(即直接存在于对象上而不在对象的原型链中的属性)。返回的对象是可变的const data = { name: '张三', age: 14}console.log(Object.getOwnPropertyDescrip原创 2021-03-14 14:43:45 · 357 阅读 · 1 评论 -
快速上手vue3.0
vue3.0环境安装安装最新vue脚手架npm i @vue/cli -g通过脚手架创建项目,并选择3.0vue create vue-next运行项目npm run servevue3.0 组合式apivue2.0采用的叫做选项式api:例如我们想实现某一个功能,关于这个功能的数据我们会定义在data中,事件函数定义在methods中,计算属性定义在computed中…,实际上我们想实现一个功能会把我们代码拆分写到不同的模块中,这样我们很难区分,哪个数据和哪个逻原创 2020-09-21 12:12:52 · 1537 阅读 · 0 评论 -
vue面试题大全汇总
vue的两个核心组件系统、数据驱动什么是双向数据绑定?v-model,数据发生变化,同步视图,视图发生变化,同步数据什么是单向数据流?在父向子传值的时候,如果改变父组件的值,子组件会跟着同步更新,反之不允许MVVM的设计思想的优势?双向绑定技术,当Model变化时,View也会自动变化,view发生更新,model也跟着同步我们减少了dom的操作,因为我们只需要关注数据就可以m...原创 2020-03-11 20:13:15 · 4504 阅读 · 2 评论 -
nprogress的使用
进度条添加安装nprogress,ui界面依赖安装依赖,搜索nprogress进行安装即可在main中导入进度条组件//导入进度条插件import NProgress from ‘nprogress’//导入进度条样式import ‘nprogress/nprogress.css’利用NProgress.start()显示进度条NProgress.start()利用NProgr...原创 2020-02-16 10:50:29 · 3336 阅读 · 1 评论 -
vue脚手架通过ui界面方式创建项目
我们vue脚手架提供了图形界面操作项目,比之前通过命令操作的形式更加简单,下面我就来总结一下图形界面创建项目的基本步骤1、首先保证全局安装@vue/cli工具 ,没有自行下载cnpm i @vue/cli -g2、推荐下载yarn包管理器cnpm i yarn -g3、接下来我们就可以在自己的电脑里创建项目,找到电脑某个位置,在此文件夹按住shift同时右键,在此处打开cmd命令窗口...原创 2019-06-13 22:10:51 · 6751 阅读 · 4 评论 -
vue中keepAlive组件的作用及使用方式
在面试的时候,很多面试官再问vue的时候可能就会提一嘴,你知道keep-alive有什么作用吗?keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用keep-alive来实现我这里利用脚手架创建项目后会生成home和about...原创 2019-04-18 15:22:42 · 37561 阅读 · 19 评论 -
vue-cli3.0切换环境对应的api接口
我们要完成通过不同命令切换不同环境对应的请求接口的urlnpm run dev // 开发环境npm run prod // 生产环境npm run test // 测试环境首先我们将package.json中添加配置不同命令"scripts": { "prod": "vue-cli-service serve --mode production", "dev"...原创 2019-04-21 11:45:32 · 2664 阅读 · 0 评论 -
vue面试题总结-2020
小编在这里总结一些vue常见的面试题,希望能够帮助到你们的面试你对vue中mvvm的模式设计有什么感想?mvvm设计模式采用的双向绑定,当view发生变化,model会跟着变化,model发生变化,view也会同步,这样的话,我们就可以更多的关注逻辑,从而减少dom的操作,代码的耦合性也更好vue中利用索引修改数组的时候,页面会跟着同步吗?利用索引修改数组的时候,页面不会进行同步,此时应该...原创 2019-04-02 14:03:28 · 6499 阅读 · 7 评论 -
vue-cli3.0脚手架配置步骤
脚手架3.0配置步骤1、在全局安装脚手架cnpm i @vue/cli -g2、如果没有yarn,建议安装yarncnpm i yarn -g3、创建项目vue create 项目名字如果是第一次初始化项目,脚手架会提示你,使用npm淘宝镜像下载,这样会比yarn快,你可以n掉,接下来会进入选择配置默认配置脚手架默认配置了一下简单的配置然后直接安装自定义配置按空...原创 2019-03-29 20:07:00 · 2341 阅读 · 0 评论 -
vue定义全局单文件组件通过use形式使用组件
我们这一次来玩一下vue中如何来定义一个全局的组件,并且通过Vue.use()来使用首先我们应该在我们项目里面创建一个组件alert.vue,你们在玩的时候就随意啦想叫什么就叫什么,别叫床就行如图alert中的代码为<template> // 定义了简单的结构 <div class="box" v-if="原创 2019-03-01 22:18:50 · 1448 阅读 · 0 评论 -
自定义Vue插件
今天咱们来玩一下vue中的自定义组件,此案例直接通过script引入js的形式定义组件我是简单的写了一个弹出框的小插件css样式–这就不需要解释了吧,强撸<style> button{ width:100px; height:30px; background: red; border-radius:10px; c...原创 2019-03-01 19:56:17 · 441 阅读 · 0 评论 -
vue多语言
vue中实现语言切换的方式如何实现的1.NPM 项目安装cnpm i vue-i18n2.使用方法/* 国际化使用规则 */import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)<!-- 需要国际化的数据定义在此处 -->const messages = { en: { m...原创 2019-03-01 13:51:33 · 1093 阅读 · 0 评论 -
vue代理服务器proxy配置
title: vue反向代理配置date: 2019-03-01 11:26:43tags: vue摘要: vue-cli实现反向代理跨域1.如果没有vue脚手架需先要安装脚手架cnpm i @vue/cli -g2.利用脚手架创建项目vue create myproject(项目名)3.创建完项目后,需手动在项目根目录创建vue.config.js# vue.confi...原创 2019-03-01 11:50:45 · 19959 阅读 · 4 评论