vue2
文章平均质量分 61
vue2的相关知识点
lick_dog_
这个作者很懒,什么都没留下…
展开
-
vue中的计算属性和监听属性
vue中的计算属性和监听属性原创 2022-09-15 23:31:21 · 293 阅读 · 0 评论 -
浅谈vue-router的两种模式
浅谈vue-router的两种模式hash模式history模式 //可以自己实验看差别 <button id="rotte" onclick="changeUrl()"> hash模式1 </button> <button onclick="changeUrl2()"> hash模式2 </button> <button onclick="changeUrl3()"&原创 2021-12-12 14:23:34 · 436 阅读 · 0 评论 -
vue的teleport
vue的teleport关于官网的介绍官网解释例子:子组件圆的css样式此时页面效果在父组件中(因为home这个div设置absolute所以组件中的圆是以home这个div作为参考,但是我们想要这个圆以body为父级元素进行参考,此时我们就可以使用teleport)改造子组件,添加teleport,to代表以谁为父级改造之后的效果此时圆浮动就是以body为父级进行参考的与vue components一起使用官网例子在同一目标上使用多个teleport<telep原创 2021-12-07 13:26:19 · 266 阅读 · 0 评论 -
vue 自定义指令
vue 自定义指令全局注册const app = Vue.createApp({})// 注册一个全局自定义指令 `v-focus`app.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… mounted(el) { // Focus the element el.focus() }})局部注册 data(){ return {} }, directives:{ focus: {原创 2021-12-06 22:52:42 · 106 阅读 · 0 评论 -
vue组件之间的传值归纳
vue组件之间的传值归纳prop和$emit使用方法组件嵌套过深的时候,使用provide和inject使用方法ref 也可以直接获取父组件或子组件的数据在组件或者html标签上我么都能使用ref在html标签上使用ref在组件上使用ref此时可以直接访问到组件中的data属性action,组件中的方法也是能够访问到的在子组件中我们也能访问到父组件的方法和属性直接通过this.$parent.属性或者方法名就能访问到父组件注意当 ref 与 v-for 一起使用原创 2021-12-06 14:53:56 · 173 阅读 · 0 评论 -
vue provid/inject
vue provid/inject当组件嵌套不深我们可以使用prop和$emit进行传递我们需要的值,但是一旦组件嵌套过深,再这样一层一层通过组件间传值获取数据就比较麻烦,此时我们就需要通过provide / inject来进行传值父组件中跟data一样可以是对象模式也可以是函数模式子组件中处理响应式例子...原创 2021-12-06 11:59:47 · 284 阅读 · 0 评论 -
vue slot(插槽)
vue slot(插槽)渲染作用域规则:父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。父级组件此时这种情况下,action不会去访问组件里面的action只会去访问父级里面的备用内容(默认内容)当父级里面没写东西,这个插槽就会默认显默认内容具名插槽组件内<div class="container"> <header> <slot name="header"></slot> &l原创 2021-12-06 11:01:32 · 92 阅读 · 0 评论 -
vue中的prop
vue中的prop1、 一般情况接受prop里面数据是以数组的形式进行接受props: ['title', 'likes', 'isPublished', 'commentIds', 'author']2、我们可以传递静态或者动态的数据到prop里面,且传递的数据可以有很多类型vue官方例子3、props验证 props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型原创 2021-12-05 11:58:20 · 652 阅读 · 0 评论 -
vue组件的基础 父子组件的传值
vue组件的基础 父子组件的传值在我们vue项目目录中有个components文件在里面我们是专门注册组件的创建组件创建组件就跟我们创建一个vue文件一样的,它也有单独的data,methods,周期等,创建组件有全局创建和局部创建,但是我们几乎都只会用局部创建很少会用到全局创建,全局创建在打包时不管你用没用到都给你一起打包,局部我们创建过后了除自身不会使用,其余想在那使用就在那引入就行。使用组件父子组件之间的传值通过props实现父组件向子组件传值**父组件中**子组件中传递原创 2021-12-04 23:18:07 · 299 阅读 · 0 评论 -
vue v-if v-show v-for 数组
vue v-if v-showv-if 通过创建和销毁DOM来显示或者隐藏DOM元素v-if可以和v-else-if和v-else一起搭配使用v-if可以直接作用在template标签上<template> <div class="home"> <template v-if="false">//此时该template下面的内容都是不可见的 <h1>hahah</h1> &l原创 2021-12-04 09:42:45 · 3360 阅读 · 1 评论 -
vue 中的事件对象,事件修饰符,按键修饰符,鼠标修饰符,精确修饰符,表单修饰符
获取事件对象 $event有几点我们我们需要注意下绑定事件时没有()的话,第一个参数默认就是事件对象绑定事件,有()但没传event那么则获取不到event那么则获取不到event那么则获取不到event如果需要使用$event那么我们得进行占位,一般放在最后vue事件修饰符.stop:等同于 JavaScript 中的 event.stopPropagation() ,防止事件冒泡;.prevent :等同于 JavaScript 中的 event.preventDefault()原创 2021-12-03 12:13:48 · 594 阅读 · 0 评论 -
vue中属性及样式绑定
vue中属性及样式绑定直接上代码 那个不会点哪里<template> <div class="home"> 第一种直接写class <!--<div class="circle">//直接写class--> 第二种使用data中属性动态绑定的样式 <!--<div :class="className">//使用data中属性动态绑定样式--> 第三种绑定多个class原创 2021-12-03 10:07:31 · 994 阅读 · 0 评论 -
vue3 使用cue-cli3搭建vue3项目
vue3 使用cue-cli3搭建vue3项目检查node版本 vue-cli的版本node -v 检查node版本 vue -V这里的v是大写检查vue-cli的版本 网络慢可以安装淘宝镜像vue-cli如果版本过低建议先卸载再安装卸载npm uninstall vue-cli -g安装npm install -g @vue/cli创建vue3项目命令 vue create 项目名称如果想在某个文件夹下创建项目1、可以直接将文件夹在开发软件里打开然后进行创建2、直接找到该文件夹在该原创 2021-12-02 23:18:35 · 324 阅读 · 0 评论 -
vue3目录结构详解
vue3结构目录详解本人目前还未开始使用ts 准备后续全面学习 到时候应该会多发点ts和vue3搭配使用的内容原创 2021-12-02 22:46:06 · 575 阅读 · 0 评论 -
vue computed和watch区别及如何使用
vue computed和watch区别及如何使用computed(计算属性)要点是一个函数要有返回值 否则不起作用的是具有缓存性质的,通过计算data或者props中声明的值来计算出新的值,如果依赖的值发生改变就会重新计算,如果没有发生变化,再获取该值时会直接从缓存中获取值是不支持异步的,如果在里面使用异步的话会直接报错的当一个属性需要从data或者props中获得的数据计算而来且是一对一或者多对一的情况我们就可以使用computed使用watch(监听属性)要点1、不支持缓存数原创 2021-12-02 17:49:39 · 365 阅读 · 0 评论 -
前端面试 vue2和vue3的双向绑定原理分析
前端面试 vue2、vue3双向绑定原理vue3 双向绑定原理首先介绍Proxy代理proxy不是对原对象而是对返回的对象进行代理,proxy是对整个对象进行代理的不是对象中某个属性Proxy有两个参数 第一个是需要代理的对象 第二个是handler需要对数据进行操作的方法如 get setget有两个参数 第一个是代理的对象 第二个是key也就是对象中的某个属性名set有三个参数 第一个和第二个和get一样 但三个是我们重新设置新的值 <input type="text" v原创 2021-12-01 22:51:33 · 422 阅读 · 0 评论 -
vue中的vuex(状态管理)
vuex的属性及其使用方法及其规范当项目过大页面可能就嵌套较深此时我们进行两个页面之间的传值可能就比较麻烦这时就可以使用vuex来实现数据的管理、还有当系统设置了单点登录时那么token我们可能每个页面都要用到这种情况我们也可以使用vuex来进行管理。vuex有五个属性stategettersmutationsactionsmodulesstore是在创建vue项目时我们就对其安装了的statestate的声明// 在stort中如何定义state中的数据import { cre原创 2021-12-01 21:26:59 · 354 阅读 · 0 评论