文档章节

模板语法

AK灬
 AK灬
发布于 2017/04/21 16:55
字数 355
阅读 7
收藏 0
点赞 0
评论 0
<html>
	<head>
		<title>VUE.JS实例</title>
		<meta charset='utf-8'>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="C:/Users/Administrator/Desktop/jar/jquery-1.11.2.min.js"></script>
	</head>
	<body>
		<div id="result1">
			<p>
				{{message1}}
			</p>
		</div>
		<div id="result2">
			<span v-bind:title='message2'>
				提示语
			</span>
		</div>
		<div id="result3">
			<p v-if="seen">
				显示和隐藏
			</p>
		</div>
		<div id="result4">
			<ol>
				<li v-for="book in books">
					{{book.content}}
				</li>
			</ol>
		</div>
		<script>
			result1 = new Vue({
				el: '#result1',
				data:{message1:'Hello Vue.js!'}
			}),
			result2 = new Vue({
				el: '#result2',
				data: {message2: '页面加载于 ' + new Date()}	 
			}),
			result3 = new Vue({
				el: '#result3',
				data:{seen:true}
			}),
			result4 = new Vue({
				el:'#result4',
				data:{
					books:[
						{content:'学习'},
						{content:'工作'},
						{content:'吃饭'},
						{content:'睡觉'}
					]
				}
			})
		</script>
	</body>
</html>
<html>
	<head>
		<title>VUE.JS实例</title>
		<meta charset='utf-8'>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="C:/Users/Administrator/Desktop/jar/jquery-1.11.2.min.js"></script>
	</head>
	<body>
		<div id = "result1">
			<p>
				{{message1}}
			</p>
			<button v-on:click="listener">
				触发事件
			</button>
		</div>
		<!--通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新-->
		<div id = "result2">
			<p>
				{{message2}}
			</p>
			<input v-model="message2">
		</div>
		<!-- 创建组件实例 -->
		<div id = "result3">
			<ol>
				<book-books v-for="books in groceryList" v-bind:book="books"></book-books>
			</ol>
		</div>
		<!-- 显示纯文本HTML-->
		<div id="result4">
			<p v-html = "rawHtml">
				{{message4}}
			</p>
		</div>
		<script>
			result1 = new Vue({
				el : '#result1',
				data : {
					message1:'Content'
				},
				methods : {
					listener:function(){
						// this.message1 = this.message1.substring(0,1)
						// result1.message1='class'
						this.message1 = this.message1 + 'HTML';
					}
				}
			});
			result2 = new Vue({
				el : '#result2',
				data : {
					message2 : 'example'
				}
			});
			// 构建组件
			Vue.component('book-books',{
				// 父组件属性[props]
				props : ['book'],
				template : '<li>{{book.content}}</li>'
			})
			result3 = new Vue({
				el : '#result3',
				data : {
					groceryList : [
						{content : '蔬菜'},
						{content : '水果'},
						{content : '肉类'}
					]
				}
			});
			vm = new Vue({
				data : {'param' : 'content'},
				created : function(){
					console.log(' A is :' + this.param);
				}
			});
			result4 = new Vue({
				el : '#result4',
				data : {'message4' : '<h1>纯文本HTML</h1>'}
			});
		</script>
	</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
AK灬

AK灬

粉丝 46
博文 326
码字总数 137976
作品 0
朝阳
后端工程师
nodejs中art-template模板语法冲突解决方案

art-template的github地址:https://github.com/aui/art-template 前端开发中,有非常多的模板引擎第三方框架,其中art-template属于写的比较好的一个,一般的模板引擎第三方都会支持一到两种...

u013263917 ⋅ 2017/11/05 ⋅ 0

artTemplate 腾讯的高性能模板引擎

artTemplate-3.0 快速上手 使用一个type="text/html"的script标签存放模板: 渲染模板 演示 模板语法 有两个版本的模板语法可以选择。 简洁语法 推荐使用,语法简单实用,利于读写。 查看语法...

WolfX ⋅ 2016/02/19 ⋅ 0

Kendo UI开发教程:Kendo UI模板概述

Kendo UI框架提供了一个易用,高性能的JavaScript模板引擎。通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素。Kendo 模板侧重于UI显示,支持关键的模板功能,着重...

Miss_Hello_World ⋅ 2016/11/11 ⋅ 0

1kb的前端HTML模板解析引擎,不限于嵌套、循环、函数你能想到的解析方式

传送门:https://github.com/xiangyuecn/BuildHTML copy之前说点什么 html做点小功能(什么都没有),如果是要手动生成html这种操作,容易把代码搞得乱七八糟,如果使用模板并解析成html,就...

高坚果兄弟 ⋅ 06/11 ⋅ 0

模板引擎Beet的6大创新点

2011年发布Beetl 0.5的时候,新闻是在Iteye上发布的,老资格程序员可能预料Iteye上会发生什么了,我收到的最多的不是鼓励和喝彩,而是吐槽,”又是一个轮子“是里面最大的声音。尽管4年前的版...

