<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of page</title>
</head>
<body>

<div id="example">
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>

</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script >
// 注册
Vue.component('child', {
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

// 创建根实例
new Vue({
el: '#example',
data:{
parentMsg:''
}
})
</script>
</html>

vue 组件 模板input双向数据数据的更多相关文章

  1. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  2. vue 结合localStorage 来双向绑定数据

    结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...

  3. vue组件中使用watch响应数据

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: 普通用法: <template> //视图 <input v-mode ...

  4. vue比较模板来跟新数据

    一,使用场景: 点击menu通过路由,跳转当前列表,第二次点击menu,希望可以刷新列表: 二,解决思路: 给路由添加时间戳: 三,参考观点: 用 :key管理可复用的元素 模板相同,会造成一种“复用 ...

  5. vue 利用 v-model 实现 双向传递数据..

    注意 <input type='hidden' :value='value'/> 变量名必须 是 value--- 不能叫其他名字++

  6. vue 组件 模板中根数据绑定需要指明路径并通信父

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...

  7. webpack+vue+.vue组件模板文件 所需要的包

    {  "name": "webpack-study02",  "version": "1.0.0",  "de ...

  8. 来吧！一文彻底搞定Vue组件！

    作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么. 事件通信的那些事 如何了解父子 ...

  9. vue组件化思想和模块化

    组件化 注册组件的基本步骤 创建组件构造器 (调用Vue.extend()方法) 注册组件 (调用Vue.component()方法) 注册组件语法糖 省去了调用Vue.extend()的步骤,而是可 ...

随机推荐

  1. CF 1138 E. Museums Tour

    E. Museums Tour 链接 分析: 按时间建出分层图,每个点形如(u,t),表示u在在t个时刻的点,tarjan缩点.每个强连通分量中的点都能经过,然后DAG上dp. 代码: #includ ...

  2. #2007. 「SCOI2015」国旗计划

    好久没更过博了.. 首先断环为链,因为线段互相不包含,所以对每个线段\(i\)可以找一个满足\(r_j\geq l_i\)的\(l_j\)最小的线段,dp的时候\(i\)就会从\(j\)转移过来 然后 ...

  3. 指定路由器(DR/BDR)和非指定路由器(DROTHER)的区别

    一:名词解释 DR:designated router 指定路由器. BDR:backup designated router 备份指定路由器. 二:DR/BDR出现的缘由 在广播网和NBMA网络中, ...

  4. 服务器路由配置--Route

    第1章 命令配置 虚拟服务器 网卡配置信息 虚拟网卡名称 虚拟网卡模式 服务器01 eth1 10.0.0.10/24 nat模式 服务器02 eth2 10.0.0.11/24 nat模式 eth3 ...

  5. Python学习之路：NumPy初识

    import numpy as np; //一维NumPy数组 myArray = np.array([1,2,3,4]); print(myArray); [1 2 3 4] //打印一维数组的形状 ...

  6. 模块化开发之butterknife 在 library中使用

    在Android开发中butterknife是一个很好的对资源初始化的工具,它可以使你的代码简洁通俗易懂,同时配合Android ButterKnife Zelezny插件可以让你写代码的速度提升至少 ...

  7. python包管理工具pip

    你可以使用一个名为 pip 的程序来安装.升级和移除软件包.默认情况下 pip 将从 Python Package Index <https://pypi.org> 安装软件包.你可以在浏 ...

  8. Hyperledger Fabric 1.2 --- Chaincode Operator 解读和测试（二）

    本文接上一节是测试部分 搭建一个模拟测试环境 作者将fabric release1.2工程中的 example-e2e进行了改造来进行本次实验: (1)首先我们将examples/e2e_cli/sc ...

  9. 高可用OpenStack（Queen版）集群-15.Glance&Cinder集成Ceph

    参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...

  10. php从入门到放弃系列-02.php基础语法

    php从入门到放弃系列-02.php基础语法 一.学习语法,从hello world开始 PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器&qu ...