接触过vue的童鞋都知道,组件的模板一般都是在template选项内定义的,如

 Vue.component('child-component', {

     template:  '<h3>我是闰土大叔</h3>'

 })

这个用法都是老生常谈了,今天来聊聊Vue的内联模板。看过vue文档的同学都知道,Vue提供了一个内联模板的功能,在使用组件时,给组件标签使用inline-template特性,组件就会把它的内容当做模板,而不是把它当成内容分发,这样做的好处是,让模板更灵活。

介绍完内联模板的概念后,接下来我要分享一个我在工作中碰到的bug,关于内联模板,以及我debug的过程。

先来贴出案发现场的代码片段:

 <div id="app">

   <child-component inline-template>

     <div>

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

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

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

     </div>

    </child-component>

 </div>

 <script src="js/vue.js"></script>

 <script>

 Vue.component('child-component', {

   data : function () {

     return {

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

     }

   }

 });

 var app = new Vue({

   el : ' #app ',

   data:{

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

   }

 })

 </script>

渲染后的理想结果本应该是:

 <div id="app">

     <div>

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

         <p>在父组件声明的数据</p>

         <p>在子组件声明的数据</p>

     </div>

 </div>        

可在Chrome里显示的DOM节点却是这样的:

不仅第一个P标签内的插值没有渲染出来,而且在控制台里还报了一个错误:

说什么Property or method "message" is not defined on the instance but referenced during render.(属性或方法“message”不是在实例上定义的,而是在呈现过程中引用的。)

这个报错让我一脸懵逼,我可是照着书上的代码敲的,来来回回看了N遍,一模一样啊。而且书内提及 “ 在父组件中声明的数据message和子组件中声明的数据msg,两个都可以渲染。”

相信很多刚接触vue的新人童鞋都有这种体会,照着书上的代码敲了一遍,结果运行出错,与书上说的结果不一致。当你仔仔细细地检查了半天还是没发现哪错了的时候,你会不会内心抓狂到怀疑人生?

别急,这个时候你一定要有自己的判断,尽信书则不如无书。这句话出自于孟子,释义是读书时应该加以分析,不能盲目的去相信书中所言,一定要辩证的看待问题。万一这本书在排版的时候小编大意写错了呢?也有可能吧。我们对所谓的技术书籍,在尊敬作者的前提下,也要有批判精神。

其实,console控制台里的错误提示信息,就给你指明了debug的方向。通读一遍代码,我们可以分析一下,属性message是定义在父组件中的data选项内的,而调用的时候是在子组件里面调用,首先在没有任何干涉的情况下,父子组件是没有互通有无的功能的。所以,这时候你应该会想到,父子组件间传递数据用props啊!有了思路后,那就赶紧把代码敲起来吧:

运行一遍后,果然如你所愿,第一个P标签里的插值顺利地渲染出来了。

除了内联模板,Vue还提供了另一种效率比较高的定义模板的方式,就是x-template。如果你之前没有使用过webpack、gulp等构件工具,试想下你的组件template的内容很冗长很复杂,如果都在javascript里拼接字符串,效率是很低的,因为不能像写html那么舒服(除非你用ES6里面的模板字符串)。

Vue提供了另一种定义模板的方式,在<script>标签里使用text/template类型,并且指定一个id,将这个id赋给template,举个栗子:

 <div id="app">

   <my-component></my-component>

   <script type="text/x-template" id="my-component">

     <div>这是组件的内容</div>

   </script>

 </div>

 <script src="js/vue.js"></script>

 <script>

 Vue.component('my-component',{

   template:'#my-component'

 });

 var app = new Vue({

   el:'#app'

 })

 </script>

这样,在<script>标签里,你可以愉快地写html代码了,不用考虑换行等问题。

很多刚接触Vue开发的新手会非常喜欢这个功能,因为用它,再加上组件知识,就可以很轻松地完成交互相对复杂的页面和应用了。如果再配合一些构件工具(gulp)组织好代码结构,开发一些中小型产品是没有问题的。

不过Vue的初衷并不是滥用它,因为它将模板和组件的其他定义隔离了。在之后的文章里,我会介绍如何使用webpack来编译.vue的文件,从而优雅地解决html书写的问题。

今天的文章就分享到这里。

 

浅谈Vue模板的那些事儿的更多相关文章

  1. 浅谈Vue下的components模板

    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...

  2. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  3. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  4. 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  5. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

  6. 浅谈dedecms模板引擎工作原理及其自定义标签

    浅谈dedecms模板引擎工作原理: 理解织梦模板引擎有什么意思? 可以更好地自定义标签.更多在于了解织梦系统,理解模板引擎是理解织梦工作原理的第一步. 理解织梦会使我们写PHP代码是更顺手,同时能学 ...

  7. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  8. 【Vue】浅谈Vue(一):从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...

  9. 浅谈vue性能优化

    基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...

随机推荐

  1. [Shell]crontab 运行任务调用shell脚本,相对路径无法找到

    问题出现的场景大概就是 1  cron调用一个python脚本 2  python脚本中调用一个shell脚本(对日志分析)获取shell输出然后发送邮件 类似一个监控任务. 直接运行python脚本 ...

  2. Django的Models(二)映射关系

    关系分为三种: 一对一 :user2 = models.OneToOneField("UserInfo") 一对多:user = models.ForeignKey("U ...

  3. NanUI文档 - 开始使用NanUI

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  4. 【maven教程】(1)---maven环境配置

    maven环境配置 刚开始学习maven,现在项目需要用到maven,而且他确实很好用,也比较容易上手,我也是主要通过视频学习,在写博客的时候也会总结其它人所写 博客,从简到难,如果你也是初学者那接下 ...

  5. Centos7安装配置Xhgui

    XhProf是Facebook出品的一个PHP性能监控工具,只包含基本的界面和图形来分析数据.后来Paul Reinheimer在此基础上开发了Xhgui,提供了更好的界面和功能,其主页在https: ...

  6. Python 项目实践二(生成数据)第一篇

    上面那个小游戏教程写不下去了,以后再写吧,今天学点新东西,了解的越多,发现python越强大啊! 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关,而数据挖掘指的是使用代码来探索数据集的 ...

  7. 初次使用Python脚本,proto协议文件转Lua代码

    使用IntelliJ IDEA编辑器编写Lua脚本的时候,安装一个插件 "EmmyLua" 可以对有代码提示功能 想把protoBuf协议文件转成Lua代码,然后给出代码提示 第一 ...

  8. 【java】文件操作java.io.File

    package 文件操作; import java.io.File; import java.io.IOException; public class TestFile { public static ...

  9. IOS学习7——cocoapod安装与使用教程

    参考: iOS开发-CocoaPods使用详细说明  iOS开发-CocoaPods使用详细说明 一.CocoaPods简述 iOS开发时,项目中经常会需要引用第三方框架库,如果每用到一个第三方框架哦 ...

  10. node学习心得

    此次学习主要使用的是基于nodejs平台的web应用开发框架. 一.express的工程结构 1.bin/www:express的执行入口,存放可执行文件: 2.node_modules:存放pack ...