vue 一个MVVM的框架

M model

V view

MVVM:model改变会影响视图view，view视图改变反过来影响model

双向数据绑定必须在表单里面使用

双向数据绑定

<template>
 <div id="app">
 <img src="./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="./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>

运行结果展示

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.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) //获取自定义属性