Vue学习笔记

Day1 基本结构

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue第一天</title>
</head>
<body>
    <!--1.Vue会管理el选项命中的元素及其内部的后代元素
        2.可以使用其他的选择器，但建议使用id选择器
        3.可以使用其他双标签，不能使用HTML和body   
    -->
    <!--data数据对象
    1.Vue中用到的数据定义到data中
    2.data中可以写复杂类型的数据
    3.渲染复杂类型数据时，遵守js的语法即可-->
    <div id="app">{{message}}
        <h1>{{bb}}</h1>
    <h2>{{school.name}}{{school.address}}</h2>
    <ul>
        <li>
            {{Array[0]}}
        </li>
        <li>
            {{Array[1]}}
        </li>
        <li>
            {{Array[2]}}
        </li>
    </ul>
    </div>
    <div class="qqq">{{aa}}</div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            // el:"h1",
            data:{
                message:'hello vue!',
                bb:'你好！',
                //对象
                school:{
                 name:"陈建岩",
                 address:"杭州"
                },
                //数组
                Array:["郑州","杭州","濮阳"]

            }
        
        })
        var app1 = new Vue({
            el:".qqq",
            data:{
                aa:'hello!'
            }
        
        })
    </script>
</body>
</html>
学习笔记 Vue
Vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！