闲大赋 ⋅ 2015/08/02 ⋅ 18

JavaScript 模板引擎--Velocity.js

Velocity.js 是velocity模板语法的javascript实现。Velocity 是基于Java的模板引擎,广泛应用在阿里集 体各个子公司。Velocity模板适用于大量模板使用的场景,支持复杂的逻辑运算,包含 基本...

红薯 ⋅ 2014/04/30 ⋅ 1

关于beetl认识的几个误区

beetl 现在国内越来越流行,社区网站每日访问量都有上千,下载量每日保持在20个左右(无法统计maven的)。qq群在满员之前已经踢走了一拨又一拨的不活跃会员还有少量价值观不符合的人(写这个...

闲大赋 ⋅ 2016/09/14 ⋅ 17

新一代 Java 模板引擎典范--Beetl

Beetl目前版本是2.7,大小720K,相对于其他java模板引擎,具有功能齐全,语法直观,性能超高,开发和维护模板有很好的体验。是新一代的模板引擎。总得来说,它的特性如下: 功能完备:同主流的...

闲大赋 ⋅ 2012/03/05 ⋅ 48

Tiny模板引擎之开发工具

要想做一流的模板引擎,当然有一流的模板编辑器是必须的。 Tiny模板引擎推出已经有一段时间了,但是由于其语法是独立的,因此编辑只能采用一般的文本编辑器,但是编辑效率自然就低。还有一种...

悠悠然然 ⋅ 2015/01/09 ⋅ 8

新一代java模板引擎典范 Beetl

Beetl目前版本是2.1,大小667K,相对于其他java模板引擎,具有功能齐全,语法直观,性能超高,开发和维护模板有很好的体验。是新一代的模板引擎。总得来说,它的特性如下: 功能完备:同主流的...

kevin728971010 ⋅ 2016/11/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Greys Java在线问题诊断工具

Greys是一个JVM进程执行过程中的异常诊断工具。 在不中断程序执行的情况下轻松完成JVM相关问题排查工作 目标群体 有时候突然一个问题反馈上来,需要入参才能完成定位,但恰恰没有任何日志。回...

素雷 ⋅ 24分钟前 ⋅ 0

git从远程仓库拉取代码的常用指令

一种(比较麻烦的)拉代码的方法 git clone //克隆代码库,与远程代码库的主干建立连接,如果主干已经在就不用再clone啦,克隆路径为当前路径下的新创建的文件夹 git checkout -b //本地建立...

Helios51 ⋅ 39分钟前 ⋅ 0

005. 深入JVM学习—Java堆内存参数调整

1. JVM整体内存调整图解(调优关键) 实际上每一块子内存区域都会存在一部分可变伸缩区域,其基本流程:如果内存空间不足,则在可变的范围之内扩大内存空间,当一段时间之后,内存空间不紧张...

影狼 ⋅ 44分钟前 ⋅ 0

内存障碍: 软件黑客的硬件视图

此文为笔者近日有幸看到的一则关于计算机底层内存障碍的学术论文,并翻译(机译)而来[自认为翻译的还行],若读者想要英文原版的论文话,给我留言,我发给你。 内存障碍: 软件黑客的硬件视图...

Romane ⋅ 今天 ⋅ 0

SpringCloud 微服务 (七) 服务通信 Feign

壹 继续第(六)篇RestTemplate篇 做到现在,本机上已经有注册中心: eureka, 服务:client、order、product 继续在order中实现通信向product服务,使用Feign方式 下面记录学习和遇到的问题 贰 or...

___大侠 ⋅ 今天 ⋅ 0

gitee、github上issue标签方案

目录 [TOC] issue生命周期 st=>start: 开始e=>end: 结束op0=>operation: 新建issueop1=>operation: 评审issueop2=>operation: 任务负责人执行任务cond1=>condition: 是否通过?op3=>o......

lovewinner ⋅ 今天 ⋅ 0

浅谈mysql的索引设计原则以及常见索引的区别

索引定义:是一个单独的,存储在磁盘上的数据库结构,其包含着对数据表里所有记录的引用指针. 数据库索引的设计原则: 为了使索引的使用效率更高,在创建索引时,必须考虑在哪些字段上创建索...

屌丝男神 ⋅ 今天 ⋅ 0

String,StringBuilder,StringBuffer三者的区别

这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面。 首先说运行速度,或者说是, 1.执行速度 在这方面运行速度快慢为:StringBuilder(线程不安全,可变) > StringBuffer...

时刻在奔跑 ⋅ 今天 ⋅ 0

java以太坊开发 - web3j使用钱包进行转账

首先载入钱包,然后利用账户凭证操作受控交易Transfer进行转账: Web3j web3 = Web3j.build(new HttpService()); // defaults to http://localhost:8545/Credentials credentials = Wallet......

以太坊教程 ⋅ 今天 ⋅ 0

Oracle全文检索配置与实践

Oracle全文检索配置与实践

微小宝 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部