Vue内敛模板
在学习《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内敛模板的更多相关文章
- 前端框架之Vue(2)-模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue：模板&渲染函数学习
模板&渲染函数区别: 1.代码量:模板代码重复逐行拼写,渲染函数可以迭代拼接方式实现重复代码. 2.函数式组件中应用:基于模板的函数式组件需要手动添加特性和事件,给予渲染函数的函数是组件使用c ...
- 中小研发团队架构实践之生产环境诊断工具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如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- vue基础——模板语法
模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...
- vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容
vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...
- vue基础---模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue.js 模板语法
本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...
- VUE：模板语法（小白自学）
VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...
- 让Sublime Text3支持新建.vue高亮显示模板
首先要使用Package Control,安装要好 Vue Syntax Highlight和sublimetmpl插件. 1, 在Packages\SublimeTmpl\templates目录下新 ...
随机推荐
- psfaddtable - 添加一个Unicode字符表到控制台字体中
总览 psfaddtable 字体文件 表文件 [输出文件] 描述 Psfaddtable 命令融合了 字体文件 提供的 .psf 格式的控制台字体和 表文件 提供的Unicode字符表, 生成一个带 ...
- React（7） --react父子组件传参
react父子组件传参 父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数. 在父组件中: import React f ...
- 一、简单的图片上传并预览功能input[file]
一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...
- python指定cpu使用率，与内存占用率
python指定cpu使用率,与内存占用率 """ runing.py -c 2 -t 0.01 -m 1000 -c cpu核数,不加-c参数为最大核数 -t cpu运 ...
- 【python实例】判断是否是回文数
""" 输入一个数,判断一个这个数是否是回文数.例如:121,这个数反过来还是121,所以这个是回文数: 再如:134,这个数反过来是431,所以这不是一个回文数: 12 ...
- Autoit3 自动添加打印机
从网上找的代码进行了修改!! 其原理1\用注册表添加端口,2\重启打印服务 ,3最后使用"rundll32 printui.dll"命令进行添加打印机 如下: #RequireAd ...
- find命令进阶用法（一）
-cmin n: 查找 exactly n 分钟前内容或属性被最后修过的文件 -cnewer file: 查找内容或属性的最后修改时间晚于file文件的文件 -ctime n: 查找 **n*24** ...
- leetcode简单刷题
[python3]参数中的冒号与箭头 冒号后面是建议传入的参数类型 箭头后面是建议函数返回的类型
- 偏函数（partial）
from functools import partial def add(a,b,c,d): return a+b+c+d add = partial(add,1,2) print(add(3,4) ...
- JS中算法之排序算法
1.基本排序算法 1.1.冒泡排序 它是最慢的排序算法之一. 1.不断比较相邻的两个元素,如果前一个比后一个大,则交换位置. 2.当比较完第一轮的时候最后一个元素应该是最大的一个. 3.按照步骤一的方 ...