<!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><button v-on:click="jia(2,$event)">+</button></p>-->
<!-- <p><button v-on:click="a++">+</button></p>-->
<p><btn @click.native="jia"></btn></p> <!--native 是修饰符 通过native调用方法 给组件绑定原生 本地事件-->
</div>
<button οnclick="vm.jia()">外部访问构造器里的事件</button>
<!-- native 是修饰符-->
<!-- 阻止单击事件冒泡 -->
<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>
<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><button v-on:click="jia(2,$event)">+</button></p>-->
<!-- <p><button v-on:click="a++">+</button></p>-->
<p><btn @click.native="jia"></btn></p> <!--native 是修饰符 通过native调用方法 给组件绑定原生 本地事件-->
</div>
<button οnclick="vm.jia()">外部访问构造器里的事件</button>
<!-- native 是修饰符-->
<!-- 阻止单击事件冒泡 -->
<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>