056_末晨曦Vue技术_处理边界情况之X-template
处理边界情况之X-template
另一个定义模板的方式是在一个<script>元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去。例如：
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
x-template 需要定义在 Vue 所属的 DOM 元素外。
这些可以用于模板特别大的 demo 或极小型的应用，但是其它情况下请避免使用，因为这会将模板和该组件的其它定义分离开。
完整案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>末晨曦吖</title>
</head>
<body>
<div id="app">
<hello-world></hello-world>
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
var app = new Vue({
el:'#app'
})
</script>
</body>
<style scoped>
body{
padding: 0;
margin: 0;
}
</style>
</html>
056_末晨曦Vue技术_处理边界情况之X-template的更多相关文章
- 048_末晨曦Vue技术_处理边界情况之使用$root访问根实例
处理边界情况之使用$root访问根实例 点击打开视频教程 在每个 new Vue 实例的子组件中,其根实例可以通过 $root property 进行访问. 例如,在这个根实例中: src\main. ...
- 051_末晨曦Vue技术_处理边界情况之provide和inject依赖注入
provide和inject依赖注入 点击打开视频讲解更详细 在此之前,在我们描述访问父级组件实例的时候,展示过一个类似这样的例子: <google-map> <google-map ...
- 057_末晨曦Vue技术_处理边界情况之强制更新($forceUpdate)与通过 v-once 创建低开销的静态组件
强制更新($forceUpdate) 点击打开视频讲解更加详细 在vue中,如果data中有基本数据类型变量:age,修改他,页面会自动更新. 但如果data中的变量为数组或对象(引用数据类型),我们 ...
- 054_末晨曦Vue技术_处理边界情况之组件之间的循环引用
组件之间的循环引用 点击打开视频讲解更详细 假设你需要构建一个文件目录树,像访达或资源管理器那样的.你可能有一个 <tree-folder> 组件,模板是这样的: <p> &l ...
- 057_末晨曦Vue技术_处理边界情况之强制更新和创建低开销的静态组件
强制更新和创建低开销的静态组件 点击打开视频讲解更加详细 强制更新 如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 你可能还没有留意到数组或对象的变更检 ...
- 052_末晨曦Vue技术_处理边界情况之程序化的事件侦听器
程序化的事件侦听器 点击打开视频讲解更详细 现在,你已经知道了 $emit 的用法,它可以被 v-on 侦听,但是 Vue 实例同时在其事件接口中提供了其它的方法.我们可以: 通过 $on(event ...
- 066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡
多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else.最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transiti ...
- 058_末晨曦Vue技术_过渡 & 动画之过渡的类名
进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...
- 浅谈android代码保护技术_ 加固
浅谈android代码保护技术_加固 导语 我们知道Android中的反编译工作越来越让人操作熟练,我们辛苦的开发出一个apk,结果被人反编译了,那心情真心不舒服.虽然我们混淆,做到native层,但 ...
随机推荐
- Linux系列之安装JDK
卸载open jdk #查看jdk [root@localhost tools]# rpm -qa | grep jdk java-1.8.0-openjdk-headless-1.8.0.65-3. ...
- vue华视电子身份证阅读器的使用
ie还是谷歌都是可以用的 只需要直接启用华视电子身份证阅读器的服务来的,至于服务已经上传到了网上 华视阅读器服务,下载下来解压,找到对应的华视电子读卡服务.exe文件,路径是CVR-1 ...
- QQ空间未授权评论_已忽略
看群友们聊天时发现的, 大概是做了查看了动态访问时间的一个设置, 但是仅自己可见的说说还是被评论了的这么一个问题. 闲的没事就翻了一下找一下问题. 这个方法嘎嘎鸡肋, 可以说完全没用, 交到tsrc, ...
- go-zero微服务实战系列（五、缓存代码怎么写）
缓存是高并发服务的基础,毫不夸张的说没有缓存高并发服务就无从谈起.本项目缓存使用Redis,Redis是目前主流的缓存数据库,支持丰富的数据类型,其中集合类型的底层主要依赖:整数数组.双向链表.哈希表 ...
- 实战回忆录：从Webshell开始突破边界
正文 某授权单位的一次渗透,由于使用的php框架,某cms的上传,从实现webshell开始. 详情 添加监听,生成木马文件更改应用程序名称隐藏上线. 修改休眠时间为10秒 查看主机名whoami 抓 ...
- MongoDB 的安装和基本操作
MongoDB 的安装 使用 docker 安装 下载镜像: docker pull mongo:4.4.8(推荐,下载指定版本) docker pull mongo:latest (默认下载最新版本 ...
- Day02 HTML语法
有两种类型的标签 双标记<标记名>内容</标记名> 单标记<标记名/> 属性: 对标签的描述--属性,由属性名和属性值组成 <标记名 属性名 = " ...
- 2m高分辨率土地利用分类数据
数据下载链接:百度云下载链接 土地利用数据是在根据影像光谱特征,结合野外实测资料,同时参照有关地理图件,对地物的几何形状,颜色特征.纹理特征和空间分布情况进行分析,建立统一解译标志的基础之上,依据多源 ...
- PTA(BasicLevel)-1018 锤子剪刀布
一.问题定义 大家应该都会玩"锤子剪刀布"的游戏:两人同时给出手势,胜负规则如下: 剪刀 > 布, 锤子 > 剪刀, 布 > 锤子 现给出两人的交 ...
- labview从入门到出家6(进阶篇)--移位寄存器的使用
前面介绍了如何熟悉和使用Labview自带的库函数以及调试方式,大家后期基本可以凭借这两个方式从入门到出家了,哈哈,后面就靠各位同仁99%的努力了.这篇为啥要讲移位寄存器呢,主要是之前做的项目和经验告 ...