Vue实例化-CFANZ编程社区

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的变化

关于实例介绍：

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

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;
           }
        }
    })