Vue-02

data属性

通过data属性指定自定义组件的初始数据,要求data必须是一个函数,如果不是函数就会报错。

Props属性

组件可以嵌套使用,叫做父子组件。那么父组件经常要给子组件传递数据这叫做父子组件通信。

父子组件的关系可以总结为 props 向下传递,事件向上传递。

父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。

1、在父组件中定义数据

2、在使用组件时,绑定父组件中的数据

3、在子组件中通过props属性声明父组件中传递过来的参数

4、在template属性中使用父组件中的参数

Props属性

组件可以嵌套使用,叫做父子组件。那么父组件经常要给子组件传递数据这叫做父子组件通信。

父子组件的关系可以总结为 props 向下传递,事件向上传递。

父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。

1、在父组件中定义数据

2、在使用组件时,绑定父组件中的数据

3、在子组件中通过props属性声明父组件中传递过来的参数

4、在template属性中使用父组件中的参数

7、props校验

子组件在接收父组件传入数据时, 可以进行props校验,来确保数据的格式和是否必传。可以指定一下属性:

1) type: 指定数据类型 String Number Object ...注意不能使用字符串数组,只能是对象大写形式

2) required: 指定是否必输

3) default: 给默认值或者自定义函数返回默认值

4) validator: 自定义函数校验

非props属性

  引用子组件时,非定义的props属性,自动合并到子组件上,class和style也会自动合并。

Props属性

组件可以嵌套使用,叫做父子组件。那么父组件经常要给子组件传递数据这叫做父子组件通信。

父子组件的关系可以总结为 props 向下传递,事件向上传递。

父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。

1、在父组件中定义数据

2、在使用组件时,绑定父组件中的数据

3、在子组件中通过props属性声明父组件中传递过来的参数

4、在template属性中使用父组件中的参数

7、props校验

子组件在接收父组件传入数据时, 可以进行props校验,来确保数据的格式和是否必传。可以指定一下属性:

1) type: 指定数据类型 String Number Object ...注意不能使用字符串数组,只能是对象大写形式

2) required: 指定是否必输

3) default: 给默认值或者自定义函数返回默认值

  4) validator: 自定义函数校验

自定义事件

父组件给子组件传值使用props属性, 那么需要子组件更新父组件时,要使用自定义事件$on和$emit:

$on监听: 不能监听驼峰标示的自定义事件, 使用全部小写(abc)或者-(a-b-c)

$emit主动触发: $emit(事件名,传入参数)

主动挂载

  自定义事件不仅可以绑定在子组件,也可以直接挂载到父组件,使用$on绑定和$emit触发。

具名插槽

具名插槽slot, 就是给插槽起个名字。

在子组件定时可以定定义多个插槽,同时通过name属性指定一个名字,如:,父组件引用时使用< slot='header'>进行插槽选择。

作用域插槽slot-scope,

父组件通过插槽混入父组件的内容, 子组件也可以通过slot作用域向插槽slot内部传入数据,使用方式:,

父组件通过<template slot-scope="props">进行引用。

动态组件

  使用<component>标签的is属性,动态绑定多个组件到一个挂载点,通过改变is绑定值,切换组件。

动态组件

使用标签的is属性,动态绑定多个组件到一个挂载点,通过改变is绑定值,切换组件。

keep-alive

如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令。

refs

  使用ref 给每个组件起一个固定的名字,方便后续直接引用操作,在父组件中使用$refs访问子组件。

$watch第一个参数是需要监听的属性,第二个是回调函数用法和watch一样。需要取消监听只需拿到监听对象的引用,这个引用是返回一个函数对象,执行该对象就可以取消监听。

同时监听多个属性,可以不指定属性:

computed属性

computed计算属性用于定义比较复杂的属性计算

computed和methods区别:

计算属性使用computed定义, 方法使用methods定义

计算属性使用时不加括号执行符

计算属性是基于它们的依赖进行缓存的,计算属性只有在它的相关依赖发生改变时才会重新求值。否则返回之前计算好的值,性能更高!

computed属性

computed计算属性用于定义比较复杂的属性计算

computed和methods区别:

计算属性使用computed定义, 方法使用methods定义

计算属性使用时不加括号执行符

计算属性是基于它们的依赖进行缓存的,计算属性只有在它的相关依赖发生改变时才会重新求值。否则返回之前计算好的值,性能更高!

自定义指令

全局指令

局部指令

使用directive定义,第一个参数为指令名,使用时加上v-前缀才能生效。

  inserted属性指当绑定元素插入到DOM时调用。

钩子函数的参数有三个:

1)el:当前指令绑定元素

2)binding:当前指令绑定的所有信息对象,有以下属性:

name:指令名,不包括 v- 前缀。

value:指令的绑定值,例如:v-my-directive="1 + 1", value 的值是 2。

oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression:绑定值的字符串形式。例如 v-my-directive="1 + 1" ,expression 的值是 "1 + 1"。

arg:传给指令的参数。例如 v-my-directive:foo,arg 的值是 "foo"。

modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

3)vnode:Vue 编译生成的虚拟节点

4)oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated

  钩子中可用。

过滤器

Vue允许自定义过滤器,可被用作一些常见的文本格式化。

过滤器可以用在两个地方:mustache 插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

  过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,183评论 0 25
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,043评论 0 29
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,571评论 0 32
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,307评论 0 3
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 2,684评论 1 17