Vue
关注
分享
扫一扫
文章平均质量分 59
TA_WORLD
这个作者很懒，什么都没留下…
展开
-
Vue3 初始化swiper以及如何使用swiper的方法与事件
Vue3 初始化swiper以及如何使用swiper的方法与事件初始化swiper首先需要下载swiper.jsnpm install swiper我的版本是"swiper": "^8.1.3",在需要使用的地方引入不同版本的swiper，包的路径是不相同的 import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; import "swiper/swiper.min.css"; 使用swiper <s原创 2022-05-02 11:45:07 · 5936 阅读 · 7 评论 -
Vue 使用$attrs给子组件的元素添加属性
使用$attrs添加属性使用场景：给子组件传参，但是子组件并没有相应prop定义出现的问题：这些attribute会被添加到该子组件的跟元素上<!-- 具有非 prop 的 attribute 的 date-picker 组件--><date-picker data-status="activated"></date-picker><!-- 渲染后的 date-picker 组件 --><div class="date-pick原创 2022-03-02 23:45:53 · 1249 阅读 · 0 评论 -
Vue 使用ref获取节点
使用ref获取节点 <div class="innercontainer" ref="dropdownRef"></div>在vue3中不能直接获取首先，需要在setup()中进行定义，并返回setup(){ const dropdownRef = ref<null | HTMLElement>(null) return { dropdownRef }}注意：在定义的时候将dropdownRef定义成一个null和HT原创 2022-03-02 23:45:19 · 1565 阅读 · 0 评论 -
Vue 搭建Vuex环境
搭建Vuex环境在src目录下创建一个文件夹store，在store文件夹内创建一个index.js文件index.js用于创建Vuex中最核心的store// scr/vuex/index.js// 引入Vueximport Vuex from 'vuex'// 用于响应组件中的动作const actions = {}// 用于操作数据const mutations = {}// 用于存储数据const state = {}// 创建storeconst store =原创 2021-11-14 23:27:11 · 777 阅读 · 0 评论 -
Vuex介绍 及 工作原理
Vuex介绍 及 工作原理概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中的多个组件的 共享 状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间的通信什么时候使用Vuex：多个组件依赖于同一状态来自不同组件的行为需要变更同一状态个人简单理解：多个组件使用同一变量，状态管理模式这是一个简单的Vue计数应用new Vue({ // state data () { return { count: 0 }原创 2021-11-13 12:08:14 · 1192 阅读 · 0 评论 -
Vue 插槽（默认插槽 具名插槽 作用域插槽）
插槽文章目录插槽默认插槽具名插槽作用域插槽作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件=>子组件默认插槽App.vue <Category> <img src="" alt=""> </Category>img插入到Category内Category.vue<template> <div class="category"> <h3原创 2021-11-12 20:23:24 · 1286 阅读 · 0 评论 -
Vue 动画效果 及 Animate的基本使用
Vue 动画效果 及 Animate的基本使用运用原来的css代码编写动画，但是动画的类名在Vue是有规定，在进入的时候使用v-enter-active，离开的时候使用v-leave-active @keyframes myaction { from{ transform:translateX(-100%); } to{ transform:translateX(0) } }原创 2021-11-09 16:54:30 · 4189 阅读 · 0 评论 -
Vue 全局事件总线
全局事件总线一种组件间通信的方式，适用于 任意组件间通信安装全局总线$bus就是当前应用的vmnew Vue({ .... beforeCreate(){ Vue.prototype.$bus = this },})使用事件总线接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身methods( ){ demo(data){...}}....mounted( ){ this.$bus.$on('xxx', th原创 2021-11-05 16:58:38 · 278 阅读 · 0 评论 -
Vue 组件自定义事件（子组件向父组件传参）
组件自定义事件子组件给父组件传参通过父组件给子组件传递函数类型的prop父组件提前准备一个函数，传给子组件，子组件调用函数父组件<template> <div id="app"> <School :getSchoolName="getSchoolName"></School> </div></template><script> import School from "./com原创 2021-11-03 20:53:40 · 1595 阅读 · 0 评论 -
Vue mixins配置项
mixin 混入mixin是vm对象的配置项，mixin的值是一个数组使用场合：当我们的多个组件中同时需要一个变量或者方法的时候，可以在外部创建一个 js文件，然后在组件中导入，在mixin配置项中填入案例解析【例子】School.vue<template> <div> <hr> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2>原创 2021-11-02 19:49:07 · 406 阅读 · 0 评论 -
Vue props配置
props配置组件化编程中，我们可能希望在一个父组件中重复使用一个子组件，但是子组件的内容不相同，比如以下代码<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <school></school> <school></school> <student></student>原创 2021-10-30 21:21:05 · 249 阅读 · 0 评论 -
Vue 脚手架创建项目的的render函数
render函数import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({ render: h => h(App),}).$mount('#app')第一次接触这一段代码，不是很清楚render函数是什么用处，但是按照组件的注册的想法，可以大概猜测，该函数可能处理了components、template等配置我们按照原先的vue的写法代替这一段代码impor原创 2021-10-30 00:26:57 · 246 阅读 · 0 评论 -
Vue组件化编程以及初始化脚手架
组件化编程以及初始化脚手架文章目录组件化编程以及初始化脚手架Vue中使用组件的三大步骤非单文件组件的三步骤定义组件注册组件编写组件标签单文件组件的三步骤定义注册引用组件的嵌套关于VueComponent组件命名注意点脚手架初始化脚手架非单文件组件 —— 一个文件中包含n个组件（n>1）单文件组件 —— 一个文件中只包含1个组件Vue中使用组件的三大步骤一、定义组件（创建组件）二、注册组件三、使用组件（写组件标签）非单文件组件的三步骤定义组件使用Vue.extend(opti原创 2021-10-29 22:49:15 · 540 阅读 · 0 评论 -
Vue 自定义指令
自定义指令自定义指令，需要在directives配置项中配置指令对象directives:{ ...}在directives中编写的自定义指令，在使用的时候要加上v-函数式需求：使数字放大10倍自定义的指令可以接收两个参数：element:绑定指针的元素（真实的DOM元素） 如<span></span>binding: name:自定义时的指令名，big rawname:使用时的指令名，v-big value:指针用到的数据的值 expre原创 2021-10-26 16:52:48 · 264 阅读 · 0 评论 -
Vue v-model收集表单数据
Vue v-model收集表单数据文章目录Vue v-model收集表单数据text和passwordradiocheckboxselect 下拉列表总结<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>收集表单数据</title> <script type="text/javascript" src="../js/vue.js">&原创 2021-10-24 15:44:38 · 595 阅读 · 1 评论 -
Vue 监测数据改变的原理
监测数据改变的原理代码主要功能：点击按钮，更新第一条数据 <div id="root"> <button @click="updata">更新周冬雨的信息</button> <ul> <li v-for="p in persons" :key="p.id"> {{p.name}}---{{p.age}}原创 2021-10-23 23:52:24 · 433 阅读 · 0 评论 -
Vue 列表渲染 key的原理和作用
列表渲染 key 的原理和作用key就是为该节点做身份标识，如果对key绑定index的值，那么很容易出现问题：若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新——页面效果没有问题，但是效率有问题如果解构中还包含输入类的DOM，会产生错误DOM更新——界面有问题问题案例分析：点击按钮，在列表的前面添加一个对象 <div id="root"> <button @click.once="add">添加一个老刘</b原创 2021-10-20 20:30:35 · 673 阅读 · 1 评论 -
Vue class和style的绑定
class和style的绑定追加单个class的动态绑定使用情况：样式的类名不确定，需要动态绑定字符串写法效果：单击追加样式类名 <div id="root"> <div class="basic" :class="change" @click="handleChange">{{name}}</div> </div> .basic { width: 200px;原创 2021-10-19 17:39:54 · 100 阅读 · 0 评论 -
Vue 监视属性
监视属性写在Vue对象的watch中，它的值是配置对象——即属性名当被监听的属性改变时，回调函数自动调用，进行相关操作监视的属性必须存在，才能进行监视监视的两种写法：new Vue时传入watch配置通过vm.$watch监视handler方法可传递参数：newValue、oldValue（参数名可以自定义），但是第一个是修改后的属性值，第二个是原先的属性值 var vm = new Vue({ el: "#root", data: {原创 2021-10-18 22:20:58 · 2755 阅读 · 0 评论 -
Vue 计算属性
计算属性定义：要用得属性不存在，要通过已有得属性计算得来原理：底层借用了Object.defineproperty方法提供得getter和setter要显示的数据不存在，要通过计算得来在computed对象中定义计算属性在页面中使用{{方法名}}来计算的结果备注：计算属性最终会出现在vm(Vue对象)上，直接读取使用即可如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化computed中需要写入对象get方法<input v-mo原创 2021-10-17 23:24:07 · 394 阅读 · 0 评论 -
Vue 数据代理
Vue 数据代理1.Vue中的数据代理 通过vm对象来代理data对象中属性的操作（读/写）2.Vue中数据代理的好处 更加方便的处理data中的数据3.基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上 为每一个添加到vm上的属性，都指定一个getter/setter 在getter/setter内部去操作（读/写）data中对应的属性...原创 2021-10-17 13:29:07 · 87 阅读 · 0 评论 -
JavaScript Vue 天气查询
天气查询接口：天气接口请求地址：http://wthrcdn.etouch.cn/weather_mini请求方法：get请求参数：city（查询的城市名）响应内容：天气信息HTML<div id="box"> <h1>天气预报</h1> <div class="search"> <input type="text" class="search_left" v-model="city" @keyup.enter="getW原创 2021-09-20 12:20:47 · 347 阅读 · 1 评论 -
Vue实现记事本
Vue实现记事本功能要求：文本框中的内容和添加到记事本的内容相同，需要用到v-model进行数据同步添加记事本内容，动态添加，使用v-for在文本框中输入完，键盘按下enter，添加内容，使用了v-on绑定事件以及添加限制符HTML<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>记事本</title> <link rel="stylesh原创 2021-09-18 20:21:24 · 558 阅读 · 0 评论 -
Vue基础 指令（文本、绑定事件、判读、循环）
Vue指令文章目录Vue指令v-text指令v-html指令v-on指令v-show指令v-if指令v-show与v-if的用法区别v-bind指令v-for指令v-on补充：传递自定义参数，事件修饰符v-model指令v-text指令设置标签的文本值(textContent)v-text<p v-text="数据变象"></p><!DOCTYPE html><html> <head> <title&原创 2021-09-18 20:12:32 · 426 阅读 · 0 评论