JINGinC的博客

一、前言 我刚在官网上研究了半天有关render的文档，我总结一下我个人的理解。render函数跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数，render函数更接近编译器。配合官方文档，总结一下我的心得二、render 拿官网的例子为例 ，通过父传子level，动态生成标题<template> <div...

Vue-Router 传参可以分为两大类分别是编程式的导航 router.push 和声明式的导航<router-link>一、编程式的导航 router.push编程式导航传递参数有两种类型：字符串、对象。字符串 :字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：this.$router.push("home");对象 :想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数...

要初始化 data 中的数据，可以使用 Object.assign()方法，实现重置 data中的数据，以下就是对该方法的详细介绍，以及如何使用该方法，重置 data 中的数据1）Object.assign()方法基本定义Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。用法： Object.assign(target, ...sources)，第一个参数是目标对象，第二个参数是...

一、在vue中操作data的数组方法有以下几个方法可以触发视图更新：push()、pop()、shift()、unshift()、splice()、sort()、reverse()以上这些方法会改变被操作的数组； filter()、concat()、 slice() 这些方法不会改变被操作的数组，返回一个新的数组；以上方法都可以触发视图更新。二、不能触发视图更新的方法有以下几种：利用索引直接设置一个数组项，例：this.a...

1、给对象添加属性的时候，直接通过给 data 里面的对象添加属性然后赋值，新添加的属性不是响应式的【解决办法】通过 Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的2、在 created 操作 dom 的时候，是报错的，获取不到 dom，这个时候实例 Vue实例没有挂载【解决办法】通过：Vue.nextTick(回调函数进行获取)...

在vue中使用插件主要有两个步骤：1、采用 ES6 的 import ... from ... 语法或 CommonJS 的 require() 方法引入插件2、使用全局方法 Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })...

1. $route 是“路由信息对象”，包括 path，params，hash，query，fullPath， matched，name 等路由信息参数。2. $router 为 VueRouter 的实例，相当于一个全局的路由器对象，里面含有很 多 属 性 和 子 对 象 ， 例 如 history 对 象 ， 经 常 用 的 跳 转 链 接 就 可 以 用 this.router.push 会往history 栈中添加一个新的记录。返回上一个 history 也是使...

query和Params都是用于跳转路由传参的，二者之间的区别我总结以下两点：1. query要用path来引入，params要用name来引入2. 接收参数时，分别是this.$route.query.name和this.$route.params.name...

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如， 我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲 染。那么，我们可以在 Vue-Router 的路由路径中使用“动态路径参数”来达到这个效果我们可以通过param和query两种方式获取动态参数params的类型:配置路由格式:/router/:id 传递的方式:在path后面跟上对应的值 传递后形成的路径:/router/123query的类类型...

