![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
张小囧!冲呀!
这个作者很懒,什么都没留下…
展开
-
路由中meta权限控制的使用
meta作为一个对象属性{},被定义在routes的{}下,用于进行权限控制。如普通浏览者和已登陆用户可访问的数据信息不同;场景: 页面包含首页、博客、登陆三个router-link,若是浏览者点击博客后则对应登陆组件,若是已登陆页面点击博客后则对应到博客组件。<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>路由中meta权限控制 this.$router.p.原创 2020-05-31 20:10:46 · 2796 阅读 · 0 评论 -
keep-alive在路由中的使用
路由中keep-alive的使用,也就是将router-view包含在keep-alive中,这样当频繁往复点击多个router-link时,router-link对应的组件不会被频繁的创建和销毁,因为包含在keep-alive中router-view被缓存了起来。即使浏览器刷新,由keep-alive缓存的数据仍旧处于缓存状态;...原创 2020-05-31 18:37:27 · 1149 阅读 · 0 评论 -
动态路由匹配之对$route的监听
动态路由匹配的含义此前,我们使用动态路由参数params,那么不同的参数意味着不同的数据,但不同的数据却是在同一个框架也就是说同一个组件下显示,这就是我们说的数据驱动视图。那么该公共组件如何获取不同的动态路由参数以显示不同的数据呢?这个时候需要对$route侦听,以动态匹配路由最终在同一个组件中显示不同的数据,也就是说根据不同的路由参数做出响应;使用公共组件的好处两个router-link的动态路由参数指向同一个组件时,一旦点击其中一个router-link该组件被创建后, 即使再点击另外一个rou.原创 2020-05-31 18:22:10 · 987 阅读 · 0 评论 -
vue-router嵌套路由的使用
嵌套路由主要是指routes中的对应的一个路由匹配规则{}中还包含了一个children:[{}]参数,其中的[]对应的内容类似于routes;场景:router-link“首页”对应的组件下面还包含了其它router-link(登陆和注册),而点击登陆和注册后又与其它的组件相对应代码<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>vue-router动态路.原创 2020-05-31 17:44:18 · 233 阅读 · 0 评论 -
vue-router中动态路由参数params以及查询参数query的使用
动态路由参数params的使用。编码时需要变化的有:(1) routes中的path,由path:'/user'变化为path:'/user/:id'(2) router-link中, 由:to='{name:"userP"}'为:to='{name:"userP",params:{id:1}}'(3) 点击router-link对应的文字后,url发生了变化,由.html/user 变化为 .html/user/1查询参数query的使用。编码时需要变化的部分有(1) router-lin.原创 2020-05-31 17:22:40 · 2579 阅读 · 0 评论 -
vue-router使用的基本步骤
引入vue.js以及vue-router.js。先引入vue.js,因为vue-router.js依赖于vue.js。引入vue-router的方式为npm install vue-router -S。引入后便可以使用其抛出的两个组件<router-link to=''></router-link>以及<router-view></router-view>,router-link类似于a标签,其中to属性类似于href属性。若to中还需要指定其它参数的话,需.原创 2020-05-31 16:56:46 · 361 阅读 · 0 评论 -
Vue的JS部分如何获取DOM元素
给html中原始标签对或子组件中定义ref属性,在mounted(){}方法或者此方法后使用this.$refs.具体的ref值来获取DOM元素。因为使用mounted以前的钩子函数时,还未将组件挂载到DOM上,自然也无法通过$refs获取DOM上的元素;需要区分的是,打印this.$refs.具体的ref值, 若是原始标签对则输出的结果是原始标签对,若ref属性在子组件标签中,则输出的是组件对象,而不是组件对应template中的内容;this.$refs 输出的是当前组件中包含的定义了ref属性的.原创 2020-05-31 16:09:48 · 1214 阅读 · 0 评论 -
Vue中组件生命周期中涉及的钩子函数
一. 钩子函数简要说明beforeCreate与created(1) beforeCreate 为组件完全创建前调用的函数,使用不多,但常用于定时器;(2) created 为组件完全创建后调用的函数,此时可以获取后端数据然后对组件中的数据属性进行赋值以渲染视图层;(3) 案例:在组件Test中,beforeCreate中打印Test组件的testMsg的值显示undefined,但是在created中打印该值却能成功输出;beforeMount与mounted(1) beforeMount原创 2020-05-13 21:35:59 · 1054 阅读 · 0 评论 -
Vue中的计算属性computed
1. 什么是计算属性 为什么vue中存在计算属性computed。通过对计算属性的使用,我们可以将原本在模板表达式中的复杂逻辑转移到计算属性中去,避免模板表达式过于臃肿而难以维护。计算属性中可以完成的复杂逻辑既可以是运算也可以是函数调用,最后返回一个最终的计算结果即可。 具体的定义方式就是computed作为vue实例化对象中的一个option,不同的复杂业务逻辑则在computed下定义具体的方法。即:computed:{ function1:function() { }, function2原创 2020-05-13 20:11:37 · 292 阅读 · 0 评论 -
Vue中侦听器watch的基本使用
侦听实际上就是侦听组件中数据属性的变化。一般来说,侦听划分为简单侦听和深度侦听。对基本数据类型的侦听我们只需要使用简单侦听即可,而对复杂数据类型诸如对象数组的侦听,我们需要使用深度侦听。侦听时我们使用watch作为组件定义时的一个option。 1.基本数据类型之简单侦听基本用法 watch:{ msg:function(newV,oldV) { // 相关操作 } } 2.复杂数据类型之深度侦听用法基本用法 watch:{ arr:{原创 2020-05-10 10:20:09 · 824 阅读 · 0 评论 -
Vue中过滤器的基本用法
顾名思义,vue中的过滤器一般用来对数据进行修改、加工和过滤。vue中的过滤器分为两种,一种是全局过滤器(说明整个项目中多处需要使用到该过滤器),另外一种是局部过滤器。无论是全局过滤器还是局部过滤器都是先申明再使用。 1.全局过滤器的定义 Vue.filter('过滤器名称',function(value,arg) { //详细的过滤操作 }) 2.局部过滤器的定义,作为组件中的一个属性filters:{ '过滤器名称':function(value,arg) {原创 2020-05-10 09:42:28 · 587 阅读 · 0 评论 -
Vue中组件间的五种通信方式
在组件的五种通信方式中,父子组件之间的通信占了四种,而兄弟组件间的通信占了一种。下面我们详细给出这五种通信方式一. 父子组件之间的四种通信方式props和$emit() 这是最常被使用的一种父子组件通信方式,而且常用于单层的父子组件间传值。子组件使用props:[‘父组件自定义的属性名’]接收父组件传给自身的数据,而子组件要传值给父组件则使用$emit(‘父组件自定义的事件名’,传输的具体值)。 具体来说,父组件向子组件传值分三步走。首先,父组件在使用子组件的时候绑定自定义属性传值给子组件;接着,原创 2020-05-10 08:44:04 · 963 阅读 · 0 评论 -
vue中的组件介绍(局部组件、全局组件以及组件中涉及的具名插槽)
1. vue中的组件vue中的组件被划分为两种类型,分别是局部组件和全局组件。一般组件被用来定义具体的内容,如页面index.html由头部组件Header、侧边栏组件Asider以及内容组件Content组成。index.html作为一个入口文件,index.html在自身的template中以标签对的形式使用组件。如<Header>内容</Header>至于局部...原创 2020-05-06 14:16:50 · 404 阅读 · 0 评论 -
vue中的双向数据绑定以及其实现基本原理
1. 什么是双向数据绑定在vue中,我们使用v-model=‘msg’ ,msg定义在数据属性data中,以此来实现双向数据绑定。在vue中,我们使用数据驱动视图,即data=>view,但使用v-model后,视图层更新后的msg可以再传给data,即view=>data,这个时候更新后的data又能驱动其它视图,即data=>view_other。总的来说,数据流的走向是d...原创 2020-05-06 12:23:24 · 1562 阅读 · 0 评论 -
Vue中常用指令的具体含义与用法
1.vue中的指令是指什么?在表现形式上,就是带有’v-'前缀的属性。v-属性名=‘具体表达式’。当表达式对应的值发生变化后,将响应式的作用于Dom,从而影响视图层。更为具体的说,指令结合属性作为暗号,框架会根据按照对应的不同的值来进行Dom操作的绑定。因此,帮我们在实际开发中做了减法。2.vue中常用的指令(1)v-textv-text=‘msg1’,msg1被定义在数据属性中,指明了具...原创 2020-05-06 11:10:12 · 2553 阅读 · 0 评论 -
vue的下载、引入和基本使用
vue作为一个流行的前端框架,我们该如何将其应用到工作中呢?简单概括为以下三步:(1)安装vue我们采用npm的方式安装。因此,在使用npm之前先将安装npm。nodeJS中包含npm,所以我们此前直接安装nodeJSnpm install vue(2) 引入vue<script type='text/javascript' src='node_modules/vue/dist/...原创 2020-05-05 21:32:29 · 3355 阅读 · 0 评论 -
前端框架与前端库的区别
前端框架与前端库的区别总的来说,无论是前端框架,如vue,angular,还是前端库,如jquery,art-template,react,它们都是基于javascript来实现的。但库在开发过程中帮我们实现的效果远没有框架全面。具体可以从以下几点区分:(1)从提供的功能来看,库专注于某一个或某几个点,而框架则向开发者提供一整完整的解决方案。如jquery功能主要是Dom操作和异步请求,而ar...原创 2020-05-05 20:42:26 · 602 阅读 · 0 评论