在学习《Vue实战》一书时，学习到组件高级应用-内联模板这一小节时，照着书上的例子敲了一遍，发现未达到预期，切报错。

书上源代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset=” utf-8” >

     <title>内联模板</title>

     <script src="../../vue.js" type="text/javascript"></script>

 </head>

 <body>

     <div id="app" v-cloak>

         Vue提供一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当作模板，而不是把它当作内容分发。

         <child-component inline-template>

             <div>

                 <h2>在父组件中定义子组件的模板</h2>

                 <p>{{message}}</p>

                 <p>{{msg}}</p>

             </div>

         </child-component>

     </div>

 <script>

     Vue.component('child-component',{

         data:function(){

             return {

                 msg:'在子组件声明的数据'

             }

         }

     });

     var app=new Vue({

         el:'#app',

         data:{

             message:'在父组件中声明的数据'

         }

     })

 </script>

 </body>

 </html>

实现效果及错误如下：

经查询：inline-template没有那么强大，组件之间的通信仍然需要使用props，修改如下代码即可实现。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset=” utf-8” >

     <title>内联模板</title>

     <script src="../../vue.js" type="text/javascript"></script>

 </head>

 <body>

     <div id="app" v-cloak>

         Vue提供一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当作模板，而不是把它当作内容分发。

         <child-component inline-template  :message="message">

             <div>

                 <h2>在父组件中定义子组件的模板</h2>

                 <p>{{message}}</p>

                 <p>{{msg}}</p>

             </div>

         </child-component>

     </div>

 <script>

     Vue.component('child-component',{

         props:['message'],

         data:function(){

             return {

                 msg:'在子组件声明的数据'

             }

         }

     });

     var app=new Vue({

         el:'#app',

         data:{

             message:'在父组件中声明的数据'

         }

     })

 </script>

 </body>

 </html>

Vue内敛模板的更多相关文章

  1. 前端框架之Vue(2)-模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  2. Vue：模板&渲染函数学习

    模板&渲染函数区别: 1.代码量:模板代码重复逐行拼写,渲染函数可以迭代拼接方式实现重复代码. 2.函数式组件中应用:基于模板的函数式组件需要手动添加特性和事件,给予渲染函数的函数是组件使用c ...

  3. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布，并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  4. vue基础——模板语法

    模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...

  5. vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容

    vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...

  6. vue基础---模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  7. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  8. VUE：模板语法（小白自学）

    VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...

  9. 让Sublime Text3支持新建.vue高亮显示模板

    首先要使用Package Control,安装要好 Vue Syntax Highlight和sublimetmpl插件. 1, 在Packages\SublimeTmpl\templates目录下新 ...

随机推荐

  1. BZOJ1076/Luogu2473 奖励关（SCOI2008）状压DP+期望DP

    题意:给n(n<=15)种宝物宝物有价值w且每个宝物有一个前置宝物(即你必须先吃过它的所有前置宝物至少一次才能吃该宝物),共有m轮游戏,每一轮会在n种宝物等概率选一个出来,因为宝物价值可正可负你 ...

  2. java通过反射拿到mybatis中的sql语句并操作

    private static final int MaxBatchLength = 100; public void updateBatch(List<T>list, BaseMapper ...

  3. vue 限制input[type=number]的输入位数策略整理

    https://blog.csdn.net/weistin/article/details/79664261 vue type="number   设置maxlength 是无效的 我们可以 ...

  4. ARC096E Everything on It 容斥原理

    题目传送门 https://atcoder.jp/contests/arc096/tasks/arc096_c 题解 考虑容斥,问题转化为求至少有 \(i\) 个数出现不高于 \(1\) 次. 那么我 ...

  5. CF 49E Common ancestor

    传送门 模拟赛T1就自闭了( 才不会说我是去刚T2了来着 感觉非常暴力的一个题? 出题人良心开大数据范围 n=100 还是原来的n^4*26算法我也是自闭了 不过貌似跑不到n^4? 真·大力出奇迹 一 ...

  6. Delphi Win API 函数 [ ShellAPI ] ShellExecute 函数

    引用单元:uses ShellAPI; 函数原型:function ShellExecute(hWnd: HWND; Operation, FileName, Parameters,Directory ...

  7. 第一次用angularJS做后台管理点滴

    很早以前就大概看过一点angualrjs,但是没有项目,一直没有进行下去,就是干巴巴的看着,过了一段时间发现什么也不记得了. 来yulebaby我的第一个后台管理是用easyui做的,做完那个以后发现 ...

  8. HDU 6058 Kanade's sum —— 2017 Multi-University Training 3

    Kanade's sum Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  9. 【LeetCode 42】接雨水

    题目链接 [题解] 考虑每个位置它最后能接多少单位的水. 显然就是这个min(位置左边最高的位置,位置右边最高的位置)-当前这个位置的高度. 这就是这个位置最后水上涨的高度. 两个边界注意是不会储水的 ...

  10. LVS负载均衡中arp_ignore和arp_annonuce参数配置

    先简单的介绍下关于LVS负载均衡 LVS(Linux  Virtual Server)Linux服务器集群系统 针对高可伸缩,高可用服务的需求,给予IP层和内容请求分发的负载均衡调度解决方法,并在Li ...