跑马灯 效果vue
Vue JS项目 添加TypeScript
Vue JS项目 添加TypeScript 转载请注明来源 谢谢 git文件全部提交 必须全部提交 因为会改掉你的文件.很恶心. vue.config.js 添加下面内容 pages:{ index:{ entry:'src/main.js' } } 项目根目录运行 vue add typescri ......
vue:axios异步通讯
由于Ajax需要对dom进行频繁的操作 所以这里使用axios进行替代 首先放上所有代码 <body> <div id="vue"> {{info.name}} <a v-bind:href="info.url">点我</a> </div> <!-- 到入vue.js--> <script src= ......
Vue-Routes
下载 npm i vue-router@x x为版本号 版本对应规则: vue@x == router@x+1 使用 一、创建应用路由器 在src中创建router/index.js目录 1、引入touter插件&&应用插件 import VueRouter from 'vue-touter'Vue ......
vue组件
vue组件实际上就是自定义标签 组件是vue可重复使用的实例 也就是说,当你定义好一个组件之后,你可以将其当做一个html的标签使用 <div id="app"> <br> <qinjiang></qinjiang> <br> </div> <div id="buttonnew"> <newbutt ......
vue-router解决警告:No match found for location with path "XXXXXXX"
使用vue-router时,在刷新页面时往往会出现这个警告: 这个问题产生的原因往往是因为vue在启动时,会校验当前页面的路由,而我们使用vue-router时,是在导航守卫中动态添加路由的,因此肯定找不到,而这个时候还没进入守卫,自然就会抛出这个警告了: 1、app.use(router) 2、r ......
Vite + Vue3 +TS 项目搭建
安装 nvm 略 安装 node 略 使用 Vite创建项目 vite3.x 文档:https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project 使用 NPM: $ npm create vite@latest 使用 Yarn: $ ......
WebStorm 2023.1 vue文件标签中变量无法识别 Unresolved variable or type
从老版本WebStorm 升级到 WebStorm 2023.1 之后,打开项目莫名爆红 可能是查询的不对,很多博客指明是依赖的问题,实际修改无效 问题出在文件类型指向不对 修改为: 问题解决 ......
Vue:表单双绑、组件
vue一大精髓就是双向绑定 vue.js是一个mvvm框架,即数据的双向绑定,即当数据发生变化时的时候,视图也就发生变化,当视图发生变化时,数据也会同步变化 双向绑定是对于UI控件来说的,非UI控件不会涉及到数据的双向绑定 以input标签举例 <div id="app"> 输入的文本:<input ......
VUE上传图片
1 <!-- 2 气味照相机,上传图片 3 --> 4 <template> 5 <div class="main_container" > 6 <div class="bgimg_box" :style="'background-image: url(' + bgImg + ');'"> 7 <d ......
js弹幕效果
Document <style> * { margin: 0; padding: 0; } div { width: 300px; height: 200px; background-color: aquamarine; } </style> <div></div> <input type="tex ......
使用PhantomJS解决VUE项目无法被百度收录
一、安装PhantomJS 安装文章:https://www.cnblogs.com/robots2/p/17340143.html 二、编写脚本spider.js // spider.js 'use strict'; console.log(' start '); // 单个资源等待时间,避免资源 ......
js实现输入打字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ......
vue 事件
vue中用 v-on绑定事件 简单绑定一个点击事件 <div id="app"> <button v-on:click="sayHi">点击我</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script ......
vue基本语法 for if else show
vue有关于if else 以及 for 的判断 <body> <div id="app"> <h1 v-if="type 'A'"> A </h1> <h1 v-else-if="type 'B'"> B </h1> <h1 v-else> C </h1> </div> </body> </htm ......
vue下拉框选择后不显示值,选其他下拉框后才显示出来
vue下拉框选择后不显示值,选其他下拉框后才显示出来 vue也太坑了 解决方法:为该el-select添加change事件中使用$set来对属性赋值,如下: changeData(val) { this.$set(this.formData, this.formData.id, val.value) ......
vue全家桶进阶之路50:Vue3 环境变量+跨域设置实例
使用.env加后缀的方式来建立某个模式下的环境变量, 例如:项目根目录新建两个环境变量文件(development开发环境和production生产环境): .env.development .env.production 在新建的两个环境变量文件中设置相同的环境变量名: VUE_APP_BASE_ ......
vue初学
Vue只关心视图层 视图层是HTML+CSS+JS 其遵循SOC原则 关注点分离原则 给用户看和刷新后台数据 vue支持mvvm+dom模式 第一个vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ......
vue 中的 props type设置多个类型,默认值
props: { value: { // type设置多个类型 type: Number | null, required: true } } ......
vue-input-directive 插件的使用(已兼容vue3.0)
codepen体验地址 github地址 安装、引入 npm install vue-input-directive --save import Vue from 'vue' import inputValidate from 'vue-input-directive' Vue.use(inputV ......
vue全家桶进阶之路49:Vue3 环境变量
vue3 环境变量 在Vue3中,可以通过环境变量来管理应用程序中的配置。这些配置可以包括后端API的URL、API key、跟踪ID等等。在不同的开发、测试、生产环境中使用不同的配置是非常有用的。Vue3允许使用.env、.env.local、.env.[mode]和.env.[mode].loc ......
vue兼容IE的方法规范
第三方插件的兼容性需经过ie和国产电脑浏览器测试后,才可以使用。 1、main.js 顶部添加 babel-polyfill import 'babel-polyfill' import Vue from 'vue' import App from './App.vue' import router ......
Vue3 代码块高亮显示并可使用富文本编辑器编辑(highlight.js + wangEditor)
在Vue项目中实现以下功能: 功能1. 在页面中显示代码,并将其中的关键字高亮显示。 功能2. 允许对代码块进行编辑,编辑时代码关键字也高亮显示。 功能3. 可在编辑器中添加多个代码块,动态渲染代码关键字高亮。 Step1: 安装所需插件(本文使用npm安装,若需使用其他方式请查阅官方文档) 安装代 ......
js实现画布绘图、橡皮擦除、刮刮卡效果
关键节点只有两处 pen.globalCompositeOperation = 'destination-out'; 通过背景图片实现擦除后仍保留底层图片效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta h ......
VUE学习笔记
VUE学习笔记 1.函数体格式 简写格式:“ 方法名(){ } ” >全写格式:“ 方法名:function(){ } ” 2.定义对象格式 对象名:{ } 3.全局事件总线相关的函数 注册全局事件总线:在main.js的VUE实例中创建事件总线 beforeCreate() { Vue.proto ......
VUE - 遍历并生成ArrayList
var arr = []; this.rows.forEach(item => { arr.push({ MaterialNumber: item.MaterialNumber, Message:item.TONumber }); }); this.mWHInterfaceResults = arr ......
vue3 文件上传,fileChange中的一个问题,第二个参数问题
这里fileChange第二个参数,不可也用fileList会污染已经定义的响应式变量fileList <script setup> const fileList = ref([]) const fileChange = (file,fileList) => { fileList.value = f ......
vue2源码-十一、Vue的生命周期
Vue的生命周期 钩子函数是如何实现? 内部利用一个发布订阅模式,将用户写的钩子维护成一个数组,后续依次调用hooks。主要靠的是mergerOptions 方法有哪些? 引用自https://vue3js.cn/interview/vue/lifecycle.html#%E4%BA%8C%E3%8 ......
vue3打包后一片空白控制台报错
问题原因是路径不对,加上一行代码就可完美解决问题。 在vue.config文件中加上 publicPath:'./' 即可解决问题。 问题如图所示: 如何解决问题呢? ......
vue实现的常见的动画效果
本文包括的动画: zoom-in zoom-in-left zoom-in-right zoom-in-top zoom-in-bottom zoom-in-center-x zoom-in-center-y slide slide-left slide-right slide-top slide- ......