定义模板的方式

最新推荐文章于 2022-11-11 22:04:57 发布
最新推荐文章于 2022-11-11 22:04:57 发布
阅读量197 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/brave_haha/article/details/80999399
版权

 

  • 字符串模板
  • 模板字面量
  • 内联模板
  • x-template
  • render函数
  • JSF
  • 单文件组件

字符串模板

默认情况下，模板会被定义为一个字符串

<body>
	<div id="app">
	    <ele></ele>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">    
        </script>
	<script>
		Vue.component('ele',{
			template:'<div v-show="show" @click="event">安排</div>',
			data:function() {
				return {
					show:true
				}
			},
			methods:{
				event:function() {
					this.show = !this.show;
				}
			}
			
		})
		var app = new Vue({
			el:'#app'
		})

	</script>

模板字面量

ES6模板字面量允许使用多行定义模板，但在常规Javascript字符串中是不被允许的,需要把代码转为ES5

<body>
	<div id="app">
		<ele></ele>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		Vue.component('ele',{
			template:'\
				<div \
				v-show="show"\
				@click="event">安排\
				</div>',
			data:function() {
				return {
					show:true
				}
			},
			methods:{
				event:function() {
					this.show = !this.show;
				}
			}
			
		})
		var app = new Vue({
			el:'#app'
		})

内联模板

在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当作模板，而不是把它当内容分发

<body>
	<div id="app">
		<ele inline-template>
			<div v-show="show" @click="event">安排
			</div>
		</ele>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		Vue.component('ele',{
			data:function() {
				return {
					show:true
				}
			},
			methods:{
				event:function() {
					this.show = !this.show
				}
			}
		})
		var app = new Vue({
			el:'#app'
		})

	</script>

x-template

在<script>标签里使用text/x-template类型，并且指定一个id，将这个id赋给template,它将模板和组件的其它定义分离了

<body>
	<div id="app">
		<ele></ele>
		<script type="text/x-template" id="ele">
			<div v-show="show" @click="event">安排</div>
		</script>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		Vue.component('ele',{
			template:'#ele',
            data:function() {
                return {
                    show:true
           		}
        	},
            methods:{
                event:function() {
                    this.show = !this.show
				}
			}
		})
		var app = new Vue({
			el:'#app'
		});
	</script>
</body>

render函数

函数将模板定义为 JavaScript 对象，你的模板更接近编译器，并允许你使用完整的 JavaScript 功能，而不是指令提供的子集。

<body>
	<div id="app">
		<ele></ele>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		Vue.component('ele',{
			render:function(createElement) {
				return createElement('div',{
					class:{
						'active':this.isActive
					},
					on:{
						click:this.handleClick
					}
				},
				'安排'
				)
			},
			data:function() {
				return {
					isActive:true
				}
			},
			methods:{
				handleClick:function() {
					alert("clicked!!")
				}
			}
		})
		var app = new Vue({
			el:'#app'
		});
	</script>
</body>

JSX

使用render函数难以阅读出DOM结构，尤其当子节点嵌套较多时，为了让render函数更好的书写和阅读，Vue.js提供了插件babel-plugin-transform-vue-jsx来支持JSX语法。

JSX是一种看起来像HTML，但实际是Javascript的语法扩展

例如使用template书写的模板是

<div id="app">
		<ele :value="1">
			<span>一级</span>标题
		</ele>
	</div>

使用createElement改写

return createElement('ele',{
			props:{
				value:1
			}
		},[
			createElement('span','一级'),
			'标题'
		]);

用JSX改写后

new Vue({
			el:'#app',
			render(h) {
				return {
					<ele value={1}>
						<span>一级</span>标题
					</el>
				}
			}
		})

 

