vue2- v-model表单双向绑定、v-on事件绑定简写@、computed与methods

```css
<html>
	<head></head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
		<!-- 
		es6里如果属性值是变量,并且这个变量名和属性名一样的话,
			那么属性名和属性值可以简写,对象里函数的属性也可以缩写,
			默认把:function一同省略 fn(){} 这样
		v-model 双向绑定 仅仅针对于表单元素
			checkbox:
				单个复选框绑定到布尔值
				多个复选框的话就是,绑定到数组(要写value,value写死)
			radio:
				单选框直接绑定到值
			select:
				下拉选择框直接绑定到值
			修饰符:.number --自动把输入的转换为数字 v-model.number=""
					.trim --去首位空格 v-model.trim=""
		v-on 绑定事件(注意this) 缩写为@事件名 @click="fn"
			阻止事件冒泡(prevent):v-on:click.prevent=""
			按键修饰符:v-on:keyup.enter="" --回车松开触发事件
						v-on:keyup.page-down="" --向下翻页按键触发事件
		computed:计算属性 比如this.box.splite("")这种,要对属性进行处理,
				就放在computed里面,写成方法,然后再{{}}里写函数名字
		computed与methods区别:
				计算属性时,只用它依赖的值发生变化的时候才会触发,
				就是数值变了,方法自行处理这些东西不需要调用,
				而methods里面的函数需要调用
				computed计算属性性能更高,methods是主动调用,两者不冲突
				记得在computed里面加return
		watch:检测数据(监听),改变其中一个属性值,就会触发里面的方法(不常用)
		computed与watch区别:
				computed本质是计算数值,然后渲染到页面中
				而watch知识监测数据,就是一个侦听器,当数据发生改变,就会执行里面的方法
	 -->
	 
	<div id="app">
		<div v-html="message"></div>
		<input type="radio" value="Tom" v-model="val"/>
		<input type="radio" value="Lucas" v-model="val"/>
		<input type="radio" value="Alex" v-model="val"/>
		<h1>{{val}}</h1>
	</div>
	<div id="app2">
		<input type="checkbox" value="Jane" v-model="val"/>
		<input type="checkbox" value="Jack" v-model="val"/>
		<h2>{{val}}</h2>
	</div>
	<div id="app3">
		<input type="checkbox" v-model="val"/>
		<h3>{{val}}</h3>
	</div>
	<div  id="app4">
		<select v-model="val">
			<option>Tom</option>
			<option>Jack</option>
			<option>Alex</option>
		</select>
		<h3>{{val}}</h3>
		<button v-on:click="fn">btn</button>
	</div>
	<div id="app5">
		<input v-model.number="val"/>
		<button v-on:click="btn2">btn2</button>
		<h3>{{say}}</h3>
		<h3>{{fullName}}</h3>
	</div>

	<script>
		var age=12
		var obj={
			name:name, //这里的name是变量
			age,       //age:age 缩写
			height:"180"
			
		}

		//单选框
		var app = new Vue({
			el:"#app",	
			data:{
				message:"

vue

"
, val:"" } }) //复选框(多个) var app2 = new Vue({ el:"#app2", data:{ val:[] } }) //复选框(单个) var app3 = new Vue({ el:'#app3', data:{ val:"" //结果显示true(选中),false(没选中) } }) //下拉选择框,绑定事件 var app4 = new Vue({ el:'#app4', data:{ val:"" }, //时间绑定卸载methods里面 methods:{ fn:function(){ alert(this.val) //要写this.val要不然不知道是哪里的val } } }) // var app5 = new Vue({ el:"#app5", data:{ val:"", box:"hello", firstName:"Foo", lastName:"Bar", fullName:"Foo Bar" }, methods:{ btn2(){ console.log(typeof(this.val)) } }, computed:{ say:function(){ return this.box.split("").reverse().join("-") } }, watch:{ firstName:function(c){ this.fullName = c + ' ' + this.lastName }, lastName:function(c){ this.fullName = this.firstName + ' ' + c } } }) </script> </body> </html>

你可能感兴趣的:(vue2- v-model表单双向绑定、v-on事件绑定简写@、computed与methods)