个人笔记-----Vue属性绑定，双向数据绑定，ref获取dom节点【如有不对，欢迎指正】

绑定属性

v-bind: 可简写 ： 需要绑定标签已有属性，例如 class，style，title，url...等等

<div id="root">
        <div v-bind:title="title">hello world</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
           title:"hello world"
        }
    })

class绑定

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
 }

style绑定

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

---

双向数据绑定
双向数据绑定必须在表单里面使用，model改变影响视图view，视图view改变影响model。

<input type="text" v-model="msg">

---

ref 获取 dom 节点
ref 获取 dom 节点，ref相当于 id ，
获取 ref 定义的 dom 节点 this.$refs.box.value

	<input ref="box">
    <button @click="getRef()">获取ref</button>

	methods: {
	    getRef(){
	      alert(this.$refs.box.value)
	    }
	  },