weixin_42331327的博客

众所周知Vue是一个单页应用，默认情况下说有的路由地址都会在同一个页面中打开，但是在一些实际情况中需要新开页面；可以使用以下方法进行解决：const routeLink = this.$router.resolve({ path: '/index' }) window.open(routeLink.href, '_blank')...

在使用element-ui中的tabs组件进行切换时，出现tabs中的table高度变小，如下图：第一次加载时切换到第二个tab table高度变小切换回第一个tab每次进行切换的时候会使table的高度变小,原因未知；但是存在如下解决方案// tabs被点击 tabClick ({ name }) { this.$nextTick(() => { // 页面加载完成后，重新渲染表格 // forname 为table的ref

1.创建组件// html // 1.创建组件内容 <template id='userCardTemplate'> <style type="text/css"> .container{ background: #eee; border-radius: 10px; width: 500px; padding: 20px } </style> <div class="container">

1.模板 vs JSXVue的模板近似常规的HTML,只是多了一些属性。React使用的JSX语法的模板 ，JSX值是javeScript混合这XML语法。Vue的模板语法去除了往视图/组件中添加逻辑的诱惑，保持了关注点分离。Vue在技术上也支持render函数和JSX,但只是不是默认而已。2.状态管理 VS 对象属性应用中的状态是React关键的概念，也有一些配套框架设计为管理一个大的state对象，如Redux。此外，state对象在React应用中是不可变的，意味着它不能被直接改变（不一定正

ref接受一个参数值并返回一个响应式且可改变的ref对象 1. ref对象拥有一个指向内部值的单一属性 .value 2. 当ref在模板中使用的时候，他会自动解套，无需在模板内额外书写 .value const count = ref(0) const countAdd = ()=>{ count.value ++ }reactive接收一个普通对象然后返回该普通队形的响应式代理，等同于2.x的Vue.observable()1. 响应式转换是“深层的”：会影响

创建项目vue create demo升级3.0注意区分： VueCLI3.0和Vue3.0由于 vue-cli 没有直接支持创建 Vue3.0 项目，所以需要通过插件升级，我们输入指令：vue add vue-next升级后的版本 "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0-beta.1", "vue-class-component": "^8.0.0-0", "vue-router": "

使用 vue create demo 创建项目的时候出现如下报错：错误提示：ERROR command failed: npm install --loglevel error一、出现这个错误，首先需要排除，node，npm的版本问题。二、然后尝试清除npm缓存：npm cache clean --force三、关键方法：使用这个方法解决，GitHub上大拿们给的方法：I am using “vue-cli 3.0.0-rc.1”, I solve the problems by set

1.父组件调用子组件的方法给子组件添加 ref 属性通过 this.$refs.属性名.子组件的函数名 即可触发子组件的函数2.子组件调用父组件的方法 子组件通过 ==this.$emit(函数名,参数)== 触发父组件的方法。3.兄弟组件方法的相互调用子组件1中父组件的方法(this.$emit(函数名,参数));通过父组件去触发子组件2的方法（参考：父组件调用子组件的方法）示例代码如下// 父组件<template> <div> <t

报错信息如下报错结果显示超过最大调用堆栈大小（并不清楚）查询一些信息后发现引入的组件名和当前文件的命名重复了，修改之后就好了

import { Component, Vue,Watch } from 'vue-property-decorator';@Component({})export default class App extends Vue { private transitionName = ""; /* 查看路由状态并做出相应动画跳转 * */ @Watch('$route',{immediate:true}) private changeRouter(){ console

计算属性（computed）作用：减少模板中的计算逻辑进行数据缓存依赖固定的数据类型（响应式数据）使用：在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果通过getter/setter实现对属性数据的显示和监视侦听器（wathc）作用：比computed更加灵活watch中可以执行任何逻辑，比如：函数节流、Ajax异步数据获...

多页应用通过连接跳转页面，且在每个页面中均会请求html文件。单页应用（SPA）第一次进入页面的时候请求一个html文件，刷新清楚一下。切换到其他组件，此时路径也相应变化，但是没有新的html文件请求，页面的内容也变化了。原理：js会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是通过后端来做而是前端来做。判...

计算属性compute作用：和普通属性一样在模板中使用计算属性，当data中对应的数值发生变化时，计算属性的值会发生相应的变化，计算属性compute是基于他们的依赖（如果是实例范畴之外的依赖，比如非响应式的notreactive是不会触发属性更新的）进行存储（计算属性的结果会被存储）。只有相关依赖发生改变时才会重新求值，未改变只会返回之前的结果，不在执行函数。示例代码html&lt;di...

点击

Vue事件API众所周知，Vue.js为我们提供了四个事件API，分别是 $on，$once，$off，$emit。初始化事件初始化事件在vm上创建一个_events对象，用来存放事件。_events的内容如下：{ eventName: [func1, func2, func3]}存放事件名以及对应执行方法。/*初始化事件*/export functi...

1、Vue父组件向子组件传递事件/调用事件&lt;div id="app"&gt; &lt;hello list="list" ref="child"&gt;&lt;/hello&gt; &lt;br /&gt; &lt;button v-on:click="myclick"&gt;调用子组件中的方法&lt;/