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:事件名="表达式"