文章目录前言一、基本指令1.v-cloak2.v-once（了解）二、条件渲染指令1.v-if2.v-show3.v-show与v-if的区别与选择三、列表渲染指令v-for1.基本用法1.遍历数组2.遍历对象3.迭代整数（感觉没什么用）4.关于迭代插入的元素和遍历语法与js冲突问题2.数组方法3. 数组过滤与排序四、方法与事件1.基本用法（v-on）2.修饰符 前言一、基本指令1.v-cloa
转载
2024-04-13 09:34:44
1003阅读
## 拖动div：使用Vue和jQuery实现
在Web开发中，实现拖动效果是一个常见的需求。本文将介绍如何利用Vue和jQuery来实现拖动div的功能。Vue是一款流行的JavaScript框架，用于构建交互式的用户界面，而jQuery则是一个快速、简洁的JavaScript库，可以简化HTML文档的操作。结合这两者，我们可以轻松地实现拖动div的效果。
### 实现思路
在实现拖动di
原创
2024-06-24 04:21:40
29阅读
在前端开发中，拖拽是非常常见的一种方式，但是之前感觉拖拽实现起来比较麻烦，一直未深入研究，现在整理了几个实现方式：1、原生方式html部分1 <div class="div" v-drag ></div>js部分 1 methods：{}， 2 directives: { 3 drag: { 4 // 指令的定义
转载
2020-02-29 17:49:00
640阅读
2评论
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
原创
2023-02-04 01:29:52
330阅读
背景：在使用vuedraggable做一个拖动应用图片排序的场景下，在android、iOS、chrome模拟移动设备 的情况，应用图片用的是svg，大概率会出现ghost元素不消失，也不触发end事件的诡异情况。注意PC端使用chrome 调试模式下，不开启模拟移动设备不会出现这种情况，开启来模拟移动设备也会出现。解决办法给svg元素设置一个css样式，即可；svg {
pointer-eve
转载
2024-10-17 16:58:48
40阅读
re.match re.match 尝试从字符串的开始匹配一个模式，如：下面的例子匹配第一个单词。1. import
2.
3. text = "JGood is a handsome boy, he is cool, clever, and so on..."
4. m = re.match(r"(/w+)/s", text)
5. if
6. print m.group(0), '
v-on的基本使用<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{cou
vue的两个版本1.完整版：vue.js通过编译器compiler把视图上的HTML转化为DOM节点、转化成HTML内容，完整版的视图是写在HTML里面或者template选项里，由于有 compiler(编译器)的存在，完整版运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。2.非完整版：vue.runtime.js 非完整版中的html只是字符串
绝了！
前言妙妙题！题目CF洛谷题目大意：现在有一只酷酷的柒处在二维平面上，上面有 \(n\) 个传送门和 \(m\) 个有刺杀地点。柒每秒可以移动到相邻的一格(四个方向)或者不动，如果 \(t_i\)作为玄武国的刺客，他有权在任意地点传送到传送门 \(i\)，只不过传送门是新修建的，所以需要走到传送门 \(i\)作为首席刺客，他的行踪变幻莫测，所以他初
转载
2024-09-06 20:10:14
48阅读
Vue3.0 学习笔记 5监听事件v-on指令v-on指令可以用来监听DOM事件，写法如下：<button v-on:click="young()">young</button><!--标准写法-->
<button @click="young()">young</button><!--简略写法-->v-on的表达式值是一个可
https://www.jianshu.com/p/0ee2642aba82 // 两列拖动改变两列宽度js部分 export function dragTwoColDiv(contentId,leftBoxId,resizeId,rightBoxId){ let resize = document ...
转载
2021-08-22 14:20:00
411阅读
2评论
点击div外的位置时，隐藏此div
原创
2022-03-17 16:36:42
3381阅读
问题在 vue2 中对表单控件有着良好的双向数据绑定机制，但是对于要特定实现某些功能的输入时，我们就不得不使用
转载
2022-03-29 15:54:04
419阅读
vue实现div高度可拖拽 这里有一个现成的demo，可以实现页面div的拖拽功能，但是和我想要的效果不是很一样，所以说后边有根据我的实际需求又重新修改了一下，先看一下现在的demo效果。 <template> <div id="eagleMapContainer" style="border: 1
原创
2022-06-23 12:50:42
1298阅读
# Vue.js中实现iOS风格滚动条的div
在现代Web应用开发中，用户体验是至关重要的一环。尤其是在移动设备上，常常需要考虑到滚动条的美观和易用性。iOS设备的滚动条设计简洁而富有美观，许多开发者希望在自己的Vue.js应用中实现类似的效果。在这篇文章中，我们将探讨如何使用Vue.js来实现iOS风格的滚动条，通过代码示例说明具体的实现步骤。
## 为什么要使用自定义滚动条？
在Web
原创
2024-09-21 07:09:26
40阅读
html：组件渲染的基本过程 main.js：
import Vue from "vue";
import Home from "./home.vue";
new Vue({
el: "#app",
template: "",
components: { Home }
});
home.vue
{{text}}
export default {
name: "home",
dat
转载
2023-12-03 20:47:00
166阅读
何为scoped？在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。scoped的实现原理vue中的scoped属性的效果主要通过P
转载
2024-03-28 11:15:05
44阅读
Vue 规范vue 项目规范以 Vue 官方规范 中的 A、B、C 规范为基础，并根据实际项目特点略作调整，故应结合两者来执行规范。重点强调1、组件（1）组件名组件名应该始终是多个单词组成（大于等于 2），且命名规范为 PascalCase 格式，避免和 HTML 元素名称冲突。// components/HeaderComponent.vue
export default {
name: '
转载
2024-09-25 14:52:53
68阅读
问题
在 vue2 中对表单控件有着良好的双向数据绑定机制，但是对于要特定实现某些功能的输入时，我们就不得不使用到 contenteditable="true" 的 div ，而在这个 div 上是使用 v-model 是没有效果的。那么问题就来了，输入是非常需要双向绑定的，这里的双向数据绑定该如何实现？
解决思路一：自定义指令
当然，说在这一段的前面，这种解决方式在 vue2 中是不行的，为什
转载
2021-06-29 16:53:56
620阅读
let width = this.$refs.echarts1.$el.offsetWidth let height = this.$refs.echarts1.$el.offsetHeightjs部分div部分<div ref="echarts1"></div>
转载
2021-12-01 21:24:53
1030阅读
