vue基础
四阶张量
转行了
展开
-
重学vue之vue3中compositionAPI
一、ref, reactive, toRef,toRefs, readonly响应式的引用1.1ref的使用1.2reactive的使用1.3toRefs的使用1.4toRef的使用1.5readonly的使用二、setup函数的参数三、计算属性四、监听器4.1基本使用4.2watchEffect使用五、生命周期函数六、Provide,Inject传递值,Ref获取dom的用法6.1Provide与Inject使用6.2 获取dom一、ref, react.原创 2020-12-11 14:02:37 · 2367 阅读 · 8 评论 -
重学vue之插件、传送门与render函数
插件定义 // plugin 插件, 也是把通用性的功能封装起来 const myPlugin = { //一定是一个install方法 install(app, options) { //第一个参数app是一个vue实例,第二个这个实例的属性 console.log(app,options) //外部传递进来的变量 console.log(name) //提供一个number属性 app.provide('n.原创 2020-12-11 10:13:02 · 222 阅读 · 5 评论 -
重学vue中的混入(mixins)
说明混入就是一个对象,然后把这个对象混入到某一个组件中data, methods里面内容重复,优先使用组件生命周期函数,优先使用mixin里面的可以修改优先级定义混入的对象 const myMixin = { data(){ return { a:1 } } }使用混入的组件 data(){ return { a:2原创 2020-12-10 22:27:03 · 145 阅读 · 0 评论 -
重学vue中组件细节、动态组件、异步组件
一、组件细节点子组件中的data,一定是个方法哈父组件要传递给孙子组件(瞎说的孙子组件,哈哈哈),可以使用provide与inject直接传递,下面是代码//父组件 provide() { return { data, }}//子组件inject: ['data'],二、动态组件感觉就和slot类似,只不过反转来,在父组件中留位置,子组件传递过来,上代码。父组件中<div> <component :is="whi原创 2020-12-10 21:53:57 · 996 阅读 · 0 评论 -
重学vue之slot用法(包含作用域插槽)
说明插槽好比子组件留好位置,父组件写好一个dom结构,包括样式这些,然后把这个dom扔到子组件预留的空位中。(这只是形象记忆哈。。。。。。)老版本的用法入口常规用法注意这里的写法,老板本中是用一个等号父组件中<template> <div> <child/> <!-- 指定这个结构传到名字叫slot1的插槽 --> <template v-slot:slot1>原创 2020-12-10 21:26:52 · 1351 阅读 · 9 评论 -
重学vue之父子组件间的双向绑定,附详细代码
说明绑定一个v-model父组件中<template> <div> <child v-model="parentData"/> </div></template>data() { return { parentData: 1 } },子组件中 <div @click="handleClick">{{modelValue}}</div>原创 2020-12-10 20:57:49 · 223 阅读 · 2 评论 -
重学vue之Non-Props属性
说明就是说在父组件中给子组件传递值,但是子组件不在prop中接受案例父组件中<template> <div> <child oldMsg="hello" oldMsg1="hello1" /> </div></template>子组件中只有一个div时候<template> <!-- 自动获取全部属性 --> <div>child原创 2020-12-10 19:48:29 · 692 阅读 · 0 评论 -
重学vue笔记之动态样式(class与style)
说明class与style使用起来有点相似,注意判别使用class使用class绑定的有3种格式:字符串数组对象<template> <div :style="classString"> 字符串形式 </div> <div :style="classObject"> 对象形式 </div> <div :style="classArray"原创 2020-12-10 18:27:08 · 297 阅读 · 9 评论 -
vue基础之vue-router(前端路由,详细知识点)
乱七八糟的笔记,仅仅是个人学习使用不用往下看,浪费时间路由与组件一个路由对应一个组件,是一一对应的映射关系引入vue与vue-router库<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>实例化vue-routerconst router原创 2020-08-10 17:09:42 · 231 阅读 · 0 评论 -
vue基础之在vue中使用axios(超级详细,学不会来砍我)
vue中的axios一、分类二、使用get,post,put,patch,delete,以及并发请求三、实例、拦截器、错误处理一、分类get:请求数据post:提交数据put:更新数据(所有的数据都推送到后端)patch:更新数据(只推送更新的数据到后端)delete:删除数据二、使用get,post,put,patch,delete,以及并发请求get //get axios.get(url, { params: {} }).then((res) => { })原创 2020-06-19 20:00:58 · 4354 阅读 · 2 评论 -
vue基础之事件总线bus(非父子组件传值通信)
一、说明事件总线其实就是一种非父子关系的通信方式二、语法如下(1)给vue的原型上挂载一个vue实例Vue.prototype.bus = new Vue()(2)发送事件,发送数据 this.bus.$emit('事件名', 数据)(3)监听事件,获取数据 this.bus.$on('事件名', (数据) => { //对数据进行操作 })三、案例代码<!DOCTYPE htm原创 2020-06-14 11:09:14 · 398 阅读 · 0 评论 -
vue中过渡动画与keyframe动画、以及使用animate.css和列表过渡
一、过渡动画(1)无论是组件之间的切换,或者用v-if,v-show指令控制dom的显示,只要是你想实现动画效果,必须在外面包裹,且必定给一个name属性,用于指定使用定义好的动画 <div id="root"> <transition name="fade"> <component :is="type"></component> </transition> <b原创 2020-06-12 12:39:58 · 1150 阅读 · 0 评论 -
vue基础之动态组件
动态组件用于频繁切换组件(1)刚开始<body> <div id="root"> <child-one v-if="type === 'child-one'"></child-one> <child-two v-if="type === 'child-two'"></child-two> <button @click="change">change</bu原创 2020-06-12 10:40:38 · 178 阅读 · 0 评论 -
你看我插不插你之vue中slot插槽的用法(2.x的版本)
一、引入和 HTML 元素一样,我们经常需要向一个组件传递内容,但是这个时候十分不方便,比如下面的这种情况(父组件给子组件传递一个p标签)<!DOCTYPE html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit原创 2020-06-12 00:05:17 · 437 阅读 · 0 评论