vue学习笔记（2）

这次是比较麻烦的几个指令。

v-on指令

<button v-on:click="doThis"></button>

可缩写为

<button @click="doThis"></button>

click后的方法名与methods的方法名一致

var app = new Vue({
  el: '#app',
  methods:{
  	doThis:function () {
  		console.log('clicked');
  	} })

鼠标移入移出事件

<button v-on="{ mouseenter:onEnter , mouseleave:onOut}" v-on:click="onClick()" id="app">点我</button>

表单上的事件

<form @keyup.enter="onKeyenter" v-on:submit="onSubmit($event)">
<!-- <form v-on:submit.prevent="onSubmit"> -->防止页面刷新，自动提交
	<input type="text"></input>
	<input type="submit"></input>
	
</form>

var app = new Vue({
  el: '#app',
  methods:{
  	onSubmit:function (e) {
  		e.preventDefault();//e防止刷新自动提交
  		console.log('submit');
  	},onKeyenter:function(){
  		console.log('enter');
  	} })

v-bind指令

v-bind指令用于绑定，可绑定a链接，也可绑定图片地址，也可以绑定class、style等。

a链接

<a v-bind:class="klass" v-bind:href="url"></a>

可缩写为

<a :class="klass" :href="url"></a>

var app = new Vue({
  el: '#app',
  data:{
    url:'http://baidu.com',
    klass:'btn btn-default',//此为bootstrap的一个按钮样式
  }
})

图片地址

<img v-bind:src="img">

var app = new Vue({
  el: '#app',
  data:{
    img:'../image/3.jpeg',
  }
})

绑定style

<style type="text/css">
    .active{
	background: red;
	    }
</style>

<a :class="{active:isActive}" :href="url"></a>

var app = new Vue({
  el: '#app',
  data:{
    isActive:true//false
  }
})

computed计算

用v-model动态绑定数据，方便修改后检测计算是否正确

<div id="app">
	<table border="1">
		<thead>
			<th>学科</th>
			<th>分数</th>
		</thead>
		<tbody>
			<tr>
				<td>数学</td>
				<td><input type="text" v-model.number="math" /></td>
			</tr>
			<tr>
				<td>语文</td>
				<td><input type="text" v-model.number="Chinese" /></td>
			</tr>
			<tr>
				<td>英语</td>
				<td><input type="text" v-model.number="English" /></td>
			</tr>
			<tr>
				<td>总分</td>
				<td><input type="text" v-model.number="sum" /></td>
			</tr>
			<tr>
				<td>平均分</td>
				<td><input type="text" v-model.number="average" /></td>
			</tr>
		</tbody>
	</table>
</div>

var app = new Vue({
  el: '#app',
  data:{
  	math:80,
  	Chinese:90,
  	English:89
  },
  computed:{
  	sum:function () {
  		return parseFloat(this.math)+parseFloat(this.Chinese)+parseFloat(this.English);
  	},
  	average:function(){
  		return Math.round(this.sum/3)
  	}
  }
})

猜你喜欢