vue2.0 静态prop和动态prop
动态prop：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
</head>
<body>
<div id="app">
<div>
<input v-model='parentMsg' />
<br />
<child v-bind:my-Message="parentMsg"></child>
<!--可以理解成var mymesage = parentMsg;-->
</div>
</div>
<template id="simpleDemo">
<div>
{{myMessage}}
</div>
</template>
<script>
/*props可以是数组或者是对象,用于接收父组件的数据.
props 对象允许配置高级选项,HTML特性不区分大小写,名字形式为驼峰式的prop作为特性时,我们
需要转为 a-b (短横线隔开)*/
var vm = new Vue({
el: "#app",
data: {
parentMsg: "hello Prop"
},
components: {
'child': {
template: "#simpleDemo",
props: ["myMessage"], //自定义名字
/*props:{
type:String,
required:true
},
props:{
type:Number，
default：100
}*/
}
}
})
</script>
</body> </html>
静态prop：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<div id="app">
<my-component :my-name="name" :my-age="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="2">子组件</th>
</tr>
<tr>
<td>名字</td>
<td>年龄</td>
</tr>
<tr>
<td>{{myName}}</td>
<td>{{myAge}}</td>
</tr>
</table>
</template>
<script>
var vm = new Vue({
el: "#app",
data: {
name: "小明",
age: 24
},
components: {
'my-component': {
template: "#myComponent",
props: ["myName", "myAge"]
}
}
})
</script>
</body> </html>
vue2.0 静态prop和动态prop的更多相关文章
- vue2.0 父子组件数据传递prop
vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...
- vue2.0+Element UI 实现动态表单（点击按钮增删一排输入框）
对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...
- Vue2.0组件实现动态搜索引擎（一）
原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.c ...
- # 2017-2018-2 20155228 《信息安全系统设计原理》 使用VirtualStudio2008创建和调用静态库和使用VirtualC++6.0创建和调用动态库
使用virtual c++ 6.0创建和调用动态库 不得不说一下关于环境的问题 只要我打一个响指,一半的安装在win7上的VC6.0都会因为兼容性问题直接崩掉 懒得研究怎么解决兼容性的问题了,直接开一 ...
- Windows 下VC++6.0制作、使用动态库和静态库
Windows 下VC++6.0制作.使用动态库和静态库 一.VC++6.0制作.使用静态库 静态库制作 1.如图一在VC++6.0中new一个的为win32 static library工程并新建一 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- Vue2.0 官方文档学习笔记
VUE2.0官方文档 基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...
- 项目vue2.0仿外卖APP（五）
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
- 通信vue2.0组件
vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...
随机推荐
- 哨兵和docker容器
1,redis哨兵的配置 redis-6379配置文件内容如下 cat redis-6379.conf port 6379 daemonize yes logfile "6379.log&q ...
- ES6 模块化(Module)export和import详解 export default
ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...
- envoy
微服务意味着网络更加依赖于服务抽象边界. 随着相互依赖的服务数量日渐增长,系统100%没问题的时间会变少,整个系统经常有部分功能处于降级状态.
- javaScript复制粘贴
1.clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能.可以在浏览器和 Node 环境中使用.支持 Chrome 42+.Firefox 4 ...
- Spark 大数据文本统计
此程序功能: 1．完成对10.4G.csv文件各个元素频率的统计 2．获得最大的统计个数 3．对获取到的统计个数进行降序排列 4．对各个元素出现次数频率的统计 import org.apache.sp ...
- 警告框在asp.net mvc中应用
Bootstrap与asp.net MVC框架结合,产生警告框.主要是利用控制器的TempData 字典对象 生成临时数据. ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个 ...
- TCP/IP协议的建立连接与关闭连接过程
一.建立连接(三次握手) 第一次握手:建立连接时,客户端发送SYN(seq=x)包到服务器,并进入SYN_SENT状态,等待服务器的确认.SYN:同步序列编号(Synchronize Sequence ...
- 杭电acm5698-瞬间移动(2016"百度之星" - 初赛（Astar Round2B）)
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=5698 Problem Description 有一个无限大的矩形,初始时你在左上角(即第一行第一列), ...
- Python unittest 基本框架解析（2）
下面例子,是一般测试框架的基本结构 框架知识点包括:实例化被测试模块类.装载测试用例.测试套件打包.保存测试输出结果.生成测试报告等 测试情况包括 :跳过某个case.执行成功.执行失败 #待测试 ...
- Python爬虫库-Beautiful Soup的使用
Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库,简单来说,它能将HTML的标签文件解析成树形结构,然后方便地获取到指定标签的对应属性. 如在上一篇文章通过爬虫 ...