Vue的初识

照着下面的代码打一遍体会一下vue的优雅

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="mytest">
{{--直接调取js中定义好的值--}}
<p>{{message}}</p>
{{--和模型绑定,这样的话输入框和上面的值能够同步更改--}}
<input v-model="message">
<ul>
{{--vue中的遍历,和php的遍历相反, items是这个模型中存入的值,todo是遍历出来的单个元素,--}}

<li v-for="todo in items">
{{ todo.text }}
</li>
</ul>
</div>

<script>
new Vue({
// 这里是筛选器获取目标class
el: '.mytest',
// 这里是目标中的变量和变量值,json格式数据
data: {
message:'this is my test',
items: [
{text:'first'},
{text:'second'},
{text:'third'},
]
}
})
</script>