<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>
-->
<span v-once>Message: {{msg}}</span>
<!--
v-html 的值是一个数据对象，该对象可以赋值为html标签片段如：<span style="color:red">啊啊啊</span>。
该html标签片段就会被识别成html的标签元素，而不会识别成普通文本字符串
-->
<p>Using mustaches: {{ rawHtml }}</p>
<p v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
<!--
Mustache 语法不能作用在HTML属性上，遇到这种情况应该使用 v-bind 指令：
对于布尔特性 (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同， 如果v-bind指令下的属性的值是 null、undefined 或 false，则 该属性不会显示在渲染出来的元素中，如：
<button v-bind:disabled="isButtonDisabled">Button</button>
//button元素中没有disabled这个属性
//v-bind 指令的简写式：:属性
-->
<button v-bind:disabled="isButtonDisabled">Button</button>
<div v-bind:class="color">test...</div>
<div :abc="color">test...</div>
<!--
使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式
{{ if (ok) { return message } }}
模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
-->
<p>{{ number + 1 }}</p>
<p>{{ ok? 'YES' : 'NO' }}</p>
<!-- split('')分隔并用数组保存，reverse()翻转数组，join('')将数组所有元素连接成字符串 -->
<p>{{ message.split('').reverse().join('')}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
rawHtml : '<span style="color:red">啊啊啊</span>',
isButtonDisabled:true,
//<button disabled="disabled">Button</button>
// isButtonDisabled:false,
//<button>Button</button>
color:'blue',
number : 10,
ok : false,
message : "vue",
}
});
//span标签设置了v-once指令,所以不能再修改msg数据
vm.msg = "hi....";
</script>
<style type="text/css">
/*
给标签元素添加class类名，即可设置其css样式
*/
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>
</body>
</html>
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
