Vue实例化

1. Vue实例化

<div id="app">{{ message }}</div>

1.1 关于{{}} 插值表达式：mustache

插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算

let vm = new Vue({  //实例化
    el:"#app",  // 告诉vue能管理那个部分,使用的是querySelector
    data:{      //data中的数据会被vm所代理
        message:"hello Vue"//可以通过vm.msg取到对应的内容 ,也可以赋值
    }
})

1.2 使用 JavaScript 表达式

<div id="app">
        <!-- 数字操作 -->
        <p>{{ number + 2 }}</p>

        <!-- 三目运算 -->
        <p>{{ ok ? 'YES' : 'NO' }}</p>

        <!-- 字符串翻转 -->
        <p>{{ message.split('').reverse().join('')  }}</p>
    </div>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                message: 'Hello World',
                number: 10,
                ok: true,
            }
        })
    </script>

1.3 $data属性

vue关注的是数据变化,不需要在像以前一样关注DOM的变化

关于实例介绍：

1. 实例对象上有$data属性,其值就是选项对象中data属性值
2. 选项对象就是在实例化Vue时传入的对象
3. data属性值是一个对象,因此$data也就是这个对象
4. 当通过$data修改msg的值时,也就等于改data中的值, 对应是引用类型

data数据中msg的值改变了, 又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示

1.4 实例常用的属性和方法

vm.$attrs   // 用户获取父组件传递给子组件的属性,(除props,class,style外)
vm.$data    // vm 上的数据
vm.$watch   // 监听
vm.$el      // 当前el元素
vm.$set     // 后加的属性实现响应式
vm.$options // vm 配置 上的 所有属性
vm.$nextTick(()=>{})   // 异步方法,等待渲染dom完成后来获取vm
vm.$refs     // 获取dom元素或者组件实例的引用
vm.$data === data // => true
vm.$el === document.getElementById('app') // => true
//Vue实例属性还有很多

2.多个Vue实例化

<div id="app">
    {{message}}
</div>
<div id="app2">
    {{message}}
</div>

const vm = new Vue({
    el:"#app",
    data:{
        message:"hello World"
    }
    //this == vm
})

const vm2 = new Vue({
    el:"#app2",
    data:{
        message:"hello Vue"
    }
})

3.Vue.$refs操作原生Dom元素

<div id="app">
   <div ref="div">DivElement</div>  <!--为标签命名-->
   <button @click="handleClick">改变数据</button>
</div>

const vm = new Vue({
        el:"#app",
        data:{
            message:"hello Vue"
        },
        methods:{
           handleClick(){
              let elements = this.$refs.div;
              elements.innerHTML = this.message;
           }
        }
    })

Vue只负责它所接管的Dom元素