一、自定义模板

1.1、通过template标签定义模板

<!-- 显示用户列表的模板(网页)-->
<template id="template01"><div><h1>这是一个用户列表</h1><p>这是一个表格，你需要点想象力</p></div>
</template>
复制代码

1.2、将模板注册到Vue的Component中

//将用户列表模板注册到vue
Vue.component('hello1', {template: '#template01'
});
复制代码

1.3、在div中使用模板

<div id="app"><hello1></hello1>
</div>
复制代码

1.4、完成代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--导入vue的js库--><script src="assets/vue.min-v2.5.16.js"></script>
</head>
<body><!-- 显示用户列表的模板(网页)--><template id="template01"><div><h1>这是一个用户列表</h1><p>这是一个表格，你需要点想象力</p></div></template><!-- 添加用户的模板（网页） --><template id="template02"><div><h1>这是一个添加用户的页面</h1></div></template><div id="app"><hello1></hello1></div><script>//将用户列表模板注册到vueVue.component('hello1', {template: '#template01'});new Vue({el: '#app'})</script>
</body>
</html>

作者：大坏蛋_
链接：https://juejin.cn/post/7164572189843259406
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

第2阶段19-vue自定义模板相关推荐

vue基础--模板语法、常用指令：v-if、v-show、v-for、虚拟DOM、v-once、v-cloak、v-text、v-html、v-bind、v-on、自定义指令
一.模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 ...
VSCode自定义代码片段1——vue主模板
VSCode自定义代码片段(vue主模板) {// vue// 1,自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 自定义片段名称 =>编辑用户片段 ...
前端开发：VS Code编辑器新建Vue文件自定义模板的方法
在前端开发过程中,尤其是对于经验不足的初级开发者来说,需要掌握一些必备的提升开发速度的技巧,比如使用各种插件来提升开发速度,这样才能事半功倍. 本篇博文来分享一个开发常用的技巧,资深开发者不屑于知道的 ...
Vue 学习笔记--自定义模板
文章目录 @[TOC](文章目录) 一.自定义模板 1.1.通过template标签定义模板 1.2.将模板注册到Vue的Component中 1.3.在div中使用模板 1.4.完成代码二.自定义 ...
vscode Vue ts 自定义模板
vscode Vue ts 自定义模板首先打开vscode选择用户片段选择vue.json {// Place your snippets for vue here. Each snippet i ...
vue自定义html模板,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
今晚8点直播 | 详解基于百度自定义模板的OCR结果结构化处理技术
随着行业的发展和技术的成熟,文字识别(OCR)目前已经应用到了多个行业中,比如物流行业快递包裹的分拣,金融行业的支票单据识别输入,交通领域中的车牌识别,以及日常生活中的卡证.票据识别等等.OCR(文字 ...

第2阶段19-vue自定义模板

一、自定义模板

1.1、通过template标签定义模板

1.2、将模板注册到Vue的Component中

1.3、在div中使用模板

1.4、完成代码

第2阶段19-vue自定义模板相关推荐

最新文章

热门文章