Vue
zayzy
安心努力
展开
-
安装依赖时-g,-s,-d的区别
安装依赖时的简写原创 2023-02-09 10:07:59 · 236 阅读 · 0 评论 -
js判断各种类型是否为空
判断是否为空原创 2023-01-10 11:03:14 · 132 阅读 · 0 评论 -
JavaScript 判断空对象、空数组的方法
判断是否为空原创 2023-01-10 11:00:12 · 85 阅读 · 0 评论 -
理解nextTick
理解nextTick()原创 2023-01-09 10:00:57 · 177 阅读 · 0 评论 -
关于watch中deep: true的用法
vue中的深度监听原创 2022-11-17 14:43:18 · 3145 阅读 · 1 评论 -
组件命名规范
组件命名原创 2022-11-08 13:29:56 · 433 阅读 · 0 评论 -
关于export和import
别人写的很清楚的一篇:https://zhuanlan.zhihu.com/p/389813789原创 2022-04-15 15:50:30 · 186 阅读 · 0 评论 -
vue项目如何使用阿里巴巴矢量图标库?
VUE使用阿里巴巴图标库步骤真的非常详细!这位博主太优秀了!转载 2021-08-25 15:35:57 · 264 阅读 · 0 评论 -
关于vue引入element-ui不成功的解决办法
vue中要用到element-ui时,根据官方文档在main.js中写入如下代码:import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', render: h => h(App)});运行时原创 2021-08-21 18:28:00 · 4976 阅读 · 0 评论 -
vue访问图片
首先说明一下我的图片所放位置,接下来用三种方式访问图片:第一种方式:staticstatic静态资源文件访问,原样输出,不参与打包;在打包结束后若路径出现问题,找到config中的index.js,进入后将bulid中的assetsPublicPath:’/‘改为assetsPublicPath:’./’,再重新打包。<img :class="img1" src="../../static/3.jpg" alt=""><img :class="img1" src="../.原创 2021-08-19 10:28:16 · 3115 阅读 · 0 评论 -
vuex中state本地数据持久化
1.下载插件 cnpm i -S vuex-persistedstate2.在store中引入import createPersistedState from 'vuex-persistedstate';3.在store对象中与state属性同级部分,添加新的key为plugins,代码为:plugins: [createPersistedState({ storage: window.sessionStorage, //sessionStorage和 localStorage自行切换原创 2021-08-19 09:35:31 · 147 阅读 · 0 评论 -
vue插槽的理解和使用
首先要理解:插槽是子组件提供给父组件使用的一个占位符,当子组件对父组件提供的部分数据不同时,该部分数据就用插槽展示。如果子组件没有使用插槽,父组件如果需要往子组件中填充模板或者html, 是没法做到的。插槽的理解和使用......原创 2021-08-16 17:42:18 · 85 阅读 · 0 评论 -
路由跳转的3种方式
路由跳转方式一:path路径跳转,传值可以使用params 传值和query传值 (缺点:不能传引用数据类型-数组,对象等)<router-link to="/artlist">小说列表</router-link> -->方式二:命名式路由跳转,name,传值可以使用params和query传值 (优点:可以传基本数据类型和数组,对象)<!-- <router-link :to="{name:'shop',query:{city:cityObj}}">原创 2021-08-15 15:47:07 · 38882 阅读 · 0 评论 -
vue在创建项目时不小心选上代码校验选项(linter/ESlint)后,如何关掉?
在与package.json同级的根目录下,创建一个文件vue.config.js。在该文件中写入如下代码:// vue.config.jsmodule.exports = { devServer: { overlay: { warnings: false, //不显示警告 errors: false //不显示错误 } }, lintOnSave:false //关闭eslint检查 }参考链接:https://原创 2021-08-13 16:17:37 · 769 阅读 · 0 评论 -
初步了解Vuex
1、Vuex概述1.1 Vuex是什么?Vuex是实现组建全局状态(数据),管理的一种机制,可以方便的实现组件之间数据的共享。1.2 Vuex统一管理状态的好处?(1)能够在vuex中集中管理共享的数据,易于开发和后期维护(2)能够高效实现组件之间的数据共享,提高开发效率(3)存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步1.3 什么样的数据适合存储到Vuex中?一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data原创 2021-08-08 11:22:37 · 148 阅读 · 0 评论 -
webpack中的加载器(loader)
一、了解webpack加载器1.webpack加载器(loader)的作用 在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非.js后缀名结尾的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错!less-loader 可以打包处理.less相关的文件sass-loader 可以打包处理.sass相关的文件url-loader 可以打包处原创 2021-08-07 18:24:58 · 1370 阅读 · 2 评论 -
Vuex的核心概念(访问数据)
Vuex的核心概念一、State1.定义2.访问State数据的方式二、Mutation1.定义及作用2.变更Store中的值3.触发mutations传递参数三、Action1.定义及作用2.触发Action3.触发actions异步任务时携带参数四、Getter1.定义及作用2.使用getter注意一、State1.定义State提供唯一的公共数据源,所有共享的数据都要统一放到Store中进行存储。//创建store数据源,提供唯一公共数据const store = new Vuex.Stor原创 2021-08-08 16:59:02 · 513 阅读 · 0 评论 -
html-webpack-plugin插件的使用
一、配置html-webpack-plugin生成预览页面1.运行 npm install html-webpack-plugin -D命令,安装生成预览页面的插件2.修改webpack.config.js文件头部区域,添加如下配置信息: const HtmlWebpackPlugin = require('html-webpack-plugin') const htmlPlguin = new HtmlWebpackPlugin({ //创建插件的实例对象 template原创 2021-08-07 15:49:53 · 298 阅读 · 0 评论 -
Element-UI的基本使用
Element-UI ,一套为开发者,设计和产品经理准备的基于Vue 2.0的桌面端组件库1.基于命令行方式手动安装(1)安装依赖包 npm i element-ui -S(2)导入Element-UI相关资源//导入组件库import ElementUI from 'element-ui';//导入组件相关样式import 'element-ui/lib/theme-chalk/index.css';//配置Vue插件Vue.use(ElementUI);2.基于图形化界面自动安装原创 2021-08-07 22:20:11 · 96 阅读 · 0 评论 -
webpack_vue
一、在webpack中配置Vue组件的加载器1.运行npm i vue-loader vue-template-compiler -D命令2.在webpack.config.js配置文件中,添加vue-loader的配置项如下:const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = { module: { rules: [ //...其他规原创 2021-08-07 19:05:10 · 86 阅读 · 0 评论 -
webpack的安装配置及自动打包
一、了解webpack当前web开发面临的困境1.文件依赖关系错综复杂2.静态资源请求效率低3.模块化支持不友好4.浏览器对高级javascript特性兼容程度较低webpack是前端项目构建工具(打包工具)提供了有好的模块化支持,以及代码压缩混淆,处理js兼容问题,性能优化等强大功能二、在项目中安装和配置webpack1.运行npm install webpack webpack-cli -D命令,安装webpack相关的包2.在项目根目录中,创建名为webpack.config.js原创 2021-08-07 11:38:45 · 600 阅读 · 0 评论 -
async/await的接口调用
async/await基本用法async/await是ES7引入的新语法,可以更加方便的进行异步操作async关键字用于函数上(async函数的返回值是Promise实例对象)await关键字用于async函数当中(await可以得到异步的结果)处理单个异步请求的用法async function queryData(id) { const ret = await axios.get('/data'); return ret;}queryData.then(ret => { co原创 2021-08-10 08:18:57 · 3299 阅读 · 0 评论 -
axios的接口调用
1. axios的基本特性axios(官网)是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特征:支持浏览器和node.js支持promise能拦截请求和响应自动转换JSON数据2. axios的基本用法//引入axios.jsaxios.get('/adata') .then(ret => { //data属性名称是固定的,用于获取后台响应的数据 console.log(ret.data) })3. axios的常用APIg原创 2021-08-09 23:04:10 · 1720 阅读 · 0 评论 -
fetch用法
1 fetch概述1.1 基本特性更加简单的数据获取方式,功能更强大、更灵活,可以看做是xhr的升级版基于Promise实现1.2 语法结构fetch(url).then(fn2) .then(fn3) …原创 2021-08-09 17:47:12 · 650 阅读 · 0 评论 -
fetch_put请求方式的参数传递
fetch('books/123',{ method:'put', body:JSON.stringify({ uname:'lisi', age:15 }) headers:{ 'Content-Type':'application/json', }}).then(data => { return data.text();}).then(ret => { //这里才是得到的最终数据 console.log(ret);})//后台接收参数为req.body.u原创 2021-08-09 17:36:40 · 1459 阅读 · 0 评论 -
fetch_post请求方式的参数传递
根据headers的不同:fetch('books',{ method:'post', body:'uname=lisi&pwd=123', headers:{ 'Content-Type':'application/x-www-form-urlencoded', }}).then(data => { return data.text();}).then(ret => { //这里才是得到的最终数据 console.log(ret);})//后台接收参数为re原创 2021-08-09 17:31:34 · 3812 阅读 · 0 评论 -
fetch_delete请求方式的参数传递
fetch('/abc/id=123',{ method:'delete'}).then(data => { return data.text();}).then(ret => { //这里才是得到的最终数据 console.log(ret);})//后台接收参数为req.params.id原创 2021-08-09 17:21:32 · 1491 阅读 · 0 评论 -
fetch_get请求方式的参数传递
传统的url参数写法:fetch('/abc?id=123').then(data => { //默认是get //得到的是一个promise对象,用于获取后台返回的数据 return data.text();}).then(ret => { //这里才是得到的最终数据 console.log(ret);})//后台接收参数为req.query.idRestful形式的url参数写法:fetch('/abc/id=123',{ method:'get'}).then(原创 2021-08-09 17:17:52 · 4520 阅读 · 0 评论 -
Promise常用的API
1.实例方法p.then() 得到异步任务的正确结果p.catch() 获取异常信息p.finally() 成功与否都会执行//用法 .then(function(data){ console.log(data); }) .catch(function(data){ console.log(data); }) .finally(function(){ console.log('finished'); });//举例function foo() { return n原创 2021-08-09 16:07:48 · 325 阅读 · 0 评论 -
then参数中的函数返回值
1. 返回Promise实例对象返回的该实例对象会调用下一个then2. 返回普通值返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值....then(function(data){ return 'hello'; //当返回值是一个普通值时,会默认产生一个promise实例对象调用下一个then,保证可以进行链式操作}).then(function(data){ //控制台输出的是hello console.log(data);})...原创 2021-08-09 15:51:15 · 3345 阅读 · 0 评论 -
异步调用及promise基本用法
1.promise用法1.1 异步调用1.1.1 异步效果分析①定时任务②Ajax③事件函数1.1.2 多次异步调用的依赖分析多次异步调用的结果顺序不确定异步调用结果如果存在依赖需要,要用嵌套1.2 promise概述promise是异步编程的一种解决方案,从语法上来讲,Promise是一个对象,从它可以获取异步操作的消息。使用Promise主要有以下好处:可以避免多层异步调用嵌套问题(回调地狱)Promise对象提供了简洁的API,使得控制异步操作更容易Promis原创 2021-08-09 11:51:51 · 588 阅读 · 0 评论 -
前后端交互模式(接口调用方式及url两种形式)
1.1 接口调用方式①原生ajax②基于JQuery的ajax③fetch④axios1.2 url地址格式1.2.1 传统形式的url格式:schema://host:port/path?query#fragment①schema:协议。例如http、https、ftp等②host:域名或者IP地址③port:端口,http默认端口80,可以省略(域名+端口可以唯一确定互联网当中某一台电脑中的某一个应用程序)④path:路径,例如/abc/a/b/c⑤query:查询参数,原创 2021-08-09 11:13:34 · 1168 阅读 · 0 评论 -
vue常见面试题
面试题1: v-if和v-show的区别?v-if隐藏显示元素是真正的将元素从dom结构中移除或者重新生成; 而v-show仅仅是是否设置元素的display:none样式.面试题2: 你觉得v-if和v-show从效率上来讲谁的效率高?v-show的效率高。v-if的原理是根据判断条件来动态的进行增删DOM元素,v-show是根据判断条件来动态的进行显示和隐藏元素,频繁的进行增删DOM操作会影响页面加载速度和性能。面试题3: 请你谈谈回流和重绘??回流和重绘...原创 2021-07-31 11:43:57 · 96 阅读 · 0 评论 -
Vue脚手架的创建方式
1.基于 交互式命令行 的方式,创建新版vue项目vue create my-project2.基于 图形化界面 的方式,创建新版vue项目vue ui3.基于 2.x的旧模板,创建旧版vue项目vue install -g @vue/cli-initvue init webpack my-project...原创 2021-08-07 19:33:21 · 129 阅读 · 0 评论