vue学习--Props
Props:
props用以从父组件接收数据:
使用:
Vue.component('child',{
props:['msg'],
template:'<span>{{msg}}</span>'
});
声明:
<child msg='hello!'></child> // 字面量语法
<child v-bind:msg='parentMsg'></child> // 动态语法
*如果props是myMsg, html中需要用my-msg(即:camelCase - kebab-case, 因为html的特性是不区分大小写)
*字面量和动态语法稍有不同
<comp some-prop="1"></comp> // 传递了一个字符串 "1"
<comp :some-prop="1"></comp> // 传递实际的数字
Props绑定类型:
<child :msg="parentMsg"></child> // 默认为单向绑定
<child :msg.sync="parentMsg"></child> // 双向绑定
<child :msg.once="parentMsg"></child> //单次绑定
*如果prop是一个对象或数组,是按引用传递。不管使用哪种绑定方式,都将是双向绑定
Props验证:
props:{ // 此时props是一个对象
propA: Number,
propB:{
type: String, // 类型(原生构造器:String, Number, Boolean, Function, Object, Array)
required: true, // 是否必须项
default: 'thyiad', // 默认值(如果是Object, 默认值需由一个函数返回)
validator: function(value){ // 验证
return value === 'thyiad';
},
coerce:function(val){
return val+''; // 将值强制转换为字符串
return JSON.parse(val); // 将JSON字符串转换为对象
}
}
}
vue学习--Props的更多相关文章
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- 如何快速上手一个新技术之vue学习经验
碰到紧急项目挪别人的vue项目过来直接改,但是vue是18年初看过一遍,18年底再来用,早就忘到九霄云外了,结果丢脸的从打开vue开始学,虽然之前在有道云笔记做了很多记录,然后没有系统整理.所以借这次 ...
- Vue学习—组件的学习
1.什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能 ...
- Vue 学习文档
Vue 学习文档 vue 起步 引包 启动 new Vue(options) options: el 目的地(可以用类名.标签名等,也可以直接用mod元素) #elementId .elementCl ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- Vue中用props给data赋初始值遇到的问题解决
Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14 作者:yuyongyu 我要评论 这篇文章主要介绍了Vue中用props给dat ...
随机推荐
- GitKraken使用教程-基础部分(5)
7. 提交代码 1) 查看文件改动 修改了某个文件后,在程序右侧会出现已修改文件的列表(如图 1‑1),这里以Test.git 为例,修改了19264.h 的文件编码,将其改为utf8.Unstage ...
- 前端性能优化-keep-alive
什么是Keep-Alive Keep-Alive是浏览器端和服务器端约定的一种提高传输效率的协议.我先举个例子吧,我现在搬家,有10个箱子,如果我自己来搬的话,每次只能带一个箱子,那么搬到目的地,需要 ...
- c# 字符串大小写混合转换
我是个.net萌新,在大学是计算机应用专业 学的比较杂 出来准备走net方向 培训了两个月了 今天被出了一道上机题 题本来是挺简单的 输入一个字符 如果是大写则转换为小写 如果是小写则转换为大 ...
- ztree树形图自定义图标在jeecg框架中不显示
有时候工作遇到问题,就会硬着头皮去解决,今天给大家说一个ztree树形图自定义图标在jeecg框架中不显示的解决方法 对于这个问题,官方观法说法是在节点元素中加入icon的字段,然后后跟图标的url, ...
- 前端js限制上传文件类型及大小(1)
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Buffer的使用
虽然知道了怎么实例化Buffer,但这还远远不够,因为Buffer类使随nodejs一起发布的核心库,Buffer不仅能处理tcp连接中发送接收的数据,也能处理图像或者是压缩文件,甚至说文件系统里面的 ...
- 2018.8.6 学习 log4j.properties 配置文件
配置文件的话第一步当然是解决乱码问题 Eclipse中properties文件中文乱码解决方式 打开eclipse的properties文件时你会发现,其中部分中文注释乱码了,下面将写出如何设置pro ...
- python 合并字符串
[root@chenbj python]# cat name.py #!/usr/bin/env python # _*_ coding:utf-8 _*_ first_name = "ch ...
- 20145238-荆玉茗 《Java程序设计》第一次实验报告
实验一 Java开发环境的熟悉(Linux + Eclipse) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没 ...
- FastRCNN 训练自己数据集 (1编译配置)
http://www.cnblogs.com/louyihang-loves-baiyan/p/4885659.html 按照博客的教程配置,但自己在服务器上配置时,USE_CUDNN = 1会报错, ...