![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 74
萌新小吉
前端萌新成长历程
展开
-
vue组件传值
vue的组件传值分为三种方式父传子 子传父 非父子组件传值父传子父组件通过 prop 给子组件下发数据父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用v-bind 将子组件中预留的变量名绑定为data里面的数据即可子组件<template> <div id="container"> {{msg}} </div></template>.原创 2022-04-26 20:58:08 · 269 阅读 · 0 评论 -
nextTick()方法的使用
定义在下次 DOM 更新循环结束之后执行延迟回调。为了在修改数据之后获取更新后的 DOM,就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;可以理解为:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,用法将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。全局方法 Vue.nex原创 2022-04-25 15:58:32 · 4438 阅读 · 0 评论 -
$refs的用法
在Vue中,当我们要获取dom节点,元素绑定ref之后,直接通过this.$refs可以直接拿到节点,这样可以帮助方便快捷的拿到节点refref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件 通俗的讲,ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例注:ref要在挂载之后才能使用,所以需要在mou原创 2022-04-25 15:17:49 · 2566 阅读 · 0 评论 -
Vscode生成vue模板
1.打开vscode,在文件--》首选项--》用户片段中找到 vue.json2.将vue.json中的内容替换成下面的内容{ "vh": { "prefix": "vh", // 触发的关键字 输入vh按下tab键,可以是任何关键字 "body": [ "<!-- $1 -->", "<template>", "<div class='$2'>$5</div>", "</te原创 2022-03-07 12:05:12 · 260 阅读 · 0 评论 -
Vuex学习总结
目录一、Vuex概述1.Vuex 是什么?2.什么是“状态管理模式”?3.Vuex的组成结构4.安装二、Vuex核心1.store(1)、创建store(2)、在 Vue 组件中获得 Vuex 状态(3)、mapState辅助函数(4)、对象扩展运算符2.getters(1)、通过属性访问(2)、通过方法访问(3)、mapGetters辅助函数3.Mutation(1)、提交载荷(Payload)(2)、在组件中提交 Mutati...原创 2021-11-05 15:07:17 · 214 阅读 · 0 评论 -
Vue生命周期详解
在学习生命周期函数之前,首先我们得对生命周期有一个大致的了解 每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。生命周期图:过程大概就是:new Vue()new Vue()实例化一个vue实例,然后init初始化event 和 lifecycle, 其实这个过程中分别调用了3个初始化函数(initLifecycle(), initEvents(),...原创 2021-11-04 16:04:06 · 666 阅读 · 0 评论 -
Vue双向绑定
一、双向绑定概述1.什么是双向绑定双向绑定是vue,js实现共享数据的一种手段;采用的方式有:数据劫持 发布者-订阅者模式具体是通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。2.具体步骤需要observer(观察者)对数据进行劫持并监听所有属性,如果有变动的,就通知订阅者对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的原创 2021-11-02 13:36:27 · 224 阅读 · 0 评论 -
Vue项目新手上路
目录一、创建工程1.创建工程2.安装依赖3.npm命令解释4.项目目录安排二、创建登录页面三、路由嵌套1.创建用户信息组件2. 修改首页视图3. 配置嵌套路由四、参数传递五、组件重定向路由模式与 404六、 疑问解答一、创建工程1.创建工程vue2创建工程的命令格式为:vue init webpack 项目名我们创建一个 learn 项目vue init webpack learn一路都选择no即可说明:Pr原创 2021-11-01 12:57:46 · 309 阅读 · 0 评论 -
Vue.js学习总结
目录一、Vue.js的基础介绍1.什么是Vue.js2.Vue.js的特点3.Vue.js的安装4.创建一个Vue程序二、基础语法指令1.v-bind2.v-if, v-else3.v-else-if4.v-for5.v-on三、双向绑定、组件1.什么是双向数据绑定2.表单双向数据绑定(1)、单行文本(2)、多行文本(3)、单复选框(4)、多复选框(5)、单选按钮(6)、下拉框3.组件(1)、什么是组件(2)、组件基原创 2021-10-31 19:44:15 · 6523 阅读 · 0 评论 -
Vue使用库
vuex★8043 - 专为 Vue.js 应用程序开发的状态管理模式 vue-loader★1847 - Vue.js 针对Webpack的组件装载插件 vue-validator★1807 - vue的验证器插件 vue-lazyload★1224 - 用于懒加载的Vue模块 vuelidate★1075 - 简单轻量级的基于模块的Vue.js验证 vue-i18n★1053 - VueJS的多语言切换插件 qingcheng★736 - qingcheng主题 Vue-So...原创 2021-10-28 20:56:06 · 249 阅读 · 0 评论 -
Vue项目
vue2-elm★8036 - 重写饿了么webapp Vue-cnodejs★2491 - 基于vue重写Cnodejs.org的webapp NeteaseCloudWebApp★1549 - 高仿网易云音乐的webapp vue2-happyfri★1535 - vue2及vuex的入门练习项目 vue-zhihu-daily★1010 - 知乎日报 with Vuejs vue2-demo★994 - 从零构建vue2 + vue-router + vuex 开发环境 vue...原创 2021-10-28 20:52:27 · 174 阅读 · 0 评论