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

模板 template的三种写法

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

<div id=xxx>
  {{n}}
  <button @click="add">+1<></button>
</div>

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

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

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

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

<div id=app>
</div>

new Vue({
	template:`
		<div>
			{{n}}
			<button @click="add">+1</button>
		</div>`,
  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文件

<template>
	<div>
		{{n}}
		<button @click="add">+1</button>
	</div>
</template>

<script>
export default {
	data(){ return {n:0} },// data 必须为函数
	methods:{add(){ this.n += 1 }}
}
</script>
<style>这里写 CSS </style>

首先在xxx.vue文件里面写入<template>标签，注意这里既不是属性也不是html，就是一个单纯的标签，标签里面写内面内容即可。

里面不需要加id因为id是用来挂载的，这里是内容不需别的地方挂载到这里，而是这里挂载到别的地方。

重点牢记：template标签里面的div不是html而是xml，两者区别在于html对于语法更加松散一点，后者xml语法更容易写编译器，因为语法更加严格一些。

最后只需要在script标签里面只需要默认导出一个选项即可，注意：这里的data必须是一个函数，不然就会出现被多个组件共用的情况。

模板当中有那些语法

内容展示

• 表达式内容展示

1. {{ object.a }} 表达式。
2. {{ n + 1 }} 可以写任何运算。
3. {{ fn(n) }} 可以调用函数。

如果写的上面表达式值为undefined 或者 null 就不显示，这是一个Vue的特殊处理对空值就直接不显示。

• HTML 内容

假设 data.x 值为 <strong>hi</strong>

<div v-html="x"></div> //即可显示粗体的 hi

通过v-html="x"写法，这个意思就是告诉vue这个x的值是一个父文本，需要当做一个父文本显示到页面当中。

• 展示单纯的{{ n }}

如果就想单纯的展示{{ n }}在页面上面可以使用下面这种写法。

<div v-pre>{{ n }}</div>

v-pre这种写法不会对模板进行任何 的编译，写什么就是什么。

绑定属性

• 绑定src属性<img v-bind:src="x" />

通过v-bing可以进行标签绑定，这个“x”一定是个变量，如果这个x的值是一个URL那么这个src就等于这个URL，如果值是undefined的话那么这个就不显示。

• v-bind:简写为：<img :src="x" />

这种写法为简写，等价于上面的写法。就是将x的值求出来付给img的src。

• 绑定对象

除了绑定一些字符串之外我们还可以绑定一些复杂的操作，比如对象。

<div
	:style="{border: '1px solid red',height:100}"> //注意这里可以将'100px'简写成'100'
</div>

通过div绑定一个style，style等于一个对象。关于单位默认只支持像素，如果有em或其他单位就只能老老实实的写上去了。

绑定事件

绑定v-on:事件名

<button v-on:click="add">+1</button>

点击之后。Vue会运行add()

<button v-on:click="xxx(1)">xxx</button>

点击之后，Vue会运行xxx(1)

<button v-on:click="n+=1">xxx</button>

点击之后，Bue会运行n+=1

如果发现函数就加括号然后再调用，否则就直接运行代码。

• v-on事件可以进行缩写

<button @click="add">+1</button>

Vue模板主要的特点有

• 使用XML语法 （不是HTML）。
• 使用{{}}插入表达式。
• 使用v-html、v-on、v-bing 等指令操作DOM。
• 使用v-if、v-for 等指令实现条件判断和循环。

指令 Directive

指令可以理解成命令或者指示，例如v-on就是在什么时候触发add这个函数，这就是指令。

• 什么是指令？

<div v-text="x"></div>
<div v-html="x"></div>

在Vue当中所有已“v-”开头的东西就是指令，列如上面代码。

• 语法

1. v-指令名:参数=值，列如：v-on:click=add。
2. 如果值里面没有参数和值，就可以不同添加引号。
3. 有些指令没有参数和值，如：v-ore它就直接在div上面加一个花括号，它就不会对里面的花括号进行任何的处理。
4. 有些指令没有值，如 v-on:click.prevent。

修饰符

• 那些指令支持修饰符

1. @click.stop="add"表示阻止事件传播/冒泡。
2. @cilick.prevent="add"表示阻止默认动作。
3. @click.stop.prevent="add"同时表示两种意思。

• 一共有多少修饰符

1. v-on 支持的有：.{keycode | keyAlias} .stop .prevent ​.capture ​.self ​.once ​.passive ​.native​。

快捷键相关： .ctrl .alt .shift .meta .exact。

鼠标相关：.left .right .middle。

1. v-bind 支持的有：.prop .camel .sync。
2. v-model 支持的有： .lazy .mumber .trim。