brave_haha
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
定义模板及导入
05-14
在IT行业中，数据管理是至关重要的任务之一，而“定义模板及导入”是这个领域中的一个关键环节。这个过程涉及到创建自定义模板以适应特定的数据结构，并将这些模板用于高效地导入数据到数据库中。接下来，我们将深入...
Vue 中可以定义组件模版的几种方式
10-16
在Vue中，有多种方式定义组件模板，每种方式都有其特点和适用场景。下面将详细介绍这些定义组件模板的方法。 1. 字符串形式 这是Vue中最基础的定义组件模板的方式，直接在JavaScript对象的`template`属性中写入HTML...
【C++模板编程入门】模板介绍、模板定义、函数模板、类模板、模板的继承
weixin_42031299的博客
11-11 946
(2)模板类的继承和一般类的继承规则是一样的，区别是继承父类时，父类中模板参数也会继承下来，子类在继承时需要给父类的模板参数指定具体类型，否则父类中的模板参数就还是未知，这样是会报错；(2)在定义People类的对象时，需要指定模板类T的具体类型，这个类型也会传给运算符重载函数，这样类和重载函数的模板类T都被具体的数据类型所代替；(1)首先需要知道在定义模板类时模板参数是未知的，但是在用模板类实例化对象时需要传入模板类的类型，所以模板类都会被具体的类型所替代；
模板的定义
an_tang的博客
12-09 810
我们知道一个数据有多种类型  当一个参数类型的函数被另一个数据类型使用时 我们得更改其函数参数类型后 才能使用 这样一来，我们似乎可以 剪切 赋值更改其类型就可以啦 但是这样一来显得代码就冗余了 就像这样 #include using namespace std; void swap(int& rx,int& ry) { int temp=rx; rx=ry;
C++模板学习笔记——模板定义(1)
Travrller的博客
10-11 271
模板是什么 什么是泛型编程： 所谓的泛型编程就是以一种独立于任何特定类型的编程； 模板是什么： 模板就是创造泛型类或函数的公式或者蓝图（和我们的作文模板一样，可以根据具体的场景进行应用）； 为什么要引入模板 如果想要对不同的类型执行相同的操作，我们可以采取函数重载的方法，但是变量的类型除了基本类型之外，还存在着许多自定义类型，我们总不可能将所有情况都写出来。那么这时模板就派上了用场，它可以生成一套公式，在具体用的时候可以生成不同的类型，这才符合我们写程序的初衷（简洁、快捷，最主要的就是可以少写点代码【如
模板方法模式（模板方法设计模式）详解
傅红雪的专栏
03-18 189
在面向对象程序设计过程中，程序员常常会遇到这种情况：设计一个系统时知道了算法所需的关键步骤，而且确定了这些步骤的执行顺序，但某些步骤的具体实现还未知，或者说某些步骤的实现与具体的环境相关。 例如，去银行办理业务一般要经过以下4个流程：取号、排队、办理具体业务、对银行工作人员进行评分等，其中取号、排队和对银行工作人员进行评分的业务对每个客户是一样的，可以在父类中实现，但是办理具体业务却因人而异，它...
C++——模板（超详细的模板解析）
热门推荐
JAN6055的博客
04-01 5万+
超详细的C++模板知识列表，持续维护。
数据库表定义模板（一类格式）
05-17
这里我们将详细探讨标题为"数据库表定义模板（一类格式）"的知识点，以及如何在学习和开发中参考使用。 1. **表名**： - 表名是数据库表的标识符，用于区分不同的数据集合。在示例中，`projectname_tablename`的...
简单联系方式提交表单网页模板
01-22
"简单联系方式提交表单网页模板"提供了一个快速启动此类功能的基础结构，适用于个人博客、小型企业或任何需要在线联系信息的网站。这个模板可以帮助设计师和开发者节省时间，避免从头开始创建表单，同时确保用户体验...
C++函数模板声明与定义相分离
12-22
然而，处理函数模板的声明与定义时，我们经常会遇到一些特定的问题，尤其是在尝试模仿STL（标准模板库）的实现时。STL源码通常将模板的声明和定义放在一起，以避免编译和链接时可能出现的问题。但在某些情况下，我们...
16.1定义模板
weixin_44897707的博客
11-08 188
定义模板 模板是泛型编程的基础，容器、迭代器和算法都是模板的例子。一个模板就是一个创建类或函数的蓝图或者公式。 假定希望编写一个函数来比较两个值，并指出第一个值是小于、等于还是大于第二个值。在实际中，我们可能想要定义多个函数，每个函数比较一种给定类型的值。 //如果两个值相等返回0，如果v1小于v2返回-1，否则返回1 int compare(const string &v1, const string &v2) { if (v1 < v2) return -1; if
模板类声明和定义为何要写一起
~。~|||
10-24 1万+
http://www.gois.ws/showfile.asp?id=460:0:0如何组织编写模板程序 发表日期： 1/21/2003 12:28:58 PM 发表人： Nemanja Trifunovic 前言常遇到询问使用模板到底是否容易的问题，我的回答是：“模板的使用是容易的，但组织编写却不容易”。看看我们几乎每天都能遇到的模板类吧，如STL, ATL, WTL, 以及Boost的
C++模板*******
weixin_30607659的博客
10-27 171
模板是泛型编程的基础，泛型编程即以一种独立于任何特定类型的方式编写代码。 模板是创建泛型类或函数的蓝图或公式。库容器，比如迭代器和算法，都是泛型编程的例子，它们都使用了模板的概念。 每个容器都有一个单一的定义，比如向量，我们可以定义许多不同类型的向量，比如vector <int>或vector <string>。 您可以使用模板来定义函数和类，接下来让我们一起...
定义模板
dnhm47322的博客
08-23 201
模板类的static成员 　　与其它任何类相同，模板类可以声明static成员： template <typename T> class Foo { public: static std::size_t count() {return ctr;} //其它接口成员 private: static std::size_t ctr; ...
关于C++模板函数声明与定义的问题
我的博客
07-22 2万+
关于C++模板函数声明与定义的问题 关于C++模板函数声明与定义的问题 模板函数出现的问题 模板函数问题解决 模板函数出现的问题 今天在写代码的时候，发现了一个关于模板函数的问题。如下所示， demo.h代码 #ifndef DEMO_H #define DEMO_H class Demo { public: Demo(); virtual ~D...
模板方法模式
weixin_43751710的博客
03-25 106
模板方法模式的定义 模板方法模式（Template Method Pattern） 实际上是封装了一个固定流程，该流程由几个步骤组成，具体步骤可以由子类进行不同实现，从而让固定的流程产生不同的结果。 模板方法模式 非常简单，其实就是类的继承机制，但它却是一个应用非常广泛的模式。 模板方法模式本质：抽象封装流程，具体进行实现 模板模式的结构 AbstractClass：实现一个模板方法，定义了算法...
html中定义模板
weixin_30702887的博客
05-05 604
定义一个html中不解析的模板，有如下三种方法1、使用<xmp>标签 <xmp id="test"> 　　<div>测试</div> </xmp> 2、使用<template>标签 <template id="test"> 　　<div>测试</div> ...
定义模板是哪个方法
最新发布
06-02
在Handlebars中，定义模板的方法是使用模板标签，例如： ``` <h1>{{title}} {{#each items}} <li>{{this}} {{/each}} ``` 在这个例子中，使用`<script>`标签定义了一个名为`template`的Handlebars模板。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值