VUE
文章平均质量分 87
牧云流
这个作者很懒,什么都没留下…
展开
-
vs code开发Vue2项目的配置参考
安装ESLint + Prettier项目根目录下存在文件ESLint的配置文件.eslintrc.jsmodule.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended", ], parserOptions: { parser:原创 2022-05-17 15:26:56 · 1036 阅读 · 0 评论 -
Vue2项目中配置ESLint和Prettier
ESLint是js代码的质量检查工具,同时也具备一定的代码风格的格式化能力。Prettier是一个代码风格的约束工具,Prettier能约束JS、JSX、TypeScript、Vue、CSS、Less、SCSS、HTML、JSON、Markdown等代码风格。由于ESLint定义了一些js的代码格式化的约束,导致其与Prettier存在一些冲突。如:ESLint默认语句结尾不加分号,Prettier默认语句结尾加分号;ESLint默认强制使用单引号,Prettier默认使用双引号;ESLint.原创 2022-05-17 14:37:25 · 10928 阅读 · 1 评论 -
vue3中slot插槽的使用
slot又称插槽,通常用于父子组件之间,用于父组件向子组件`传递模板内容`,在子组件中可以设定可以放置插槽的名称和要传递给父组件的子组件数据,在父组件中向子组件通过指令声明插槽和接收子组件传递的数据。原创 2022-02-21 13:04:39 · 7738 阅读 · 0 评论 -
深入Vue的computed属性
Vue模板的表达式语法仅支持单个表达式,用于简单运算;对于复杂的逻辑计算应当使用计算属性computed。computed可以依赖(计算)props、data、vuex的数据,即可以声明了一个计算属性,令其响应props/data/vuex的数据变化,返回一个经过某种计算的结果。原创 2021-09-23 17:01:08 · 5085 阅读 · 0 评论 -
在Vue中自定义指令
指令在定义的时候,名称前面不需要加 v- 前缀,在调用的时候,需要在指令名称前加上 v- 前缀来进行调用。自定义指令的注册分为全局自定义指令和局部指令。原创 2021-08-27 10:21:26 · 343 阅读 · 0 评论 -
Vue中props选项用法详解
Vue中子组件不能直接引用父组件的数据,需要通过props选项接收来自父组件的数据。原创 2021-08-20 10:00:03 · 12767 阅读 · 1 评论 -
vue-router的addRoute方法实现权限控制
在项目实践中,往往需要用户登录后由后端返回用户的权限,来动态配置路由,vue-router提供了两个方法router.addRoutes(),router.addRoute()可以进行动态路由配置,这里需要注意的是vue-router的options属性并不是响应式的,在添加(修改)路由规则后,router.options.routes属性不会改变,目前,如果需要更新router.options.routes,则需要手动更改。原创 2021-04-28 14:22:19 · 18532 阅读 · 1 评论 -
在Vue 中使用 JSX 语法
在Vue 中使用 JSX 语法原创 2021-04-17 21:42:21 · 5176 阅读 · 0 评论 -
Vue项目(Vue cli3)中的配置文件
package.json定义了项目所需要的各种模块,以及项目的配置信息。全局 CLI 配置文件 vue.config.jsvue.config.js 是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。常用配置项:配置项说明类型默认值更多publicPath设置部署应用包时的基本 URLString‘/’详情outputDir设置项目打包生成的文件的存储目录String‘dist’详情a原创 2021-04-02 16:14:05 · 2168 阅读 · 0 评论 -
Vue组件(三)-内置组件component、transition、 transition-group、keep-alive、slot
Vue 的内置组件component组件动态绑定组件,根据数据不同更换不同的组件,component通过属性is的值可以渲染不同的组件。<component :is="currentTabComponent"></component>transition组件为组件的载入和切换提供动画效果transition-group组件作为多个元素/组件的过渡效果keep-alive组件能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。包裹动态组件时,会缓存不活动的组件原创 2021-03-19 10:08:10 · 1216 阅读 · 0 评论 -
Vue组件(五)- 组件的继承mixins、extends、provide、inject
provide和inject是成对出现的,用于父组件向子孙组件传递数据原创 2021-02-08 09:13:51 · 1600 阅读 · 0 评论 -
Vue简介和知识体系
Vue是做什么的是用于构建用户界面的渐进式框架是一个轻量级的JavaScript MVVM库,是做到了数据双向绑定的框架。VUe.js的核心思想是数据驱动和组件化渐进式含义是:主张最少。每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。Vue的版本Vue已经有了三个版本,目前最常用的是Vue2Vue的安装在网页中用<script src="https://cdn.jsdelivr.net原创 2020-09-07 11:42:56 · 436 阅读 · 0 评论 -
Vue中定义模板的几种方法
1、字符串模板Vue实例的模板可以在Vue实例的选项template中定义,属性值的本质是一个字符串,如果组件的template过长难以阅读,可以将模板写在script标签中,或者使用Vue提供的内联模板功能,将组件模板设置在组件之外。<div id="app"></div>new Vue({ el: '#app', data: { message: 'Hello Vue!' }, template:`<p>{{原创 2020-09-06 11:29:41 · 1289 阅读 · 0 评论 -
前端简单理解MVC、MVP、MVVM框架
一切从前后端分离开始理解MVVM框架要先从前后端分离说起,传统前端先写一个静态页面,写好后,让后端去套模板,前端无法独立调试代码,这样做导致无论前端还是后端对页面的维护都非常困难,用户体验很差。前后端分离是指前端专注于客户端,复杂渲染页面和显示数据;后端专注做数据的操作;前后端通过接口交互,交互方式是前端发送异步请求后端给,后端接受请求返回数据,前端接受数据并使用数据。前后端分离后,前端才开始需要工程化才需要软件设计模式,这就有了MVC 和MVVM框架。MVC 框架MVC 即 Model-View原创 2020-09-04 10:01:39 · 930 阅读 · 0 评论 -
vue.config.js常用配置项
常用配置项:配置项说明类型默认值更多publicPath设置部署应用包时的基本 URLString‘/’详情outputDir设置项目打包生成的文件的存储目录String‘dist’详情assetsDir指定放置打包生成的静态资源 (js、css、img、fonts) 的目录(相对于outputDir)String‘’详情indexPath设置生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径原创 2020-08-31 10:02:24 · 300 阅读 · 0 评论 -
VS Code开发Vue项目常用插件
VS Code是免费软件,直接到官网下载安装即可,如果选用这款编辑器,建议花点时间实习一下这款软件,安装必要的插件,会大大提供编码效率。笔者从从前使用webstorm做前端项目,下面记录在项目实践中的一些配置。原创 2020-08-29 10:40:31 · 8556 阅读 · 1 评论 -
vue-router中当前路由对象属性
Vue项目中如果引入了Vue router实例,就可以在Vue实例中通过$route访问到当前匹配到的路由对象。$route对象代表着当前路由对象,属性包括:path:String,当前路由对象的名称|当前路由对象的路径,会被解析为绝对路径queryObject,|路由中携带的查询参数paramsObject,包含路由中的动态片段和全匹配片段的键值对。matched:Array,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。即匹配到的所有的 RouteRecord 对象ful原创 2020-08-26 20:07:21 · 1695 阅读 · 0 评论 -
Vue cli4构建一个简单的CRM项目(一)
在windows系统搭建VUE环境(安装vue-cli4)中我们使用默认配置创建一个项目hello-world,这次我们首先用图形化界面来创建一个项目。在命令行中输入下面的命令打开一个浏览器窗口vue ui安装这个页面的引导我们来创建一个项目hello-word2,在预设中选择手动配置项目,在功能中做如下选择在配置中做如下选择点击创建项目然后等待即可。...原创 2020-03-12 11:26:21 · 700 阅读 · 0 评论 -
Vue中router-link组件的属性
router-link组件的属性以下面的路由配置为例,介绍一下router-link组件的属性routes: [ { path: '/home', component: { template: '<div>Home组件</div>' }}, { path: '/products', component: { template: '<div>Pr...原创 2020-01-11 15:20:08 · 689 阅读 · 0 评论 -
Vue中使用Vue-Router管理路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。使用 Vue通过组合`组件`来构成应用程序,把 vue-router 添加进来,是将组件映射到路由,告诉vue-router在哪里渲染它们。原创 2020-01-13 09:12:04 · 975 阅读 · 0 评论 -
Vue中使用Axios实现Ajax异步通信入门
AJAX是一种异步的客户端和服务端进行交换数据的方法,表现是不重新加载页面的情况下,后台与服务器进行了数据交互,再部分的更新页面。在ES6之前,主要使用浏览器提供的接口XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据。我们熟悉的jquery的ajax方法就是对XmlHttpRequest的一种封装,它通过回调函数来传递异步操作的消息。甚至有些人认为jquery的ajax就代...原创 2020-01-04 12:30:44 · 673 阅读 · 0 评论 -
理解VUE实现MVVM架构的方式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。什么是MVVMMVVM可以拆分成:Model -View -ViewModel 三部分Model 数据模型:可以在Model中定义数据修改和操作的业务逻辑View 视图:代表UI 组件,可以理解为DOMVie...原创 2019-12-06 08:49:28 · 607 阅读 · 0 评论 -
Vue实例与组件入门
让Vue框架跑起来,首先需要安装,通常在做大型项目时会使用到Vue官方推荐命令行工具 Vue CLI , Vue CLI 的安装比较复杂,对于初学者来说先使用官方提供的cdn来引入vue.js,能够快速的入门和理解Vue。来记得《理解MVVM框架,简单实现双向数据绑定》中的代码吗?我们实现了一个简单的双向数据绑定,现在把代码改写成一下<div id="app"> <inp...原创 2019-12-06 17:11:03 · 454 阅读 · 0 评论 -
Vue模板语法
Vue模板关于Vue模板官方这样说:Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到...原创 2019-12-05 19:28:52 · 516 阅读 · 0 评论 -
Vue组件(一)-常用选项methods、computed、filters、watch、props
我们先来总结一下前面已经认识的选项el:指定Vue实例的挂载点,根实例的特有属性data:Vue 实例的数据对象components:Vue实例配置局部注册组件template:组件模板render:渲染函数,创建虚拟DOM现在开始以组件为例介绍一下其他常用的选项(options对象的属性):computed:计算属性watch:侦听属性filters:过滤器methods:V...原创 2019-12-10 15:57:19 · 1469 阅读 · 0 评论 -
Vue组件(二)-生命周期函数
说到生命周期函数,就要来先谈谈生命周期,一个Vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称之为Vue的`生命周期`;更通俗的说实例从被创建出来、运行、最后被销毁所要经历的一系列过程,就是生命周期。原创 2019-12-12 15:11:56 · 272 阅读 · 0 评论 -
Vue组件(四)-组件之间的通信
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例和可选的嵌套的、可复用的组件树组成。对于单页应用而言不存在没有关系的组件,至少所有的组件都有一个根组件原创 2019-12-20 14:22:54 · 186 阅读 · 0 评论 -
Vue状态管理插件-Vuex入门
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex是在组件外部管理状态,是用来管理组件之间通信的一个插件。这里的状态就是指数据。原创 2019-12-24 16:50:29 · 704 阅读 · 0 评论 -
SPA中前端路由实现原理与Vue-Router前端路由模式
一、单页应用(SPA)单页 Web 应用 (single-page application) 是一种特殊的 Web 应用,简单的说就是只有一张Web页面的应用。该页面在浏览器中运行的时候不会重新加载或跳转。单页应用是利用 JavaScript 动态的变换HTML的内的元素的显示和隐藏,实现UI与用户的交互。1.1 单页应用的优点:SPA 可以提供较为流畅的用户体验: 没有页面之间的切换,...原创 2019-04-02 14:47:41 · 583 阅读 · 0 评论 -
Vue实例的配置参数options
数据相关选项选项说明data声明需要响应式绑定的数据对象props接收来自父组件的数据propsData创建实例时手动传递props,方便测试props",computed计算属性",methods定义可以通过vm对象访问的方法",watchVue实例化时会调用$watch()方法遍历watch对象的每个属性",DOM相关选项...原创 2019-11-28 08:56:46 · 1568 阅读 · 0 评论 -
windows系统搭建VUE环境(vue-cli4)
第一步:node环境安装第二步:node环境检测第三步:设置nodejs的global和cache路径第四步: 配置PATH环境变量第五步: vue-cli脚手架安装第六步: 创建一个项目hello-world第七步: 修改默认端口原创 2019-03-26 16:53:17 · 4387 阅读 · 0 评论 -
vue-cli创建的vue2项目之目录结构
上一节我们用脚手架创建了一个项目my-project,现在来看一下项目的结构原创 2019-08-01 17:36:25 · 218 阅读 · 0 评论 -
Vue开发调试神器-vue-devtools
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。一、安装1、vue-devtools可以从chrome商店直接下载安装,但由于chrome浏览器的应用商店不能直接访问,可以到github上下载git clone https://github.com/vuejs/vue-devtools2、执行以下命令cd vue-devt...原创 2019-09-12 15:59:44 · 290 阅读 · 0 评论 -
Webstorm2018中配置Vue开发环境详解
Vue学习笔记1-windows系统搭建VUE环境我们用vue-cli创建好一个项目,如果我们使用Webstorm作为编码工具,会发现代码中有很多编辑器警告,这是因为默认情况下Webstorm对Vue项目的支持不够造成的,为提高编程效率还要进行一些配置。我的Webstorm版本是2018,配置方法如下:1、安装Vue.js插件,使Webstorm能够识别Vue文件在Webstorm的File...原创 2019-09-18 11:57:44 · 1180 阅读 · 0 评论 -
Vue中管理路由-vue-router路由配置
路由懒加载路由嵌套路由守卫参数传递路由中的钩子watch(监测变化) $route 对象:实现不同路由不同页面title重定向编程式导航路由组件传参原创 2019-09-17 14:31:52 · 530 阅读 · 0 评论 -
异步组件和vue-router路由懒加载
懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。路由懒加载就是将路由匹配的组件变为...原创 2019-09-17 14:31:28 · 1005 阅读 · 0 评论 -
Vue中管理路由-vue-router路由守卫
在Vue项目中,路由跳转前经常要做一些验证,如登录验证,权限验证等,是应用中的普遍需求,可以通过导航守卫来实现。导航守卫也叫路由守卫,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。当路由跳转前或跳转后、进入、离开某一个路由前、后,经常需要做某些操作,可以使用路由钩子来监听路由的变化。钩子与钩子函数路由在发生改变的过程中,不同阶段调用不同的函数,那么节点就是钩子...原创 2019-09-17 17:53:21 · 347 阅读 · 0 评论