vue.js
文章平均质量分 59
Lin'er jingle
这个作者很懒,什么都没留下…
展开
-
axios封装,使用拦截器统一使用接口
1. 在src目录下创建一个utils文件夹(文件名可自取)在这个文件夹下创建request.js文件 import axios from 'axios'; import { Loading } from 'element-ui'; //使用element-ui的加载组件(看个人喜欢,也可以用别的,或者不用)2. 创建axios实例 const service = axios.create({ baseURL: '/api',//域名url timeout: 5000 }原创 2021-09-28 15:34:32 · 255 阅读 · 0 评论 -
国际化插件vue-i18n的简单使用
安装在vue项目中安装vue-i18n:npmnpm/cnpm install vue-i18nyarnyarn add vue-i18n使用在vue项目中使用vue-i18n:main.js......import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ locale: 'zh', messages: { 'zh': require('@/assets/lang/zh.js原创 2021-07-07 09:33:10 · 312 阅读 · 0 评论 -
vue+element-ui创建调查问卷
使用vue+element-ui制作创建调查问卷功能;代码如下:(只是一些简单功能)<template> <div class="container"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="标题"> <el-input v-model="form.name"></el-input>原创 2021-04-19 17:08:49 · 6060 阅读 · 2 评论 -
vue 查看全部和收起组件
1. 组件书写代码如下:HTML<template> <div class="content_warp"> <div class="container"> <div class="item" :style="{fontSize: fontSize + 'px', textIndent: (fontSize*2) +'px'}" v-if="flag"> <span>{{content}}</span原创 2021-03-12 17:51:32 · 499 阅读 · 0 评论 -
vue3.x使用ref获取dom元素
1. 在vue3.x中使用ref获取dom直接上代码:<template> <div class="container"> <input ref="myRef" value="123" type="text"> </div></template>import { onMounted, ref } from 'vue'export default { setup(){ let myR原创 2021-01-19 17:50:37 · 5773 阅读 · 5 评论 -
vue3.x使用vuex
在vue3.x项目中需使用vuex4.x版本;安装直接下载/CDNhttps://unpkg.com/vuexnpm /cnpm /yarnnpm install vuex@next --savecnpm install vuex@next --saveyarn add vuex@next --save项目中使用在根目录下创建store文件夹,在store文件夹下创建index.js文件,在index.js文件中书写代码,与vue2.0中使用的vuex相差不大,直接上代码:import原创 2021-01-12 15:33:34 · 12261 阅读 · 7 评论 -
vue3.x使用vue-router
在vue3.x项目中,需使用vue-router版本为4.x,否则使用时将会报错;安装直接下载/CDNhttps://unpkg.com/vue-router@4npm/cnpm/yarnnpm install vue-router@4cnpm install vue-router@4yarn add vue-router@4使用首先在根目录下创建一个router的文件夹,在router文件夹下创建一个index.js的文件,最后在index.js文件下进行路由配置,配置基本和vue2.原创 2021-01-12 15:28:20 · 625 阅读 · 0 评论 -
创建vue3.x项目
使用vite创建一、什么是vitevite是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。它主要具有的特点有以下:快速的冷启动即使的模块热更新真正的按需编译二、使用vite创建vue3.0项目创建项目npmnpm init vite-app <project-name>cd <project-name>npm installnpm run dev原创 2021-01-12 15:18:46 · 202 阅读 · 0 评论 -
vue中vuex的使用
vuex是什么?vue官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex的组成部分state (状态)action (动作,业务交互)mutation (修改state)getter (获取数据的)vuex的安装直接下载/CDNhttps://unpkg.com/vuexNPMnpm/cnpm install vuex --save# If using vue .原创 2020-10-16 11:23:06 · 141 阅读 · 0 评论 -
vue 模糊搜索
首先创建一个input框,用v-model双向数据绑定,方便获取input框的value值<template> <div class="home"> <input type="text" placeholder="请输入城市名称" v-model="inputValue" @input="searchValue()" /> //搜索到的内容区域 <div v-for="item in listValue" :key="item.id">原创 2020-05-08 17:33:17 · 184 阅读 · 0 评论 -
vue 上传文件
1.创建上传文件标签<input type="file" id="file" @change="changeFile()" ref="intFile" />考虑到vue要获取节点进行操作,所以给标签添加一个ref,方便获取属性并给标签添加事件2.change事件changeFile(e){ var intFile = this.$refs.intFile; this.fi...原创 2020-05-08 09:56:34 · 208 阅读 · 0 评论 -
无缝连接轮播滚动效果
在vue-cli中下载swipernpm install swiper/cnpm install swiper/yarn add swiper在组件中引入import Swiper from 'swiper'import 'swiper/dist/css/swiper.css'然后实例化mounted(){ new Swiper('.swiper-container', { ...原创 2019-10-16 16:28:15 · 207 阅读 · 0 评论 -
路由的拓展(路由 激活/缓存/动画/数据预载/懒加载)
路由激活A: 自己书写一个类名或是使用第三方给的类名B:在router-link组件身上添加一个 (类名-class) 的属性<router-link to = "/home" active-class = "active"/>路由的缓存在router-link组件上添加一个属性 keep-alive <router-link to = "/...转载 2019-04-29 16:43:16 · 207 阅读 · 0 评论 -
动态组件,异步组件
动态组件动态组件就是 component组件 , 组件身上可以绑定一个is属性, 用来表示某一个组件is属性我们html中有一些标签是规定它的直接子元素的 , 比如 ul li ol li selector option table这类型标签不能直接用常规的组件使用方式, 必须在对应直接子元素上绑定 is属性 <div id="app"> <...转载 2019-04-24 22:31:27 · 115 阅读 · 0 评论 -
路由进阶部分 -- 导航守卫( 路由守卫 )
路由进阶部分 – 导航守卫( 路由守卫 ) - 守卫路由 - 进 - 举例: 携带数据进入 - 出 - 举例: 事情完成才能出来导航守卫一共有三种形式A: 全局导航守卫全局前置守卫 router.beforeEach(fn)fn中有三个参数(to,from,next)全局的解析守卫在 2.5.0+ 你可以用 router.beforeResolv...转载 2019-04-29 10:42:17 · 4580 阅读 · 1 评论 -
vue底层原理之虚拟DOM(VDOM)和diff算法
虚拟DOM(VDOM)和diff算法1. 虚拟DOM是什么?虚拟DOM利用了js对象的object的对象模型来模拟真实DOM,结构是树形结构优点:速度比操作真实DOM快。缺点:(1). 更多的功能意味着更多的代码。幸运的是Vue.js 2.0仍然是相当小的(21.4kb当前版本)。(2). 虚拟DOM需要在内存中的维护一份DOM的副本。在DOM更新速度和使用内存空间之间取得平衡。应用...转载 2019-04-21 15:19:08 · 676 阅读 · 0 评论 -
vue 组件
vue组件1.组件化思维组件化针对的是页面中的整个完整的功能模板划分 (项目的分工)2.组件的概念( 一个文件 )组件是一个html、css、js、image等外链资源,这些部分组成的一个聚合体优点:代码复用,便于维护划分组件的原则:复用率高的,独立性强的3.Vue中如何定义, 使用, 操作组件组件(1). Vue.extend() ===>...转载 2019-04-21 15:32:48 · 647 阅读 · 0 评论 -
webpack的基本使用
前端的工程化工具- grunt- 资源打包- 单元测试- gulp- 流式操作工具- 资源打包- browserify(webpack前身)- webpack 【 主流 】- 资源打包工具, 比如 js文件打包压缩 , img 打包压缩 。。。- 可以自动解决模块化依赖问题- es6模块化一. webpack基础认识1. 官网地址- 官网: https://w...转载 2019-04-25 21:39:08 · 127 阅读 · 0 评论 -
vue.js的基础使用
vue.js的使用:下载cdnhttps://cdn.bootcss.com/vue/2.6.10/vue.js本地下载模块化安装npm install vue -D/-S 、 cnpm install vue -D/-S 、 yarn install vue -D/-S引入 <script src=" https://cdn.bootcss.com/...转载 2019-04-17 19:56:07 · 153 阅读 · 0 评论 -
vue组件通信
vue组件通信注意: 组件通信, 无论效果是如何的, Vue都是单向数据流(组件之间的数据通信)父子组件通信绑定的是简单类型数据父组件中定义数据, 通过单向数据绑定的形式, 将数据绑定在子组件身上, 属性是自定义属性,子组件通过配置项中的props接收数据, props可以是一个数组,数组中放的是自定义属性名称那么这个自定义属性可以向data中的数据一样直接在子组件模...转载 2019-04-22 16:57:35 · 112 阅读 · 0 评论 -
vue.js的事件处理
vue.js的事件处理1.事件处理方法可以用v-on指令监听DOM事件,并正在触发是运行一些javascript代码。示例: <div id="example-1"> <button v-on:click="say(hi)">say hi</button> </div> var example1 = new Vue...转载 2019-04-17 21:06:34 · 174 阅读 · 0 评论 -
vue组件的生命周期
vue组件生命周期钩子函数,就是options里面的key, 它的值是函数钩子函数写在其他配置项的后面组件的有哪几个阶段?初始化阶段运行中阶段销毁阶段初始化阶段分为两个大阶段, 每一个大阶段包含两个生命周期钩子函数 ---- 生命周期 --》人的一声 钩子函数 --》 (人在某个阶段做得一些事情, 这些事情是自动触发)有那四个钩子函数...转载 2019-04-22 20:25:38 · 655 阅读 · 0 评论 -
vue-cli的安装
clicli 别名: 脚手架npm < cnpm < yarn (优先级)作用:快速构建vue项目, 底层配置使用的就是webpack版本cli2 cli3安装 npm install @vue/cli -g cli3的版本 npm install vue-cli -g cli2的版本 yarn add @vue/cli...转载 2019-04-28 08:30:57 · 136 阅读 · 0 评论 -
vue.js之ToDoList
学会了基础的vue框架后,可以试着做一些东西了,比如ToDoList这个项目。做ToDoList之前你得先去看或学习下SUI这个框架,做ToDoList可以在这里面找到许多的组件,可以省去很多时间。ToDoList第一步首先创建文件夹取名‘ToDoList’,在文件夹里面创建好html文件,css文件,js文件;在html文件里引入css文件、js文件;引入SUI的 cdn...原创 2019-04-18 22:28:12 · 194 阅读 · 0 评论 -
vue的基础扩展( props属性验证、过滤器、自定义指令、渲染函数 和 jsx、过渡 & 动画)
props属性验证常用形式: props: { key: keyType // key是从父组件获得的自定义属性, 值是我们期望得到的数据类型 }业务:我现在想要 > 1000 我才要, 没有 > 1000 我就不要解决: vue提供了一个 :validator props: { key: { ...转载 2019-04-23 22:10:35 · 1195 阅读 · 0 评论 -
Router
基础vue 路由的mode(模式)有几种, 分别是什么?在那些环境下运行?hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。...转载 2019-04-28 20:26:42 · 125 阅读 · 0 评论 -
动态路由 & 路由传参 & 路由接参
动态路由 & 路由传参 & 路由接参vue cli3 配置反向代理在根目录下面新建一个 vue.config.js // vue.config.js中可以默认直接使用 http-proxy-middleware module.exports = { devServer: { proxy: { '/douban': { //...转载 2019-04-28 22:28:07 · 1227 阅读 · 0 评论 -
vue.js底层的原理
一、深入响应式原理1. 当视图模型(VM)中的数据模型(M)发生改变时, 视图(V)就会进行更新2. Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生改变的时候, 就会触发, 然后wather就会触发, 告诉视图(V)进行重新渲染3. 数据必须放在data选项中才能进行深入响应式底层原理:核心使用的是e...原创 2019-04-19 20:29:29 · 6628 阅读 · 0 评论 -
前端开发的规范
1. 前端的开发规范目录构建的规范命名原则:简洁比如: src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包不使用复数比如: 不使用 imgs docs根目录(root)结构按职能划分比如:1. src 源代码(逻辑)2. doc 文档3. dep 第三方依赖包4. test 测试根据业务逻辑进行...转载 2019-04-16 19:31:25 · 138 阅读 · 0 评论