学习总结

93 阅读1分钟

Vue介绍:

第六课:

/**交互元素
input (text,checkbox,radio)
textarear
select
**/
<div id="app">
    <input v-model="message"/>
    <p>{{message}}</p>
</div>
var message = 'hello'
new Vue({
    el:"#app",
    data:{
        message
    },
    methods:{//定义方法
       fn(ev){
            console.log(this);//指向实例
           console.log(ev.target)
       } 
    }
});

指令 directive

·理解指令
1.是一种特殊的自定义行间属性,以v-开头
2.将数据和DOM做关联,当表达式的值改变时,响应式地作用在视图
3.预期的值为javascript表达式
·指令初体验
 v-bind:动态的绑定数据。
 <p :title="mesg"></p>
 <input v-on:input="fn()">//v-on:input == oninput 当用户向 <input> 中尝试输入时执行 JavaScript

Vue中绑定事件 使用指令绑定 语法:v-on:事件名="表达式"