vue常见问题随笔集】的更多相关文章

1.vuex操作对应关系 设置          触发/获取 action <-> dispatch mutations <-> commit getters <-> mapGetters state <-> mapState…
VUE常见问题 对于MVVM的理解 MVVM 是 Model-View-ViewModel 的缩写 Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑 View 代表UI 组件,它负责将数据模型转化成UI 展现出来. ViewModel 监听数据模型的改变和控制视图行为.处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model…
Q:我给组件内的原生控件添加事件,怎么不生效了!!! <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--> <!--// 错误例子1--> <el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input> <!--// 错误例子2--> <router-link :to="item.menuUrl&qu…
一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("…
a.VScode保持vue语法高亮的方式: 1.安装插件:vetur.打开VScode,Ctrl + P 然后输入 ext install vetur 然后回车点安装即可. 2.在 VSCode中使用 Ctrl+Shift+P打开命令面板,输入Preferences: Open Settings(JSON). 3.在配置对象里加上key和value 1 "emmet.syntaxProfiles": { 2 "vue-html": "html",…
1.点击刷新当天组件 1.可以在query中添加一个时间戳,缺点就是不好看 2.加一个重定向页面redirect页面,然后在beforecreate时this.$router.replace原路径 2.路径的参数不同,导致请求的数据相同,但还是相同的组件 官方推荐:在该组件中使用 watch: { '$route' (to, from) { // 对路由变化作出响应... } }或者: beforeRouteUpdate (to, from, next) { // react to route…
vue常见问题 1.在自定义组件里,你可以像任何普通元素一样用v-for.eg1: <my-component v-for="item in items"></my-component> 然而他不能自动传递数据到组件里,因为组件有自己独立的作用域. 这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. 为了传递迭代数据到组件里,我们要用 props : props基础示例 下面的代码定义了一个子组件my-compo…
Front-End 前端开发工程师面试宝典!   (本文部分有转载,不定期更新!)             前言(README.md) 本仓库是我整理的前端常见面试题,大部分由我整理,其中个别部分参考网上其他资料,感谢! 本资料仅供大家学习参考使用!欢迎大家Star和提交issues. NO.1 README NO.2  简历经验分享 NO.3  angular常见问题 NO.4 前端面试宝典第一版 NO.5 前端笔记版本第二版 NO.6 前端笔记版本第三版 NO.7 前端笔记版本第四版 NO.…
vue框架篇 vue的优点 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb: 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习: 双向数据绑定:保留了angular的特点,在数据操作方面更为简单: 组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势: 视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作: 虚拟DOM:dom操作是非常耗费性能的,不再使用原生的dom操作…
快捷键 Ctrl + Shift + F:在文件夹中搜索; Ctrl + Shift + P:命令面板; Ctrl + Shift + T:重新打开 关闭的编辑页面; Ctrl+Shift+PgUp/PgDown:将编辑器(当前tab)向左或向右移动 `Ctrl + ``:集成终端; Ctrl + ,:设置界面; Ctrl + F2:批量替换当前文件中所有匹配的文本; Ctrl + Alt +向上箭头:复制光标向上或者向上批量添加内容 Ctrl + Alt +右箭头:将选项卡交换到不同的组 Ct…
总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev修改 webpack.base.config.js 配置文件 { test:/\.less$/, loader:'style-loader!css-loader!less-loader' } 在使用时 在style标签中加入 lang="less" 也可以加上scoped代…
前言 本文也会在github上我的web-study仓库中同步更新,欢迎star. 戳这里,传送 准备工作 判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm install -g cnpm --registry="cnpm"全局安装淘宝cnpm. 开发工具选择很多,VUE无专用开发工具,开发项目多以SPA形式体现,本例使用 Visual Studio Code. 调试工具选择很多,官方推荐 vue-devtools . 安装方法:FQ或者githu…
Vue Router 常见问题 用于记录工作遇到的Vue Router bug及常用方案 router.push报错,Avoided redundant navigation to current location: "/xxx" 大意为 路由频繁点击导致路由重复,该报错对路由跳转功能没有任何影响 解决方案:重写push方法 将异常捕获就不会报错了 let routerPush = VueRouter.prototype.push; VueRouter.prototype.push =…
1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.component('mine',{ template:'#mineTpl', props:['name','title','city','content'] }); var v=new Vue({ el:'#vueInstance', data:{ name:'zhang', title:'this…
涉及技术栈 CLI: Vue-CLI UI: Element HTML: Pug(Jade) CSS: Less JavaScript: ES6 正文: polyfill 与 transform-runtime 首先,vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件,该插件多数情况下都运作正常,可以转换大部分 ES6 语法. 但是,存在如下两个问题: 异步加载组件时,会产生 polyfill 代码冗余 不支持对全局函数与实例方法的 poly…
最近在调研微信小程序开发,对于一个前端小白来说,在各种框架都还用不熟的情况下,再来开发小程序确实还是不容易. 小程序出来之初,听过演讲,看过一点点儿视频,感觉和angular语法有点相似(PS:那是也是只了解一点点儿angular语法): 近两天开始尝试开发小程序,讲真,语法和angular和vue都很相似,小程序提供的语法现在还算全面,很多方法都有提供: 下面简述一下常用方法的使用: 一:数据绑定: html js 直接把数据写在data里面就行了,这样数据可以直接渲染到页面上, 那么问题来了…
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数据模型转化成UI 展现出来.ViewModel 监听模型数据的改变和控制视图行为.处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View.在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 View…
目录 一.vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发 二.vue用splice删除多维数组元素导致视图更新失败情况 三.vue项目如何部署到php或者java环境的服务器? 四.vue-router各种路由及跳转 五.vue-router如何取参? 六.vue中如何深度watch? 七.vue生命周期及所有东西 八.vue-router路由拦截中间件 九.axios请求拦截中间件处理 十.autoprefixer版本设置不能使用默认,browsers: ['la…
常识 1.computed计算属性,使用的属性必需在data里面声明. computed: { canLogin: function(){ //注意这里的依赖的属性必需在data里面声明 return this.name && this.password; } } Webpack问题 1.模块里面使用JSON.stringify和 typeof,报:Uncaught TypeError: Cannot assign to read only property 'exports' of #&…
列表进入详情页的传参问题. 例如商品列表页面前往商品详情页面,需要传一个商品id; <router-link :to="{path: 'detail', query: {id: 1}}">前往c页面</router-link> c页面的路径为http://localhost:8080/#/detail?id=1,可以看到传了一个参数id=1,并且就算刷新页面id也还会存在.此时在c页面可以通过id来获取对应的详情数据,获取id的方式是this.$route.qu…
本文主要介绍Vue SSR(vue服务端渲染)的应用场景,开发中容易遇到的一些问题,提升ssr性能的方法,以及ssr的安全性问题. SSR的应用场景 1.SEO需求 SEO(Search Engine Optimization,搜索引擎优化),是一种利用搜索引擎规则,提高网站在搜索引擎内自然排名的技术.通常这需要页面内容在页面加载完成时便已经存在.SEO需求的存在与互联网技术的发展历程密不可分.在互联网产生之初,网页使用超文本链接协议,将服务器的信息传递给客户端.而后出现了专门为人们检索信息的搜…
Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘. 1.js 路径问题 脚手架默认打包的路径为绝对路径,改为相对路径.修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘/’ 改为 ‘./’ build: { assetsPublicPath: './' } 2.img 路径问题 在 build/utils.js 文件中 ExtractTextPlugin extract 节点下,添加一行:publicP…
(一)eslint静态检查 在大家用vue-cli创建工程的时候,会有一项,使用使用eslint,如果选择了y,那么工程就会安装并启用eslint. 这里列举一下常见的错误: 1.多余的分号 2.定义了却未使用的变量 3.结尾多余空格 4.超过一行的空行 5.代码尾行应该有空行 错误肯定是列举不完的,那么提示错误的时候,我们应该先去看提示信息(翻译),如果发现没有错误,可以对照eslint的官方文档 在大家适应了eslint的写法后,效率和正确率会直线上升,这里安利下我的另一篇文章,提升效率的e…
1. 报这个错的  都是关键字问题,不要用关键字 做为组件的名字,不然肯定都会报错,如果找不到就一个字母的看,我就是 忘记改组件的名字导致报错,这个问题   改个名字就好,切记改全不然只有页面报错,文档没有提示 全家桶--常见问题 参考链接 https://www.cnblogs.com/blackchaos/p/8717138.html…
1. vue2.0 给data对象新增属性,并触发视图更新  $set this.$set(this.ossData, "signature", 222) // 正确用法 // 数据 data() { return { ossData: { signature: '' } } } // 正确用法 this.$set(this.ossData, "signature", 222) // 错误用法 this.ossData.signature = 24 2. el-di…
一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时 在style标签中加入 lang="less" 也可以加上scoped代表样式只在此作用域中有效. 2.使用element插件时修改其样式,在vue中不起作用,这里有几种方法可以尝试 如果 style 中加了 scoped 去掉它. 在要改变的样式前加 /deep/ vue-cli3.x 新特性及踩坑记 /deep/.el-submenu_…
一.判断手机/PC浏览器语言 navigator.language // 返回语言代码 语言代码文档: http://www.lingoes.cn/zh/translator/langcode.htm 二.获取滚动条位置 // html结构 <template lang="pug"> div.home-box(@scroll="scorllChangeColor") <template> // methods中声明方法 methods: {…
webpack项目中自动引入全局scss变量文件 假设我们有一个公共的scss变量文件variables.scss /*存放所有全局变量*/ $card-title:#C7D200; //首页 卡片标题颜色 $bc-color:#182037; $hoverColor: #7abef9; //链接hover颜色 $fontColor: #E6EFFF; //字体颜色-白色 webpack要识别scss,需要先安装sass的loader npm install --save-dev sass-lo…
以下是本人在用vue cli 开发项目里遇到的最基本的问题及解决方案汇总.没啥很多技术性的东西,各位看个乐呵就行~ 1.vue-cli 创建的项目各文件夹的含义 注意:通过vue-cli 4 创建的项目中没发现 static文件夹.src下面的 pages 变成了 views. 更详细的可查看:vue-cli脚手架目录一览 2.引用css的方式 2.1 js中引入方法 import './assets/css/global.css' /*引入公共样式*/ 公共样式一般写在main.js中,如下图…
为什么 data 要写成函数,而不允许写成对象? Vue 中常说的数据劫持到底是什么? Vue 实例中数组改变 length 或下标直接赋值什么不能更新视图? http://www.sohu.com/a/318263870_463987…