Vue学习
明明在学JAVA
不为失败找借口,只为成功找方法。
展开
-
Vue_源码简单分析,数据代理、模板解析、数据绑定
分析vue作为一个MVVM框架的基本实现原理 1.数据代理 2.模板解析 3.数据绑定 数据代理 数据代理:通过一个对象代理另一个对象中属性的操作(读/写) vue数据代理:通过vm对象来代理data对象中所有属性的操作 好处:更方便的操作data中的数据 基本实现流程: 1.通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符 2.所有添加的属性都包含...原创 2020-02-28 09:35:29 · 189 阅读 · 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 · 533 阅读 · 0 评论 -
Vue_组件间通信2,使用PubSubJS库
组件间通信第一种方式:使用标签传递数据,props声明接收属性 组件间通信第二种方式:vue自定义事件,绑定事件监听和触发事件 组件间通信第三种方式:消息订阅和发布,使用pubsubjs库 使用ubsub通信的好处就是,两个组件间的位置没有任何要求 有三层组件,App–List–Item 在Item中有删除选中行的功能,在App中订阅消息,在Item中发布消息 App.vue <templa...原创 2020-02-25 11:04:03 · 462 阅读 · 0 评论 -
Vue_组件化编码,组件间通信1,通过标签传递数据
组件化编码的基本流程: 1.拆分组件 2.实现静态组件:显示的界面数据是固定的,也没有交互 3.动态组件:有两个方面是动态的,初始化显示和交互 组件间通信 1.通过标签传递 组件接收父组件传递过来的数据,首先要有声明,接收传递过来的属性;这个属性就会成为组件对象的属性 示例编码: 拆分为App、Add、List和Item组件 js的入口文件main.js /* 入口JS */ import Vu...原创 2020-02-23 12:51:50 · 230 阅读 · 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 · 97 阅读 · 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 · 104 阅读 · 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 · 179 阅读 · 0 评论 -
Vue_路由的理解
路由器:路由器管理路由,VueRouter()用来创建路由器的构造函数 new VueRouter({ //多个配置项 }) 路由:其实就是一种映射关系,键值对K-V K:path V:前台路由:组件 后台路由:处理请求的回调函数 routers:[{ //一般路由 path: '/about', component: About ...原创 2020-02-13 10:17:55 · 111 阅读 · 0 评论 -
Vue_过滤器
理解过滤器 1) 功能: 对要显示的数据进行特定格式化后再显示 2) 注意: 并没有改变原本的数据, 可是产生新的对应的 定义和使用过滤器 1) 定义过滤器 Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue }...原创 2020-02-13 10:15:26 · 102 阅读 · 0 评论 -
Vue_动画
动画的理解 1) 操作 css 的 trasition(过渡) 或 animation(动画) 2) vue 会给目标元素添加/移除特定的 class 3) 过渡的相关类名 xxx-enter-active: 指定显示的 transition xxx-leave-active: 指定隐藏的 transition xxx-enter/xxx-leave-to: 指...原创 2020-02-12 10:05:02 · 124 阅读 · 0 评论 -
Vue_生命周期
今年这个年关过的紧张兮兮,疫情肆虐,咱蜗居就是为国家做贡献啦... 既然不能出门,那只有打开电脑,学习使我快乐了.../(ㄒoㄒ)/~~ 最近正在学习前台框架vue,边学边笔记,也和大家一起分享一下 觉得生命周期这一块还是挺重要的,而且对于我个人而言还是比较容易忽视的,做个笔记记录一下,嘿嘿 下图展示了实例的生命周期: vue的生命周期分三个阶段:初始化显示、更新显示...原创 2020-02-09 21:54:06 · 775 阅读 · 0 评论 -
Vue_计算属性和监视
已经踏上复工的路途,到达小窝开始自我隔离中,不能外出那咱们就安心的继续学习吧( ̄▽ ̄)" 最近正在学习前台框架vue,边学边笔记,O(∩_∩)O 今天学习到计算属性和监视,顺便记录一下 计算属性: 1) 在 computed 属性对象中定义计算属性的方法 2) 在页面中使用{{方法名}}来显示计算的结果 计算属性高级: 1) 通过 getter/setter 实现对属性数据...原创 2020-02-09 21:49:43 · 194 阅读 · 0 评论 -
Vue_初接触
年关已过,虽然现在疫情依然肆虐,但是相信我们离胜利已经不愿啦... 最近正在学习前台框架vue,边学边笔记,O(∩_∩)O Vue是一套用于构建用户界面的渐进式框架 Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 Vue遵循MVVM模式 M:model,即模型,可以理解为固定格式var vm = new V...原创 2020-02-09 21:46:12 · 673 阅读 · 0 评论