声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
【1】
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
页面显示：
【2】 list v-for
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
</script>
列表 加索引
索引index
<div id="app">
<ul id="example-2">
<li v-for="item,index in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
</div>
<script>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'nba',
items: [
{ message: 'www.runoob.com' },
{ message: 'www.runoob.com' }
]
}
})
</script>
【3】判断 v-if
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
true 可见 false 不可见
【4】双向绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
