Vue2基础
文章平均质量分 66
_龙衣
想到就去做,万一实现了。
展开
-
vue2基础- render 渲染函数基础使用
什么是渲染函数&JSXVue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。节点、树、虚拟DOM节点每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。虚拟 DOMVue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码原创 2022-01-20 21:15:00 · 2232 阅读 · 0 评论 -
vue2基础-自定义指令v-focus、v-pin 指令动态传参
什么是自定义指令除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。钩子函数自定义指令中的函数一个指令定义对象可以提供如下几个钩子函数 (均为可选):bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一原创 2022-01-17 21:22:59 · 2010 阅读 · 0 评论 -
vue2基础 - transition 过渡动画结合 animate.css和 Velocity.js 的使用
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.js在这里,我们只会讲到进入、离开和列表的过渡,你也可以看下一节的管理过渡状态。单元素/组件的过渡同时使用过渡动画和时间animate.css1)如果 Vue 项目需要原创 2022-01-13 23:15:45 · 417 阅读 · 0 评论 -
vue2基础 - 混入对象 mixin 简单使用
文章目录概述选项合并数据对象同名钩子函数值为对象的选项全局混入概述混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { conso原创 2022-01-13 23:14:10 · 1799 阅读 · 0 评论 -
vue2基础 - vue2 动态组件和异步组件使用
动态组件异步组件原创 2021-12-24 23:00:00 · 2713 阅读 · 0 评论 -
Vue2基础- slot 插槽使用(包括动态插槽示例)
插槽使用,包括动态插槽原创 2021-12-19 10:45:59 · 9688 阅读 · 1 评论 -
Vue2基础-Vue2.x 多层级组件数据通信 EventBus 和 Vuex
多层级组件间通信如果我们使用vue提供的prop和emit实现会很麻烦,需要层层嵌套。下面介绍的两种方式可以解决该问题。EventBusVuex源码示例组件创建使用示例参考原创 2021-12-05 21:47:58 · 807 阅读 · 0 评论 -
Vue2基础- Vuex 的简单使用
文章目录Vuex 是什么状态管理是什么?响应式是什么?不用 Vuex 也是可以的使用安装知识储备全局 storeStatecomputed 计算属性mapState 辅助函数GettersMutationsActionsModules购物车示例Vuex 是什么Vuex是什么一个专为 Vue.js 应用程序开发的响应式状态管理模式.状态管理是什么?从我个人角度来看,状态可以指代数据。而状态管理也就可以看作数据管理,主要是用于分层解耦。在Vuex中状态管理可以看作是全局变量,这个变量可以通过原创 2020-12-26 22:50:43 · 956 阅读 · 0 评论 -
Vue2基础-Vue2.x 父子组件数据通信 Prop 和 Event
组件参数传递 prop监听子组件事件原创 2021-12-05 13:49:18 · 765 阅读 · 0 评论 -
Vue2基础-Vue2.x组件注册和基础使用
组件创建组件注册模块化全局注册模块化局部注册组件复用会出现什么问题,因此data 必须是一个函数data 必须是一个函数原创 2021-12-01 22:52:24 · 858 阅读 · 0 评论 -
window系统使用 bash 新建 vue3+ts 项目以及 preset 模板使用
前提已经装了 bash 命令行vue 开发环境 以及 vue3背景vue3 稳定版已经发布一段时间了,vue3+ts的开发模式能大大提升vue项目的维护性和稳定性。故这里尝试下使用vue cli 快速创建vue3+ts 的项目。平时用 git bash 比较多,但是直接在命令窗口中使用vue create <项目名>后出现的选择项,选择不了。网上说window 系统需要使用winpty vue.cmd create <项目名> 来创建项目,当出现选择项时使用上下箭头原创 2021-11-23 22:00:05 · 528 阅读 · 0 评论 -
Vue2 中 Class 和 Style 绑定的使用
Class 和 Style 的绑定操作元素的 class 列表和内联样式(style)是数据绑定的一个常见需求。因为它们都是 attribute ,所以我们可以用 v-bind ,处理它们只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。v-bind 是 vue 的一个指令,用于绑定html属性ps: 对于 v-bind:class原创 2021-11-14 22:42:58 · 1009 阅读 · 0 评论 -
vue2 中 ref 的使用
ref 是什么ref 被用来给DOM元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。获得了引用信息,那么我们就可以操作元素或者组件了。为什么使用 ref通过定义我们知道了ref的作用注册引用,并通过$refs去获取该引用的DOM元素而且我们知道js中也有对应的api来获取元素,比如document.getElementById('id名称'),那么这二者的区别是原创 2021-11-14 22:41:50 · 9376 阅读 · 0 评论 -
vue2.x 计算属性 computed 和侦听器 watch 使用示例
vue 计算属性和侦听器完整代码示例:demo-计算属性-方法-侦听器计算属性什么是计算属性?本质还是属性,但是它的属性值必须是函数为什么需要计算属性和侦听器?计算属性computed主要解决模板template中放入太多运算逻辑问题。而侦听器watch能实现计算属性computed所能实现的所有功能。那么二者的区别在于哪?计算属性computed是监听依赖的值是否变化,如依赖的值有变化会触发回调,否则直接使用缓存的值。当需要在数据变化时执行 异步 或 开销较大 的操作时,使用原创 2021-10-14 21:48:36 · 248 阅读 · 0 评论 -
入门前端-v-charts 动态修改饼图(理论上所有图表)标题
需求在输入框中改变数值,对应的图表的标题也要改变我们原来封装的图表组件如下:这时候直接通过外部的传递的chartTitle 没法直接改变图表的标题。<template> <ve-pie :data="chartData" :extend="extend" /></template><script>export default { name: 'MyPie', props: { chartTitle: { t原创 2021-09-30 16:53:56 · 1667 阅读 · 1 评论 -
入门前端-Vue 解决跨域问题
什么是跨域跨域俗称跨源资源共享(CORS)是一种基于HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其它origin(域,协议和端口),这样浏览器可以访问加载这些资源。跨域本质是浏览器基于同源策略的一种安全手段同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能所谓同源(即指在同一个域)具有以下三个相同点协议相同(protocol),如:http或者https主机相同(host),如:192.168.1.1或者192.168.1.2端口原创 2021-09-11 07:16:43 · 303 阅读 · 0 评论