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>