- 佛语:“赠人玫瑰,手留余香。” 若您感觉博文内容与您有益,请点赞并收藏! 敬请关注作者,海量博文持续更新中。望与各位码友同学习,共进步! 1.介绍 VuePress ,一个全新的基于 vue 的静态网站生成器,实际上就是一个 vue 的 spa ... 佛语:“赠人玫瑰,手留余香。” 若您感觉博文内容与您有益,请点赞并收藏! 敬请关注作者,海量博文持续更新中。望与各位码友同学习,共进步! 1.介绍 VuePress ,一个全新的基于 vue 的静态网站生成器,实际上就是一个 vue 的 spa ...
- 使用命令窗口运行 1. npm run build 每次都打开命令窗口比较麻烦,可以在webstorm内进行配置,从webstorm内启动 选中run下面的edit configurations,scripts里面选择build。 第二步 这样就打包成功了。然后我的项目根目录就会多一个dist文件夹,里面包含static文件夹(存放i... 使用命令窗口运行 1. npm run build 每次都打开命令窗口比较麻烦,可以在webstorm内进行配置,从webstorm内启动 选中run下面的edit configurations,scripts里面选择build。 第二步 这样就打包成功了。然后我的项目根目录就会多一个dist文件夹,里面包含static文件夹(存放i...
- 在Vue2.0路由跳转中,除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。 router.push(location) 1 想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则... 在Vue2.0路由跳转中,除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。 router.push(location) 1 想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则...
- 在项目index.html头部引入这句话: <link rel="icon" href="favicon.ico" type="image/x-icon"> 1 把favicon.ico文件放到项目根目录,和index.html同级。 项目build文件夹里找到webpack.dev.conf.js和webpack.prod.conf.js这两个文件。... 在项目index.html头部引入这句话: <link rel="icon" href="favicon.ico" type="image/x-icon"> 1 把favicon.ico文件放到项目根目录,和index.html同级。 项目build文件夹里找到webpack.dev.conf.js和webpack.prod.conf.js这两个文件。...
- 概述 插槽就是子组件中用slot标签定义的预留位置,可以设置name属性,也可以不设置name属性,设置name的叫具名插槽,不设置name的的叫不具名插槽,在父组件中使用子组件时候可以在使用子组件的标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。 插槽使用的关键在于:在父组件中使用子组件标签的时候可以往子组件内写入htm... 概述 插槽就是子组件中用slot标签定义的预留位置,可以设置name属性,也可以不设置name属性,设置name的叫具名插槽,不设置name的的叫不具名插槽,在父组件中使用子组件时候可以在使用子组件的标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。 插槽使用的关键在于:在父组件中使用子组件标签的时候可以往子组件内写入htm...
- 一、背景 当我们给props,或者data中被观测的对象修改属性的时候,不能直接修改,必须使用Vue.set方法。 Vue.set方法用来修改对象的属性。如果要增加属性的对象是响应式的,那该方法可以确保属性被创建后也是响应式的,同时触发视图更新。 二、基础知识 注:所修改的对象必须为响应式对象,且操作响应式对象的属性也必须是响应式的,能够触发视图更新。否则浏览... 一、背景 当我们给props,或者data中被观测的对象修改属性的时候,不能直接修改,必须使用Vue.set方法。 Vue.set方法用来修改对象的属性。如果要增加属性的对象是响应式的,那该方法可以确保属性被创建后也是响应式的,同时触发视图更新。 二、基础知识 注:所修改的对象必须为响应式对象,且操作响应式对象的属性也必须是响应式的,能够触发视图更新。否则浏览...
- 在vue中,有两套定时器,一套是浏览器API,window对象上的;另一套就是vue/nodejs封装的,需要引入 import { setInterval, clearInterval } from 'timers' 1 建议使用window对象自带的,因为不容易错。 如果一不小心只引入一个,就怎么也清不掉了。 import { setInterval } fr... 在vue中,有两套定时器,一套是浏览器API,window对象上的;另一套就是vue/nodejs封装的,需要引入 import { setInterval, clearInterval } from 'timers' 1 建议使用window对象自带的,因为不容易错。 如果一不小心只引入一个,就怎么也清不掉了。 import { setInterval } fr...
- Vue进阶(六):组件之间的数据传递 Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。 首先用脚手架工具 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下... Vue进阶(六):组件之间的数据传递 Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。 首先用脚手架工具 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下...
- Vue2持续更新过程中,Vue3已经呼之欲出了,目前Vue官网已经显示Vue3在beta进度了。下面我们主要讲解下Vue3的一些新特性。 实践 升级 Vue 3.0 项目 目前创建 Vue 3.0 项目需要通过插件升级的方式来实现,vue-cli 还没有直接支持,我们进入项目目录,并输入以下指令进行升级。 cd vue-next-test vue add vue... Vue2持续更新过程中,Vue3已经呼之欲出了,目前Vue官网已经显示Vue3在beta进度了。下面我们主要讲解下Vue3的一些新特性。 实践 升级 Vue 3.0 项目 目前创建 Vue 3.0 项目需要通过插件升级的方式来实现,vue-cli 还没有直接支持,我们进入项目目录,并输入以下指令进行升级。 cd vue-next-test vue add vue...
- 1、let所声明的变量,只在let命令所在的代码块内有效。 2、不存在变量提升:所声明的变量一定要在声明后使用,否则报错。 一定要先声明,再去使用。let x=x;这样就是错误的 ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。 3、不允许重复... 1、let所声明的变量,只在let命令所在的代码块内有效。 2、不存在变量提升:所声明的变量一定要在声明后使用,否则报错。 一定要先声明,再去使用。let x=x;这样就是错误的 ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。 3、不允许重复...
- 在项目开发过程中,若将页面元素全部绑定于一个表单中,且页面中的某些元素并未直接获得,在获取页面操作值时就会出现意外效果,例如不能重置页面元素。 场景复现 需求:在使用el-select设计表单下拉框时,若后台返回的下拉框数组长度为1,则默认选中第一个元素。 思路:后台返回值后直接将第一个元素的value赋值给el-select的v-model。 created(... 在项目开发过程中,若将页面元素全部绑定于一个表单中,且页面中的某些元素并未直接获得,在获取页面操作值时就会出现意外效果,例如不能重置页面元素。 场景复现 需求:在使用el-select设计表单下拉框时,若后台返回的下拉框数组长度为1,则默认选中第一个元素。 思路:后台返回值后直接将第一个元素的value赋值给el-select的v-model。 created(...
- 人生箴言:感恩 积极 乐观 健康 向上 阳光 大气 blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外。 没有进行任何输入时,不会触发change 在这种情况下,输入框并不会触发change事件,但一定会触发blur事件。在判断表单的修改状态时,这种差异会非常有用,通过change事件... 人生箴言:感恩 积极 乐观 健康 向上 阳光 大气 blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外。 没有进行任何输入时,不会触发change 在这种情况下,输入框并不会触发change事件,但一定会触发blur事件。在判断表单的修改状态时,这种差异会非常有用,通过change事件...
- 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 如何声明自定义指令? 就像vue中有全局组件和局部组件一样,他也分全局自定义指令和局部自定义指令。 let Opt = { bind:function(el,binding,vnode){ }, ... 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 如何声明自定义指令? 就像vue中有全局组件和局部组件一样,他也分全局自定义指令和局部自定义指令。 let Opt = { bind:function(el,binding,vnode){ }, ...
- 在开发前端项目过程中,解决适配性、兼容性问题是经常遇到且费事费力的苦差事,尤其是在开发Vue项目,应用部署在IE(尤其是IE9)上的时候。 在进行动态展示(根据后台返回的表头、表数据展示)搜索结果时,会遇到搜索结果适配屏幕宽度或高度,但是却会出现纵向或横向滚动条的现象,通过F12调试页面元素,会发现动态的增删overflow:auto元素属性,会解决以上问题。由此可知... 在开发前端项目过程中,解决适配性、兼容性问题是经常遇到且费事费力的苦差事,尤其是在开发Vue项目,应用部署在IE(尤其是IE9)上的时候。 在进行动态展示(根据后台返回的表头、表数据展示)搜索结果时,会遇到搜索结果适配屏幕宽度或高度,但是却会出现纵向或横向滚动条的现象,通过F12调试页面元素,会发现动态的增删overflow:auto元素属性,会解决以上问题。由此可知...
- this.$store.dispatch('toShowLoginDialog',false) this.$store.commit('toShowLoginDialog', true); 12 主要区别是: dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)commit:同步操作,写法... this.$store.dispatch('toShowLoginDialog',false) this.$store.commit('toShowLoginDialog', true); 12 主要区别是: dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)commit:同步操作,写法...
上滑加载中