![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习
明明在学JAVA
不为失败找借口,只为成功找方法。
展开
-
Vue_源码简单分析,数据代理、模板解析、数据绑定
分析vue作为一个MVVM框架的基本实现原理1.数据代理2.模板解析3.数据绑定数据代理数据代理:通过一个对象代理另一个对象中属性的操作(读/写)vue数据代理:通过vm对象来代理data对象中所有属性的操作好处:更方便的操作data中的数据基本实现流程:1.通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符2.所有添加的属性都包含...原创 2020-02-28 09:35:29 · 185 阅读 · 0 评论 -
Vue_组件间通信3,插槽slot
组件间通信传递消息,很多时候传递的都是数据;而slot可以传递标签TodoFooter.vue组件<template> <div class="todo-footer"> <label> <!--<input type="checkbox" v-model="checkAll"/>--> <...原创 2020-02-27 14:27:18 · 531 阅读 · 0 评论 -
Vue_组件间通信2,使用PubSubJS库
组件间通信第一种方式:使用标签传递数据,props声明接收属性组件间通信第二种方式:vue自定义事件,绑定事件监听和触发事件组件间通信第三种方式:消息订阅和发布,使用pubsubjs库使用ubsub通信的好处就是,两个组件间的位置没有任何要求有三层组件,App–List–Item在Item中有删除选中行的功能,在App中订阅消息,在Item中发布消息App.vue<templa...原创 2020-02-25 11:04:03 · 460 阅读 · 0 评论 -
Vue_组件化编码,组件间通信1,通过标签传递数据
组件化编码的基本流程:1.拆分组件2.实现静态组件:显示的界面数据是固定的,也没有交互3.动态组件:有两个方面是动态的,初始化显示和交互组件间通信1.通过标签传递组件接收父组件传递过来的数据,首先要有声明,接收传递过来的属性;这个属性就会成为组件对象的属性示例编码:拆分为App、Add、List和Item组件js的入口文件main.js/*入口JS*/import Vu...原创 2020-02-23 12:51:50 · 227 阅读 · 0 评论 -
Vue_自定义事件2
事件监听绑定、触发的另一种形式$on(eventName,data)App.vue组件<template> <div class="todo-container"> <div class="todo-wrap"> <!--<TodoHeader @addTodo="addTodo"/>--> ...原创 2020-02-20 15:07:02 · 95 阅读 · 0 评论 -
Vue_自定义事件1
事件有两个方面:一个是绑定监听,一个是触发事件或者分发事件使用#v-on绑定自定义事件<my-component v-on:my-event="doSomething"></my-component>每个Vue实例都实现了事件接口,即:1.使用$on(eventName)监听事件2.使用$emit(eventName,optionPayload)触发事...原创 2020-02-19 09:32:23 · 100 阅读 · 0 评论 -
Vue_编写项目
页面三要素:html,js,css组件:组件是页面的局部功能模块,可以包括html/css/js/img等(视情况而定),这些资源是组件的组成部分vue项目入口js,main.js一般会有一个根组件App.vue,放在src的根目录下index.html需显示的页面文件<!DOCTYPE html><html lang="en"><head&...原创 2020-02-18 11:41:50 · 177 阅读 · 0 评论 -
Vue_路由的理解
路由器:路由器管理路由,VueRouter()用来创建路由器的构造函数new VueRouter({ //多个配置项})路由:其实就是一种映射关系,键值对K-VK:pathV:前台路由:组件 后台路由:处理请求的回调函数routers:[{ //一般路由 path: '/about', component: About ...原创 2020-02-13 10:17:55 · 108 阅读 · 0 评论 -
Vue_过滤器
理解过滤器1) 功能: 对要显示的数据进行特定格式化后再显示2) 注意: 并没有改变原本的数据, 可是产生新的对应的定义和使用过滤器1) 定义过滤器 Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue }...原创 2020-02-13 10:15:26 · 100 阅读 · 0 评论 -
Vue_动画
动画的理解1) 操作 css 的 trasition(过渡) 或 animation(动画)2) vue 会给目标元素添加/移除特定的 class3) 过渡的相关类名 xxx-enter-active: 指定显示的 transition xxx-leave-active: 指定隐藏的 transition xxx-enter/xxx-leave-to: 指...原创 2020-02-12 10:05:02 · 123 阅读 · 0 评论 -
Vue_生命周期
今年这个年关过的紧张兮兮,疫情肆虐,咱蜗居就是为国家做贡献啦...既然不能出门,那只有打开电脑,学习使我快乐了.../(ㄒoㄒ)/~~最近正在学习前台框架vue,边学边笔记,也和大家一起分享一下觉得生命周期这一块还是挺重要的,而且对于我个人而言还是比较容易忽视的,做个笔记记录一下,嘿嘿下图展示了实例的生命周期:vue的生命周期分三个阶段:初始化显示、更新显示...原创 2020-02-09 21:54:06 · 772 阅读 · 0 评论 -
Vue_计算属性和监视
已经踏上复工的路途,到达小窝开始自我隔离中,不能外出那咱们就安心的继续学习吧( ̄▽ ̄)"最近正在学习前台框架vue,边学边笔记,O(∩_∩)O今天学习到计算属性和监视,顺便记录一下计算属性:1) 在 computed 属性对象中定义计算属性的方法2) 在页面中使用{{方法名}}来显示计算的结果计算属性高级:1) 通过 getter/setter 实现对属性数据...原创 2020-02-09 21:49:43 · 190 阅读 · 0 评论 -
Vue_初接触
年关已过,虽然现在疫情依然肆虐,但是相信我们离胜利已经不愿啦...最近正在学习前台框架vue,边学边笔记,O(∩_∩)OVue是一套用于构建用户界面的渐进式框架Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。Vue遵循MVVM模式M:model,即模型,可以理解为固定格式var vm = new V...原创 2020-02-09 21:46:12 · 669 阅读 · 0 评论