在官方文档中明确指出v-for和v-if不建议一起使用。原因：v-for 比 v-if 具有更高的优先级，每一次都需要遍历整个数组，造成不必要的计算，影响性能，即使100个list中只需要使用一个数据，也会循环整个数组。解决方案： 一、在其父元素上进行v-if判断，在内部执行v-for循环 二、如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项computed: { list () ...

总结以下几点如何捕获Vue组件的错误信息一、使用errorCaptured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false以阻止该错误继续向上传播。二、使用errorHandler 为全局钩子，使用 Vue.config.errorHandler 配置，接收参数与 errorCaptured 一 致，2.6 后可捕捉 v-on 与 promise 链的错误，可用于统一错误处理与错误兜底...

最近在项目中遇到路由监听，现总结以下两种方式：一、在watch按照如下规则书写即可watch: { '$route' (val, old) { // 当前路由 console.log(val) // 上一个路由 console.log(old) }}二、在路由导航守卫时监听beforeRouteUpdate (to, from, next) { //这里监听},...

jQuery： 曾经是前端最流行的js库。Vue： 是一个兴起的js库，是一个精简的MVVM。从技术角度讲。Vue.js专注于MVVM模型的ViewModel层，它通过双向数据绑定把view和Model层连接起来，通过对数据的操作完成对页面视图的渲染。二者的区别是：一、Vue和 jQuery 对比 jquery是使用选择器（）选取DOM对象，对其进行赋值、取值、事件绑定等操作，和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。二、Vue 则是通过Vue对.

根据我对于vue的理解，我总结的vue优势有以下五点： 一、vue作为一款轻量级框架，门槛低，上手快，简单易学。 二、vue可以进行组件化开发，数据与结构相分离，使代码量减少，从而提升开发效率，易于理解三、vue最突出的优势在于双向绑定，使用虚拟DOM 四、相较于传统页面通过超链接实现页面跳转，vue会使用路由跳转不会刷新页面 五、vue是单页面应用，页面局部刷新，不用每次跳转都请求数据，提升了用户体验...

一、作用在vue项目中很多时候都需要用到显示和隐藏，v-if 和 v-show 都是用来控制动态显示或影藏 DOM 元素的二、区别1、v-showv-show只是通过控制css中的display属性来控制他的显示或隐藏； v-show只是简单的基于css切换 v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留；2、v-ifv-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果； ...

vue项目开发完成后，我们需要将项目打包上线，同时我们希望可以在本地预览生产环境项目（以vue-cli脚手架生成的项目为例）一、运行打包命令npm run build//一般情况如果不改的话都是build运行后生成 dist 文件夹...

1.事前准备通过“npm i cos-js-sdk-v5 ”下载“cos-js-sdk-v5 ”，然后在做图片上传的组件里，通过“import COS from 'cos-js-sdk-v5' ”引入“cos-js-sdk-v5. ”1.1下载依赖包npm i cos-js-sdk-v5 --save1.2 封装一个具有上传功能的组件我这里结合element-ui中的 来进行封装的(官网cv)show-file-list: 是否显示上传的文件列表 action...

一. 什么是生命周期一组件从 创建 到 销毁 的整个过程就是生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。二. 钩子函数作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求...

最近写项目遇到很多this指向的问题，今天来写一下我总结的this指向看了很多文章，之前也在私下总结过，对于正常函数，谁调用的它，this就指向谁，而箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。但是在Vue实例中，methods中如果用的是正常函数，那么它的this就指向Vue实例；如果是箭头函数，this就指向window对象。在Vue的官方文档是这么解释的：methods 将被混入到 Vue ...

111

侦听器一般来说是用来监听数据的变化，默认是在数据发生变化时执行。监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值。在vue中，使用watch来响应数据的变化，关于watch的用法大致有三种。1、下面代码是watch的一种简单的用法<div id="app"> <input type="text" v-model="firstName" /></div><script src="https://cdn.

自定义组件的 v-model 和 .sync修饰符其实本质上都是vue的语法糖，用于实现父子组件的“数据”双向绑定.Vue中的 props 是单向向下绑定的，即：每次父组件更新时，子组件中的所有 props 都会刷新为最新的值。但是如果在子组件中修改 props ，Vue会向你发出一个警告、报错，这就形成了一个单向数据流。因此我们可以在父组件使用子组件的标签上声明一个监听事件，在子组件想要修改时使用$emit触发事件并传入新的值，让父组件进行修改。.sync修饰...

由于用户资料数据是需要在多个组件中共享的数据，所以我们按照定好的原则，如果接口获取到的数据需要共享，那么该状态数据的操作，我们都放到vuex中来集中管理 在进行路由跳转时，获取用户个人信息,保存到vuex 1 actions --> mutations ---> status在路由守卫中，发ajax请求 进入主页后，从vuex中取出数据 ...

在vue-router操作时，经常会使用route和router两个对象$route对象 $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

当我们进入首页的时候都是先挂载在App.vue主组件上，显示不同的组件 一般的人资管理后台都是两个一级路由，分别是Login登录页和Layout具体内容页，和若干个二级路由和三级路由组成。<template> <div id="app"> <router-view /> </div></template><script>export default { name: 'App'}...

1.说说VUE的优点？答：轻量级框架：20kb,(react:60kb),只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改...

一、概念　　通过改变 URL，在不重新请求页面的情况下，更新页面视图。二、实现方式　　更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：1.Hash --- 利用 URL 中的hash("#");2.利用History interface 在HTML5中新增的方法。Vue 中，它是通过mode这一参数控制路由的实现模式：const router=new VueRouter({ ...

1.怎么重定向页面？一：const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ]})二：const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ]})三：const router = new VueRouter({

这里写自定义目录标题 一、什么是语法糖？ 语法糖也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法，在不影响功能的情况下，添加某种简单的语法也能实现效果，这种语法对计算机没有任何影响，但是对于程序员更方便，通常增加的语法糖能够增加程序员的可读性，减少出错的机会。 使用语法糖可以简化代码，更便于程序员开发。 二、VUE中语法糖有