<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板语法</title>
<script src="js/vue.js"></script>
</head>
<style>
.class1 {
background: #444;
color: #eee;
}
</style>
<body>
<!-- 插值 -->
<div id="app">
<!-- v-html指令用于输出html代码 -->
<div v-html="message"></div>
<!-- HTML 属性中的值应使用 v-bind 指令 -->
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1" />
<br><br>
<div v-bind:class="{'class1':use}">
v-bind:class指令
</div>
<!-- 表达式 -->
{{5+5}}<br />
{{ok ? 'YES':'NO'}}<br />
{{message1.split('').reverse().join('')}}
<div v-bind:id="'list-'+id">菜鸟</div>
<!-- 指令 -->
<p v-if="seen">你看到我了</p>
<!-- 参数 -->
<!-- 在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定 -->
<pre><a v-bind:href="url">菜鸟又来了</a></pre>
<!-- <a v-on:click="doSomething"></a>监听器 -->
<!-- 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()： -->
<!-- <form v-on:submit.prevent="onSubmit"></form> -->
<!-- 用户输入 -->
<!-- v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，
根据表单上的值，自动更新绑定的元素的值。 -->
<p>{{message1}}</p>
<input v-model="message1" />
<!-- 字符串反转 -->
<p>{{message2}}</p>
<button v-on:click="reverseMessage">反转字符串</button>
<!-- 过滤器 -->
<!-- 在两个大括号中 -->
<!-- {{ message | capitalize }} -->
<!-- 在 v-bind 指令中 -->
<!-- <div v-bind:id="rawId | formatId"></div> -->
<br />
{{message3|capitalize}}
<!-- {{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。 -->
<!-- 缩写 -->
<!-- <a v-bind:href="url"></a>
<a :href="url"></a> -->
<!-- <a v-on:click="doSomething"></a>
<a @click="doSomething"></a> -->
</div>
<script>
new Vue({
el: '#app',
data: {
use: false,
message: '<h1>菜鸟教程</h1>',
message1: 'RUNOOB',
message3:'runoob',
message2: 'Runoob!',
id: 1,
seen: true,
url: 'http://www.runoob.com'
},
methods: {
reverseMessage: function() {
this.message2 = this.message2.split('').reverse().join('')
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
});
</script>
</body>
</html>
09-02
816
816
05-06
05-06
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
