文档章节

模板语法

BK灬
 BK灬
发布于 2017/04/21 16:55
字数 355
阅读 7
收藏 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>

 

© 著作权归作者所有

共有 人打赏支持
BK灬

BK灬

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

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

u013263917
2017/11/05
0
0
artTemplate 腾讯的高性能模板引擎

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

WolfX
2016/02/19
153
0
Kendo UI开发教程:Kendo UI模板概述

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

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

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

高坚果兄弟
06/11
0
0
JavaScript 模板引擎--Velocity.js

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

红薯
2014/04/30
21.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

Vue学习资料

一直以为Vue是依赖nodejs的。 作为前端也可以耦合性就很低了。 //npm包管理器 进行管理npm install vue//初始化一个项目vue init//本地调试npm run dev//编译完成 ...

大灰狼wow
28分钟前
1
0
fullcalendar重新渲染

uiCalendarConfig.calendars.lesson_calendar.fullCalendar('removeEvents');var ym = uiCalendarConfig.calendars.lesson_calendar.fullCalendar('getView').title;$scope.get_lesson(y......

人来疯啊
32分钟前
1
0
多渠道打包总结

https://www.jianshu.com/p/2130db7584c8 https://blog.csdn.net/u011153817/article/details/50772496...

塔塔米
42分钟前
1
0
android -------- Data Binding的使用 ( 六) 自定义属性

今天来说说DataBinding在自定义属性的使用 默认的android命名空间下,我们会发现并不是所有的属性都能直接通过data binding进行设置,比如margin,padding,还有自定义View的各种属性。 默认...

切切歆语
48分钟前
1
0
收邮件 下载附件

uses IdMessage, IdMessageParts, IdAttachment, IdGlobalProtocols, ...;procedure SaveAttachmentsFromFile(FileName: String)var IdMessage: TIdMessage; MsgPart: Ti......

vga
54分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部