vue 数据绑定

文本绑定： {{ }}
如果使用v-once指令，只能绑定一次数据。name值第一次被绑定成功之后，修改该数据页面也不会进行渲染

<span v-once>{{name}}</span>

HTML绑定：
直接使用大括号绑定html，会被解析成字符串；使用v-html来绑定html，以下span会被替换成html中的内容

<div> <span v-html="html"></span> </div>

html标签属性绑定数据
使用v-bind，以后div的id就会被绑定成“id”的值

<div v-bind:id="id"></div>

所有的绑定都可用js表达式写，比如：

{{number ++}}
<div v-bind:id="'myid_'+id"></div>

指令
绑定数据：v-bind
绑定事件：v-on
绑定点击事件：v-on:click="click();"
双向数据绑定 v-model
vue是一个MVVM的框架。M：model。V：view
MVVM：model改变会影响试图，试图改变会反过来影响model
双向数据里面使用，必须在表单里面使用

<input type="text" v-model = 'msg'>
export default{
  data(){
     return {
        'msg' : '你好VUE'
      }
  }
}


<button vue-on='getMsg()'>获取数据</button>
export default{
  data(){
     return {
        'msg' : '你好VUE'
      }
  },
  methods:{
    getMsg(){
        alert(this.msg);
    },
    setMsg(){
      this.msg = "我改变了"；
    }
  }
}

ref获取dom节点：

<input type="text" ref="myself">
<button vue-on='getMsg()'>获取数据</button>
export default{
  data(){
     return {
        'msg' : '你好VUE'
      }
  },
  methods:{
    getMsg(){
        console.log(this.$refs.myself);
    }
  }
}