Vue.js 模板语法
1、使用 {{...}}（双大括号）的文本插值
<div id="main">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el:'#main',
data:{
message:'Hello'
}
})
</script>
2、使用 v-html 指令用于输出 html 代码
<div id="main">
<div v-html="message"></div>
</div>
<script>
new Vue({
el:'#main',
data: {
message: '<h1>hello</h1>'
}
})
</script>
3、属性
<div id="main">
<label for="r1"></label>
<input type="checkbox" v-model="class1" id="r1">
<br/>
<div v-bind:class="{'class1':class1}">
directiva v-bind:class
</div>
</div>
<script>
new Vue({
el:'#main',
data:{
class1:false
}
});
</script>
4、表达式
<div id="main">
{{ 1+1 }}<br>
{{ ok ? ' YES ' : ' NO ' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">hello</div>
</div>
<script>
new Vue({
el:'#main',
data: {
ok: true,
message: 'ABC',
id: 1
}
})
</script>
5、指令
<div id="main">
<p v-if="seen">A</p>
<template v-if="ok">
<h1>a</h1>
<p>b</p>
<p>c</p>
</template>
</div>
<script>
new Vue({
el:'#main',
data: {
seen:true,
ok:true
}
})
</script>
6、参数
<div id="main">
<pre><a v-bind:href="url">百度</a></pre>
</div>
<script>
new Vue({
el:'#main',
data: {
url:'http://baidu.com'
}
})
</script>
7、用户输入
<div id="main">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#main',
data: {
message: ''
}
})
</script>
对输入的字符串第一个字母转为大写
<div id="main">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#main',
data: {
message: 'suchenfei'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
8、缩写
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
vm.$watch('a', function (newVal, oldVal) {
})
Vue.js 条件与循环
1、v-else
<div id="main">
<div v-if="Math.random() > 1">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: '#main'
})
</script>
2、v-else-if
<div id="main">
<div v-if="type === 1">
A
</div>
<div v-else-if="type === '1'">
B
</div>
<div v-else-if="type === true">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#main',
data: {
type: '1'
}
})
</script>
3、v-show
注意: v-show 不支持 <template> 语法。
<div id="main">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
el: '#main',
data: {
ok: true
}
})
</script>
Vue.js循环语句
1、v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
<div id="main">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#main',
data: {
sites: [
{ name: 'A' },
{ name: 'B' },
{ name: 'C' }
]
}
})
</script>
