vue打卡－指令

• 什么是指令
  1.特殊的自定义行间属性，以v-开头
  2.连接数据和dom，做相应的视图更新
  3.预期的值为javascript表达式
• v-bind
  v-bind : 属性名=表达式
<p v-bind:title="message">{{message}}</p>
  
  v-bind
• v-on
  使用指令绑定
  v-on : 事件名=表达式

<div id="app">
    <input type="text" name="" v-on:input="inputHandle">
    <p>    {{message}}    </p>
    <p v-bind:title="message">{{message}}</p>
</div>

<script>
    let message = "hello";
    let vm = new Vue({
        el:"#app",
        data:{
            message:message
        },
        methods:{
            //定义方法
            inputHandle(ev){
                //方法中的this都指向实例
                console.log(this === vm);
                console.log(ev.target.value);
                this.message = ev.target.value;
            }
        }
    })
</script>

视图

打印this===vm

• 方法中的this指向
  this指向vue实例，不指向方法自身．