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 ...
随机推荐
- solr入门之多线程操作solr中索引字段的解决
涉及的问题: 建索引时有一个字段是该词语出现的次数,这个字段是放在solr里的 而我用的是多线程来进行全量导入的,这里就涉及到了多线程问题 多个线程操作同一个变量时怎样处理? 我是这样子做的 : 首 ...
- RJ45接口定义及网线线序
RJ45接口定义 常见的RJ45接口有两类:用于以太网网卡.路由器以太网接口等的DTE类型,还有用于交换机等的DCE类型. DTE我们可以称做“数据终端设备”,DCE我们可以称做“数据通信设备”.从某 ...
- 使用Kotlin如何startActivity
没错,就是这么简单的一个功能,不过由于初学kotlin,所以找了很久才找到如何写,所以还是贴出来给需要的人吧,上代码: startActivity(Intent(MainActivity@this, ...
- BZOJ3669（NOI2014）：魔法森林 （LCT维护最小生成树）
为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同学在号节点1,隐士则住在号节点N ...
- rake db:migrate 与 bundle exec rake db:migrate 的区别(copy)
[说明:资料来自http://blog.csdn.net/lihuan974683978/article/details/8715414] 之前一直没弄明白rake db:migrate 与 bun ...
- Gym 100531J Joy of Flight (几何)
题意:你从开始坐标到末尾坐标,要经过 k 秒,然后给你每秒的风向,和飞机的最大速度,问能不能从开始到末尾. 析:首先这个风向是不确定的,所以我们先排除风向的影响,然后算出,静风是的最小速度,如果这都大 ...
- jQuery入坑指南
前言 Ajax官方文档 爱jQuery jQuery插件库 jQuery中文api input 赋值和取值 记录一下: 在写一个input赋值,二话不说就直接利用了$('#xx').val()来进行取 ...
- Android属性动画ObjectAnimator的使用1
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/106 属性动画ObjectAnimator的使用 属性动画 ...
- 【原创】CentOS 6.5 中安装 Mysql 5.6，并远程连接Mysql
ι 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.在安装CentOS时,若选择的是Basic Server(可支持J2EE开发),则新安装好的CentOS系统中默认是已经安装了一个mysq ...
- 结对测试vs随机测试
在接口测试过程中,最关键的是对参数的各种情况进行测试. 随机测试是指随机选择一些参数值来测. 结对测试是指parewise算法生成较高"性价比"的组合情况来测. 随机测试存在的问题 ...