vue大全(更订中)
vue整理大全/项目实战带动技术的增长/希望对您有帮助/
骑猪去兜风z1
python后端开发,如果你看见,一个正在写bug的,头发茂密的调包侠,正是在下
展开
-
封装websocket请求-----vue2
(875条消息) 封装websocket请求-----vue项目实战(完整版)_vue websocket封装_winne雪的博客-CSDN博客。原创 2023-06-25 10:40:43 · 1695 阅读 · 0 评论 -
vue3---/组合式api和配置项api/vue3 之vue实例/创建vue3 项目/setup/ ref函数/reactive函数/计算,监听属性/生命周期/toRef/vue3 setup写法
Vue3的变化# 1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%# 2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking# 3.拥抱TypeScriptVue3可以更好的支持TypeScript# 4.新的特性Composition API(组合API)setup配置ref与reactivewatch与watchEffectprovide与inject新的内置组件。原创 2023-06-19 16:16:06 · 217 阅读 · 0 评论 -
vue07---elementui使用/
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。# vuex :状态管理器---》存数据(变量)的地方,所有组件都可以操作。备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写。原创 2023-06-14 21:44:20 · 1449 阅读 · 0 评论 -
vue06---解析一下vue项目/ 登录小案例/scoped/ref属性/props其它/混入mixin/插件/Elementui
【代码】vue06---解析一下vue项目/ 登录小案例/scoped/ref属性/props其它/混入mixin/插件/Elementui。原创 2023-06-14 17:17:22 · 71 阅读 · 0 评论 -
vue05--- 动态组件/插槽/vue-cli创建项目/vue项目目录结构/vue项目编写规范/es6导入导出语法
node_modules # 文件夹,放了该项目所有的依赖,很小很多,以后把项目传给别人,这个要删除 ,别人拿到执行 cnpm install 安装依赖。-类似于python解释器,一路下一步安装---》选择安装位置---》添加到环境变量(以后再任意位置执行node或npm都会找到)2 npm 安装第三方模块,速度很慢,淘宝做了个cnpm,以后咱们可以使用cnpm替代npm,会去淘宝镜像站下载,速度快。-assets # 文件夹,放一些静态资源,图片,js,css。原创 2023-06-14 16:53:51 · 881 阅读 · 0 评论 -
vue04---计算属性/监听(侦听)属性/Vue生命周期/组件介绍和使用/组件间通信/ref属性
组件就是:扩展 HTML 元素,封装可重用的代码,目的是复用例如:有一个轮播图,可以在很多页面中使用,一个轮播有js,css,html组件把js,css,html放到一起,有逻辑,有样式,有html#组件的分类:全局组件:可以放在根中,可以在所有组件中使用局部组件:只能在当前组件中使用# 1 全局组件是使用Vue.component定义的,可以在全局任意组件中使用# 2 局部组件是定义在某个组件内的:components,只能用在当前组件中。原创 2023-06-14 16:35:55 · 670 阅读 · 0 评论 -
vue03---表单控制/购物车案例/v-model进阶/与后端交互三种方式
【代码】vue03---表单控制/购物车案例/v-model进阶/与后端交互三种方式。原创 2023-06-14 16:27:55 · 111 阅读 · 0 评论 -
vue02---事件指令/属性指令/style和class/条件渲染/列表渲染/事件处理/数据双向绑定/过滤案例
style 和 class 也是属性,可以使用属性指令 :class= :style=如果这样,name='xx' 就写死了,我们想动态的绑定变量,变量变化,属性的值也变化。# 数据双向绑定---》只有input标签---》v-model 做双向数据绑定。# 1 v-on:事件名='函数'-----》简写成 @事件名='函数'# v-for:循环字符串,数组,数字,对象。# 根据学生分数,显示学生的 优秀,良好。# 咱们之前写的,其实都是数据的单向绑定。# v-bind:属性名='变量'原创 2023-06-14 16:02:57 · 872 阅读 · 0 评论 -
vue01---前端的发展史/Vue介绍 和 基本使用/Vue之第一个helloworld/插值语法/文本指令之/事件指令
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式js框架与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合# M-V-VM思想:MVVM 是Model(数据)-View(视图)-ViewModel(vm) 的缩写,它是一种基于前端开发的架构模式,是一种事件驱动编程方式-model:前端的数据,在js中,js的变了-view:我们看到的,css,html。原创 2023-06-14 15:45:55 · 89 阅读 · 0 评论 -
node.js源码编译安装(linux)
1. 安装都是编译好的,直接官网找到,需要的版,下载并加入环境变量,即可使用下载node二进制包,此包已经包含node,不需要再编译wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz解压缩tar -zxvf node-v8.6.0-linux-x64.tar.gz进入node文件夹[root@web02 opt]# cd node-v8.6.0-linux-x64/[root@we原创 2022-03-31 19:59:50 · 8236 阅读 · 0 评论 -
vue安装(linux)
1. 介绍简介: 用CNPM/淘宝源的开发者们请注意,淘宝NPM 镜像站喊你切换新域名啦新的Web 站点:https://npmmirror.com,源仓库:https://registry.npmmirror.com。# 老的好像是2022年5月份过期http://npm.taobao.org http://registry.npm.taobao.org # 本文基于源像安装2. 安装# 更新软件源软件列表sudo apt update# 安装nodejssudo原创 2022-04-04 21:55:41 · 6824 阅读 · 0 评论 -
vue---组件化开发
1.组件[component]组件(Component)是自定义封装的功能。在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能。而在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js来定义功能的特效,因此就产生了把一个功能相关的[HTML、css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”。所以,组件就是一个html网页中的功能,一般就是一个标签,标签中有自.原创 2022-03-10 08:46:20 · 2920 阅读 · 0 评论 -
阻止事件冒泡
0. 使用.stop和.prevent1. 示例1:阻止事件冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: tan; height: 200原创 2022-03-11 12:20:29 · 2796 阅读 · 0 评论 -
vue对象的生命周期钩子函数
0. 生命周期介绍:每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数,我们可以使用这些函数,在对象创建的不同阶段加上我们需要的代码,实现特定的功能。1. 声明周期的类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> .原创 2022-03-08 07:27:31 · 3541 阅读 · 0 评论 -
Vue指令系统的常用指令
0. 指令介绍1. 指令 (Directives) 是带有“v-”前缀的特殊属性。2. 每一个指令在vue中都有固定的作用。3. 在vue中,提供了很多指令,常用的有:v-html、v-if、v-model、v-for等等。1. 文本指令v-html和v-textv-text 相当于js代码的innerText,相当于我们上面说的模板语法,直接在html中插值了,插的就是文本.如果data里面写了个标签,那么通过模板语法渲染的是文本内容,这个大家不陌生,这个v-text就是辅助我们使原创 2022-03-09 15:49:08 · 3125 阅读 · 0 评论 -
vue快速入门使用01
1.vue.js库的下载vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的。另外几个常见的工具库:react.js /angular.js官方网站:中文:Vue.jshttps://cn.vuejs.org/英文:Vue.js - The Progressive JavaScript Framework | Vue.jshttps://vuejs.org/官方文档:介绍 — Vue.jshttps://cn.vuejs.org/v2/guide/vu.原创 2022-03-09 15:48:32 · 2746 阅读 · 0 评论 -
vue详解--- es5和es6的基本语法
1.es6的基本语法let:特点: 1.a是局部作用域的function xx(){let a = 'xxoo';} if(){let a = 'ss';} 2.不存在变量提升 3.不能重复声明(var可以重复声明) ,var声明的不能用let再次声明,反之也是4 let声明的全局变量不从属于window对象,var声明的全局变量从属于window对象。关于第4个特点的简单说明: ES5声明变量只有两种方式:var和function。 ES6有let、const、impo.原创 2022-03-01 07:41:07 · 4028 阅读 · 0 评论 -
vue初始化
1. 删除helloword组件,及其相关的内容2. 在src目录下创建settings.js站点开发配置文件:export default { host: "http://www.lyapi.com:8000", }// 或者export default { host:"http://127.0.0.1:8000",}3.在main.js中进行封装到vue对象里面import settings from "./settings"Vue.prototype.$s原创 2022-01-28 21:24:09 · 1867 阅读 · 0 评论 -
vue---多个v-for使用注意
:key 不能一样,每个v-for都要有唯一的key原创 2022-02-13 21:37:49 · 3574 阅读 · 0 评论 -
vue---过滤器
0. 介绍:a. 过滤器,就是vue允许开发者,自定义文本的格式化函数,可以使用在两个地方:输出内容和操作数据中。b. 定义过滤器的方式有两种,全局和局部过滤器一:局部过滤器var vm = new Vue({ el:"#app", data:{}, filters:{ RMB2:function(value){ if(value==''){ return; }else{ return '¥ '+value;原创 2022-02-10 20:34:11 · 2740 阅读 · 0 评论 -
vue---watch(监听)的基本使用
0. watch:介绍a. 实时监听数据属性的变化,监听数据属性,当其发生改变时,触发相应的动作一. 使用案例(1). 监听select选项框select介绍:v-model绑定的是其option的value,切换value,v-model的值也随之改变a. html<el-select v-model="select_data" placeholder="请选择"> <el-option key="1" label="我是给用户看的" value="原创 2022-02-10 20:23:22 · 3454 阅读 · 0 评论 -
Vuex的快速使用及配合浏览器存储
0. Vuex的介绍:a. 前端的公共仓库b.官方介绍:1. Vuex是一个专为vue.js应用程序开发的状态管理模式。2. 当我们构建一个中大型的单页面应用程序时,Vuex可以更好的帮助我们在组件外部统一管理状态。c. vuex3.x的介绍state,驱动应用的数据源;(仓库) view,以声明方式将state映射到视图;(进行存储的时候,需要写函数事件) actions,响应在view上的用户输入导致的状态变化。(调用函数)一. 在项目中快速使用1. 安装p...原创 2022-02-08 11:50:12 · 3489 阅读 · 0 评论 -
vue的v-model绑定在checkbox上
a.v-model 绑定在checkbox复选框上,只有一个的时候,默认是false,勾选上是trueb.如果是多个,会把勾上复选框的值,以列表(数组)的形式返回原创 2022-02-01 22:28:31 · 3341 阅读 · 0 评论 -
前端点击按钮触发计时器
一:前后端分离项目vue中的计时器html<el-input placeholder="请输入验证码" v-model="sms_code"> <template slot="append"> <el-button type="success" round @click="sms_btn" :disabled="sms_status">{{ sms_info }}</el-button>原创 2022-02-02 21:21:32 · 3811 阅读 · 0 评论 -
vue----router.go/push&location.href
0. router.go/push介绍:一句话,用来进行路径跳转的1. 使用router.go// 回到上一页首页this.$router.go(-1) // 回到上一页首页router.push // 普通的界面跳转(一般用于项目内的路径跳转)this.$router.push('/')location.href // 普通的路径跳转(一般用于项目外的路径跳转)location.href = 'https://element.eleme.cn/'...原创 2022-02-07 23:55:16 · 3902 阅读 · 0 评论 -
vue动态路由参数
1. vue路径中可以放置一些参数routes: [ { path: '/course/detail/:id/', // 通过this.$route.params.id 进行获取 name: 'CourseDetail', component: CourseDetail }, ]2. 取值(取出路由中放置的id)this.$route.params.id3. html路由写法<router-link to="/cour原创 2022-02-07 23:48:14 · 3721 阅读 · 0 评论 -
The media could not be loaded, either because the server or network failed or because the format is
错误描述:在使用vue封装的vue-video-player报的错,错误截图:错误原因:url没有用require包裹解决办法:在下面两个url上用require包裹一下:sources: [{ // 播放资源和资源格式 type: "video/mp4", src: require("../../static/image/xx.mp4") //你的视频地址(必填) require } ], p原创 2022-02-06 21:55:44 · 11113 阅读 · 0 评论 -
vue-video-player的快速使用
0. 介绍:vue封装的一个标签播放器(不加密的播放)1. 安装npm install vue-video-player --save -i https://pypi.douban.com/simple/2.在src/main.js导入// 2.require('video.js/dist/video-js.css');require('vue-video-player/src/custom-theme.css');import VideoPlayer from 'vue-vide原创 2022-02-06 21:49:49 · 2828 阅读 · 0 评论 -
Vue中的element-ui,axios在Vue-cli中的安装以及简单使用
# 0.自备vue-cli 这里推荐一个Windows的安装方法:windows进行vue安装https://blog.csdn.net/liuzhenhe1988/article/details/109203873# 1.安装elementnpm i element-ui -S --registry https://registry.npm.taobao.org# 2.在main.js中导入ElementUI,并调用// elementUI 导入import ElementUI原创 2022-01-30 00:07:26 · 2535 阅读 · 0 评论