vue @click 多个事件_Vue当中的模板、指令与修饰符

模板 template的三种写法

• 第一种、Vue完整版，写在HTML里面

  {{n}}
  +1<>


new Vue({
	el:"#xxx"
  data:{M:0}, //data可以改成函数
  methods:{add(){}}
})

在html里面{{n}}会自动被替换，@click也会自动的被理解并且添加上一个事件监听。

最后我们只需要new Vue一下，然后传入一个元素传入一个选择器即可使用。

• 第二种、Vue完整版，写在选项里面

new Vue({
	template:`
		

			{{n}}
			+1
		
`,
  data:{n:0}, //data 可以改成函数
  methods:{add(){this.n +=1}}
}).mount("#app")

这种方法在html里面只需要写一个div和id里面的内容留空。

然后将内容写在template里面即可，注意一个小细节：div#app 会被替换，因为new Vue运行完之后会将html里面的div进行替换，之后你会发现并没有一个id为app的div。

• 第三种、Vue非完整版，配合xxx.vue文件

首先在xxx.vue文件里面写入