vue特性vue3
vue 实现 word/excel/ppt/pdf 等文件格式预览操作
方法一： 使用微软的在线预览，使用iframe作为载体 <iframe frameborder="0" :src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl" width='100%'> </iframe> 方法二： ......
vue2.x接入mockJs
1、安装 npm install mockjs 2、创建文件 src/mock/api、src/mock/index import Mock from 'mockjs' import MockApi from "./api" Mock.setup({ timeout: "300", }); cons ......
快速上手VUE：创建、运行、发布，HelloWorld
一、创建VUE项目 1、打开VS“创建新项目”界面，选择“基于 Vue.js Web 应用程序”。 分为Javascript和TypeScript两种，注意按自己的编程语言掌握情况选择用哪种。（TypeScript是Javascript的超集，兼容Javascript所有语法，不过由于我还未写过Ty ......
vue3 实现移动端h5多个输入框填入验证码功能（非常简单）
使用一个输入框来获取数据，再用一组div来展示数据 用一个input 遮在展示内容的框上，给input设置opacity：0，用户每次输入的值拿到后依次展示在框内，如果用户输入或者删除就直接体现在展示框上了。 页面内容： <ul class="lists" ref="inputs"> <li cla ......
vue-day48---组件的自定义是将
1.App.vue <template> <div > <h1>{{ msg }}你的名字是{{ studentName }}</h1> <!--通过父组件给子组件传递函数的props 实现 子给父传数据--> <School :receiveSchoolName="receiveSchoolNam ......
【技术实战】Vue技术实战【三】
博客推行版本更新，成果积累制度，已经写过的博客还会再次更新，不断地琢磨，高质量高数量都是要追求的，工匠精神是学习必不可少的精神。因此，大家有何建议欢迎在评论区踊跃发言，你们的支持是我最大的动力，你们敢投，我就敢肝 ......
vue--day46---组件自定义事件的解绑
查看vue 版本 命令 npm list vue 1. App.vue <template> <div > <h1>{{ msg }}</h1> <!--通过父组件给子组件传递函数的props 实现 子给父传数据--> <School :receiveSchoolName="receiveSchoo ......
创建vue项目
1. vue create projectname 2. 选择vue3 3. 创建成功 4. 启动项目 5. 在package.json中，查看启动命令，有时候不是npm run serve 6. 安装插件 安装axios： npm i axios 安装bootstrap： npm install ......
Vue2的/deep/深度选择器失效了？
> /deep/ 在 Vue2 样式中的问题。 ## 太长不看： 不要在 Vue SFC 以外的地方使用`/deep/`。对于 Vue3 ，请使用最新的`:deep()`伪类选择器。 ## 什么是`/deep/` `/deep/`是 Vue2 中一个重要的样式选择器，可以用于选择封装好的组件内部的样 ......
vue指令及模板语法
说实话，看了这两节之后，改变认知的，突然发现自己落后了这么多，真不应该 v- 这个指令集的确666，把许多东西的实现简化了，真心学到了不少， 菜鸟这方面讲的真是不错 https://www.runoob.com/vue3/vue3-directives.html 我在这就不献丑了，而且里面的各种试例 ......
Vue第二例data 选项
讲的主要还是附值方式，以及值的变化，总之是操作里面的数据选项 还是如上节讲的建html 上代码 <!DOCTYPE html><html><head> <meta charset="utf-8" /> <script src="../scripts/vue.global.js" type="text ......
用CSS样式 @keyframes、animation写一个旋转立体模型、动画模型，vue2
需求：画一个正方体，让物体一直旋转 环境：vue2、css 效果： 代码： 模型 1 <template> 2 <div> 3 <!-- 旋转立体图 --> 4 <div class="cube"> 5 <div class="face front"></div> 6 <div class="fac ......
Vue第一个程序，经典Hello
弄明白了简单模式的vue应用，开始应用，首先下载vue.js文件，也可以访问使用 CDN 方法, 我是直接下载了vue.global.js，方法是NPM 方法（这个在上面的官网与菜鸟都有） ,然后用Visual Studio 建了一个空网站，新建文件夹scripts 把vue.global.js放文 ......
vue element ui在添加表格数据时，出现数据跟着变化的问题
主要是对象赋值问题 对对象进行深拷贝即可 arrObj=JSON.parse(JSON.stringify(this.form)); this.tabelDate.push(arrObj) ......
python基础之函数的特性
### 1. 函数作为参数传递 ```python # 函数作为参数传递 def c(x): return x + 1 def d(f): return f(3) e = d(c) print(e) ``` 输出： ```python 4 ``` 说明一个函数可以接受另外一个函数对象作为自己的参数， ......
vue 2 接入three.js
1、安装three.js npm i three@0.128.0 2、在vue中引用(可以测试一下，是否ok，下面测试) 1）、新建index.js import * as THREE from 'three'; // 引入Three.js扩展库 import { OrbitControls } f ......
手机上vue页面返回时如何保持原来的位置
1，问题的提出 采用vue做手机评分页面的前端，页面显示多个评分项的分数和总分。 每个评分项有个修改按钮，按下后弹出新的页面，用户填写分数后按提交按钮，则保存数据、关闭页面、回到前一页。 此时，页面上显示的分数和总分会刷新，但是显示的页面位置未保留修改前的位置，而是回到了顶部显示。 这种情况如果页面 ......
如何快速在本地运行你vue打包的的dist文件
> 要在本机启动运行前端提供的dist包，需要先安装一个HTTP服务器，例如Apache,Nginx，phpstudy。这里以使用Node.js的http-server为例进行说明 1. 首先，确保已经安装了Node.js。如果没有安装，可以从官网下载并安装。 2. 打开终端或命令行窗口，使用以下命 ......
视频直播系统源码，vue自定义模拟滚动条
视频直播系统源码，vue自定义模拟滚动条 vscroll自定义滚动条模板 <template> <div class="vui__scrollbar" ref="ref__box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeav ......
庆军之低代码vue模式
原来render(h),h并不是一个对象。 我一直以为，我可以写成 render(h){ createuibycode(h,data,data.Data); return h; } , metchs:{ createuibycode(h,ui,Data){ .... var uitype = ui. ......
Vue3 组件篇
## 组件命名 组件的命名一般分为两种 1. 在单文件组件中，推荐为子组件使用 PascalCase 的标签名，以此来和原生的 HTML 元素作区分。虽然原生 HTML 标签名是不区分大小写的，但 Vue 单文件组件是可以在编译中区分大小写的。我们也可以使用 /> 来关闭一个标签。 2. 使用 ke ......
Vue中使用Echarts可视化图表
1、首先在项目中安装Echarts 1 npm install echarts 2 npm install echarts --save 2、在项目 main.js 中全局引入 1 import echarts from 'echarts' 2 // 挂载到vue原型上 3 Vue.prototyp ......
vue3之element-plus
1.安装elementPlus和自动导入插件 npm i elementPlus npm install -D unplugin-vue-components unplugin-auto-import 2、配置自动按需导入 // 引入插件 import AutoImport from 'unplug ......
uni-app vue-cli命令行创建项目，拉取模板（dcloudio/uni-preset-vue）失败，443超时报错
### 安装vue/cli npm install -g @vue/cli ### 问题 >根据官网提示，通过 vue-cli 命令行创建项目，出现如下报错。 ``` Fetching remote preset dcloudio/uni-preset-vue... ERROR Failed fet ......
vue : 无法加载文件 C:\Users\jianfei\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。
# 背景 在新电脑上配置vue环境 ``` PS E:\CODE_PROJ\myvue\vue23\P61_使用脚手架\vue_test> npm install -g @vue/cli npm WARN deprecated source-map-url@0.4.1: See https://gi ......
uniapp webview 与vue2页面双向通信
一、准备工作 uniapp: //建立工程，创建显示的页面 <web-view src="http://192.168.0.58:8080" @message="handlePostMessage"></web-view> vue: 安装webview用到的依赖 yarn add @dcloudio ......
前端Vue仿支付宝自定义可滑动轮播分页宫格菜单组件，可支持九宫格 十二宫格 十五宫格
## 背景介绍 随着技术的不断发展，传统的开发方式使得系统的复杂度越来越高。在传统开发过程中，一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改，造成牵一发而动全身的情况。为了解决这个问题，我们采用了组件化的开发模式。通过组件化开发，可以有效地实现单独开发，单独维护，而且它们之间可以随意的进 ......
Vue中的虚拟DOM和Diff算法
## 一、 虚拟DOM ### 1. 什么是虚拟DOM？ 一个用来表示真实 DOM 节点 的 JS 对象，主要包含标签名 tag、属性 attrs 和子元素对象 children 属性等。 代码示例如下： ``` 标题 段落内容 { tag:'div', attrs:{ id:'baseNo', c ......
vue--day45---组件的自定义指令
1.App.vaule <template> <div > <h1>{{ msg }}</h1> <!--通过父组件给子组件传递函数的props 实现 子给父传数据--> <School :receiveSchoolName="receiveSchoolName"></School> <!-- v- ......