vue双向数据绑定和响应式原理，Vue双向数据绑定时间介绍
vue双向数据绑定和响应式原理，Vue双向数据绑定时间介绍<button v-on:click="run1()">执行方法的第一种写法</button> <br/> <button @click="run1()">执行方法的第二种写法</button> vue事件对象 <button @click="eventFn($event)" data-aid="123">事件对象</button> <script> export default { name: 'app' data () { return { msg: 'Welcome to Your Vue.js App' list:[] } } methods:{ run1(){ alert(this.msg) } getMsg(){ alert(this.
vue 一个MVVM的框架M model
V view
MVVM: model改变会影响视图view，view视图改变反过来影响model
双向数据绑定必须在表单里面使用
双向数据绑定<template> <div id="app"> <img src="https://img.aigexing.com./assets/logo.png"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <input type="text" v-model='msg'></input> <button v-on:click="getMsg()">获取表单数据</button> </div> </template> <script> /* Vue双向数据绑定，时间介绍，ref获取dom节点 vue 一个MVVM的框架 M model V view MVVM: model改变会影响视图view，view视图改变反过来影响model 双向数据绑定必须在表单里面使用 */ export default { name: 'app' data () { return { msg: 'Welcome to Your Vue.js App' } } methods:{ getMsg(){ alert('vue方法执行') } } } </script> <style> #app { font-family: 'Avenir' Helvetica Arial sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1 h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
运行结果展示
getMsg(){ alert('vue方法执行') } 替换成 getMsg(){ alert(this.msg) }
显示效果
这样可以看出获取model信息，修改信息model也会改变，这就是vue的双向数据绑定
ref获取dom节点<template> <div id="app"> <img src="https://img.aigexing.com./assets/logo.png"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <input type="text" v-model='msg'></input> <button v-on:click="getMsg()">获取表单数据</button> <br/> <br/> <br/> <button v-on:click="setMsg()">修改表单数据</button> <br/> <br/> <br/> <!-- ref获取dom节点--> <input type="text" ref='userinfo'></input> <div ref='box'>box</div> <button v-on:click="getInputValue()">获取第二个表单数据</button> </div> </template> <script> /* Vue双向数据绑定，时间介绍，ref获取dom节点 vue 一个MVVM的框架 M model V view MVVM: model改变会影响视图view，view视图改变反过来影响model 双向数据绑定必须在表单里面使用 */ export default { name: 'app' data () { return { msg: 'Welcome to Your Vue.js App' } } methods:{ getMsg(){ alert(this.msg) } setMsg(){ this.msg = "修改后的数据"; } getInputValue(){ /* 获取dom节点*/ console.log(this.$refs.userinfo); alert(this.$refs.userinfo.value); this.$refs.box.style.background='red' } } } </script> <style> #app { font-family: 'Avenir' Helvetica Arial sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1 h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
运行结果展示
<button v-on:click="run1()">执行方法的第一种写法</button> <br/> <button @click="run1()">执行方法的第二种写法</button> vue事件对象
<button @click="eventFn($event)" data-aid="123">事件对象</button> <script> export default { name: 'app' data () { return { msg: 'Welcome to Your Vue.js App' list:[] } } methods:{ run1(){ alert(this.msg) } getMsg(){ alert(this.msg) } requestData(){ for(var i = 0; i < 10 ; i ){ this.list.push('我是第' i '条数据'); } } eventFn(e){ console.log(e); } } } </script>
打印结果
可以利用事件对象获取dom节点
e.srcElement // dom节点 e.srcElement.style.background = 'red'; // 设置背景颜色 console.log(e.srcElement.dataset.aid) //获取自定义属性
