1.创建一个vue的实例

1.引入vue

2.把html元素与vue关联起来

 <div >

    </div>
    <script>
        new Vue({
            el: "#div"
        })
    </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

AI助手

3.差值表达式{{}} 里面只能写值和表达式

 注意语法：前后空格不空格会识别不了对象
    注意：data可传值过来
     (vm.$data)可取到data对象
     (vm.$el)可取到el的值
    注意：data里面的值也会放到VM里面去  ()  ()
    注意：页面更新是异步的
     <div >
        {{ "1" }} 
        {{ 1 }} 
        {{ true }} 
        {{ false }} 
        {{ [1,2,3] }} 
        {{ {aa:"1",bb:"2"} }} 
        {{ undefinde }} 
        {{ null }} 
        {{ 1+1 }} 
        {{ 1/2 }} 
        {{ 1*10 }} 
        {{ a }} 
        {{ b }} 
        {{ c }}
    </div>
    <script>
        const vm = new Vue({
            el: "#div",
            data: {
                a: 10000,
                b: 'aaaa',
                c: ['a', 'b', 'c']
            }

        })
        (vm.$data)
        (vm.$el)
        ()
        ()
        ()
        =111;
        =555;
        =666;
        (vm.$) //结果是1000因为数据更新是异步的
        所以得把最后一行执行完才会修改页面上的数据所以vm.$获取的
        还是原来页面上的数据
         vm.$nextTick(()=>{//是一个异步的方法等dom更新完毕之后才会执行这个方法
            (vm.$) //结果是666
        })
    </script>

• 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

AI助手

3.可以把el换成vm.$mout(‘div’)

<div >
        {{ "1" }}
    </div>
    <script>
        const vm = new Vue({
            data: {
                a: 10000,
                b: 'aaaa',
                c: ['a', 'b', 'c']
            }

        })
        vm.$mout('#div')
    </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

AI助手