vue2.0学习笔记 ——methods

来源：互联网发布：F22数据编辑：程序博客网时间：2024/06/05 14:01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项 methods 21</title>
<link type="text/css" rel="stylesheet" href="../assets/css/index.css" />
<script src="../assets/js/vue.js"></script>
</head>

<body>
<h1>选项 methods</h1>
<hr />
<div id="app">
{{a}}



<p><btn @click.native="jia"></btn></p> 
</div>
<button onclick="vm.jia()">外部访问构造器里的事件</button>



<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>


<script>
var btn = {
template:'<button>我是引入的外部组件</button>'
}//为什么要这么做因为button很多页面有自己的颜色自己的样子所以做成组件
var vm = new Vue({
el:'#app',
data:{
a:10
},
methods:{
jia:function(num,event){
this.a++;
}
/*jia:function(num,event){
console.log(event);
console.log(event.clientX);
if(num!=''){
this.a+=num;
}else{
this.a++;
}
} */
},
components:{
'btn':btn
}
});
</script>
<script src="./webpack.js"></script>
</body>
</html>

0 0