1.11、$refs实例属性 $mount

十一、实例属性

1.实例属性，有很多，可以在官网api文档中查看

<script>  
 var v1=new Vue({
      el:"#app",//div的id
      data:{
          name:"小明"
      },
      methods:{
          //方法中有默认参数，event，通过event.target可以拿到绑定此事件的标签
          methodTest(){
             alert("方法测试");
          }
      }
});
  var data={test:"测试"};
  var v2=new Vue({
      el:"#app2",//div的id
      data:{
          age:11
      },
      methods:{
          
          app2MethodTest(){
            v1.$data=data;//这样就修改了v1中的data。这就是实例属性。有很多，可以在官网api文档中查看
          }
      }
});
</script>

2.$refs实例属性

<button type="button" ref="refButton" @click="showTime">点我</button> //ref属性类似于id

<script>  
    var v1=new Vue({
        el:"#app",
      methods:{
         showTime:function(){
           this.$refs.refButton.innerHTML="hello";    //第一种this.$refs.refButton拿到的就是dom
           this.$refs['refButton'].innerHTML="hello2";//第二种
         }
      }
  });
</script>

3.$mount 动态绑定

<div id="app"></div>
<script>  
    var v1=new Vue({
     //注释掉 el:"#app",
      template:"<div>测试</div>"  //这样app的div中就会插入这一段html代码
    });
    v1.$mount("#app"); //这样是绑定到id为app的div上。
</script>