文档章节

模板语法

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>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: 计算属性
下一篇: Vue简介
BK灬

BK灬

粉丝 46
博文 343
码字总数 142562
作品 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
JavaScript 模板引擎--Velocity.js

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

红薯
2014/04/30
21.3K
1
1kb的前端HTML模板解析引擎,不限于嵌套、循环、函数你能想到的解析方式

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

高坚果兄弟
06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kafka+Flink 实现准实时异常检测系统

1.背景介绍 异常检测可以定义为“基于行动者(人或机器)的行为是否正常作出决策”,这项技术可以应用于非常多的行业中,比如金融场景中做交易检测、贷款检测;工业场景中做生产线预警;安防...

架构师springboot
14分钟前
1
0
DecimalFormat 类基本使用

/* * DecimalFormat 类主要靠 # 和 0 两种占位符号来指定数字长度 * 0 表示如果位数不足则以 0 填充 * # 表示只要有可能就把数字拉上这个位置 * */ public static void main(String[] args){...

嘴角轻扬30
31分钟前
3
0
This APT has Super Cow Powers.

在Debian/Ubuntu上,apt包管理器内嵌着一个彩蛋. 如果你在命令行界面输入 apt help 在最后一行能找到This APT has Super Cow Powers. 说明该apt具有超级牛力 牛力是个什么梗? 则说明你的系统...

taadis
48分钟前
2
0
起薪2万的爬虫工程师,Python需要学到什么程度才可以就业?

爬虫工程师的的薪资为20K起,当然,因为大数据,薪资也将一路上扬。那么,Python需要学到什么程度呢?今天我们来看看3位前辈的回答。 1、前段时间快要毕业,而我又不想找自己的老本行Java开发...

糖宝lsh
57分钟前
6
0
携手开发者共建云生态 首届腾讯云+社区开发者大会在京举办

本文由云+社区发表 北京时间12月15日,由腾讯云主办,极客邦科技、微信、腾讯TEG协办的首届腾讯云+社区开发者大会在北京朝阳悠唐皇冠假日酒店举办。在会上,腾讯云发布了重磅产品开发者平台以...

腾讯云加社区
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部