vue优点
低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。独立开发。开发人员可以专注于业务逻辑和数据的开发（Vi...
2022-05-18
vue备用
handleCheck (item) { if (item.isChecked) { this.checkData.push(item.id) this.checkData = _.uniqWith(this.checkData, _.isEqual) } else { this.checkData = _.remove(this.checkData, i => i !== item.id) } },<template slot=...
2022-05-28
vue的坑
1.获取地址栏参数 this.$route.query.id2.用this.$router.push({path:'index',query:{id:1}})跳转页面无刷新，无法监听传递的参数，可用以下方法解决：watch:{ '$route':'fun'}fun为地址栏变化要写的函数3.组件变量是数组的，v-for时，要写:key="index";4.在光标处插入值<textarea ref="mytextarea" v-model='editMsg' class="editMsg" maxlen...
2022-05-19
vue动画
1、使用transition定义动画//定义过渡的样式/*动画刚开始时的状态，动画结束时的状态*/.move-enter-active,.move-leave-active{ transition:all 2s;}/*动画过渡的css样式*/.move-enter,.move-leave-to{ opacity:0; transform:translateX(150px);}//使用vue中的transition动画组件<transition name="move"> <h2 v-if="show" cla...
2022-05-28
vue体验
#################################安装：1，安装node.js ：Javascript运行环境，其中的npm就是Node.js下的包管理器。2，命令行安装cnpm ：npm install -g cnpm --registry=https://registry.npm.taobao.org3，命令行vue的脚手架vue-cli：npm install -g vue-cli4，vscode软件安装：5，vscode中安装插件：Vetur插件脚手架使用：1，创建vue项...
2022-05-24
vue总结1
双向数据流：js内存属性发生改变，影响页面变化；页面的改变影响js内存属性的改变；常用指令V-text 是元素的innertext只能在双标签元素中；v-html 元素的innerhtml不能包含表达式；v-if 元素是否插入v-show 元素是否隐藏v-model 上香数据绑定v-bind 单项数据绑定el: 渲染内容目的地（写定的）render 渲染...
2022-05-15
vue入门一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style type="text/css"> .box{ ...
2022-05-18
vue（三）
组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素，封装可重用的代组件注册全局注册Vue.component(\'组件名称\', { }) 第1个参数是标签名称，第2个参数是一个选项对象全局组件注册后，任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签...
2022-05-13
vue白屏现象
不知道大家有没遇到过，就是使用vue框架制作一个列表页和一个详情页。1 上拉一下列表页2 点击进去详情3 然后什么都不操作直接返回。列表页会看到一个白屏(其实是body的background-color)，fixed的元素会看到,但列表页其他的就看不到了，只要上拉一下又出现了。ps：不上拉列表页，然后进去详情...
2020-03-24
vue长列表优化
写在前面：不知不觉 ～2020年的日子已经过去了3/4，看到微博热搜说：2020年还剩下3个月的时候，心情突然骤降～哈哈哈哈切入正题：什么是长列表优化？我们为什么需要长列表优化？我们怎样进行长列表优化长列表优化 在我们的日常工作中，会越到各种各样的列表，比如，我们通常采用分页...
2022-05-26
vue知识点集锦
1、vue的优点？轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习双向数据绑定：保留了angular的特点，在数据操作方面更为简单组件化：保留了react的优点，实现了HTML的封装和重用，在构建单页面应用方面有...
2022-05-17
vue进阶知识点
一、listeners2.4.0 新增这两个是不常用属性,但是高级用法很常见;1.场景如果父传子有很多值那么在子组件需要定义多个解决attrs获取子传父中未在 props 定义的值// 父组件<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>// 子组件mounted() { console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgU...
2022-06-01
vue的基本介绍
Vue 的基本介绍1. 库(library)和框架(Framework)的区别库: 是一系列函数的集合,如果想要实现某个功能,直接调用库里面的方法即可. 例如(jquery).使用库 : 开发人员起主导作用框架: 是一套完整的解决方案,它制定了一个规则,想要使用框架,就要按照框架的规则来编写代码,框架会在何时的时机执行我们编写...
2022-05-12vue表单重置无效
<el-dialogv-if="formOpen":visible.sync="formOpen"center:close-on-click-modal="false":close-on-press-escape="false":title="(form.id==undefined?'添加':'编辑')+'菜单'"><el-form ref="form" :model="form" label-width="80px" :rules="formRules"><el-form-item label="菜单类型...
2020-08-30vue渲染表格卡顿
问题描述· 最近做项目遇到了table表格项过多出现卡顿的问题，有一个功能涉及表格明细项“插入”功能，随着表格项插入得越来越多，滚动和操作变得非常卡，尤其是编辑进来时，非常慢· 尝试过的方法如下：控制table项渲染数量————通过滚动事件实时插入和收回数据，控制额定渲染项，但是这...
2021-05-06
vue社区活跃整合
===框架=====Nuxt（vue ssr服务端渲染）Quasar Framework 一个可以搭建多平台响应式网站的框架Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。=====Ui组件库======Element-UiiViewMuse-UiVue Material =====移动端UI库=====vux...
2022-05-20
关于vue的小实例
练习的两个小例子。1.实现点击全选，下面的均被选中，再点击一下，下面的均取消选择；当下面的均被选择的时候，全选被选中，值为true<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <...
2022-05-09
vue实现登录拦截
本文实例为大家分享了vue实现登录拦截的具体代码，供大家参考，具体内容如下需求：用户只有登录了，用户名存储在本地储存时，才能进入首页，如果本地存储没有用户名，就不能进入首页1、登录页面的实现<template> <div class="htmleaf-container"> <div class="demo form-bg"> <div class="container"> <div class="row">...
2022-02-26详解vue高级特性
Vue为我们提供了很多高级特性，学习和掌握它们有助于提高你的代码水平。一、watch进阶从我们刚开始学习Vue的时候，对于侦听属性，都是简单地如下面一般使用：watch:{ a(){ //doSomething }}实际上，Vue对watch提供了很多进阶用法。handler函数以对象和handler函数的方式来定义一个监听属性，handler就...
2022-02-26用vue写一个日历
之前在上家公司做过一个公司人员考勤的东西，里面需要用到日历，当时自己用vue随便写了一个，比较简单，删掉了其他功能的代码，只留下日历，直接看代码<template> <div class="lookForMonth_wrapper"> <div class="lookForMonth_top"> <div class="selectDate"> <div>{{year}} 年 {{month}} 月</div> <div class="upDownSelect">...
2022-02-23
vue分类单选标签
vue.js实现单选标签功能功能讲解：点击那个标签，那个变红，其他标签都是灰色，实现单选。效果图如下：来不及解释了，快上车！！！template代码script代码只能想到这种办法，如果有更好的，会更新文章的。...
2022-05-14
vue知识点（1）
v-on指令添加一个事件监听器div > <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button></div>var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.sp...
2022-06-02
vue小白快速入门
一、vue是什么Vue 是一套用于构建用户界面的渐进式框架。压缩后仅有17kb二、vue环境搭建你直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。但在用 Vue 构建大型应用时推荐使用 NPM 安装。这里推荐一下是用淘宝的cnpm，非常的快npm install -g cnpm --registry=https://registry.npm.taobao.org然后进行...
2022-06-11
vue实现手风琴效果
本文实例为大家分享了vue实现手风琴效果的具体代码，供大家参考，具体内容如下利用鼠标移入移出事件实现内容出现隐藏用到的知识点：1.@mouseover 鼠标移入事件2.@mouseout 鼠标移出事件3.v-if 条件渲染<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 简单样式设置 --> <style type="text/css"...
2022-02-18
