VUE的模版、指令、修饰符

1. 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也会自动的被理解并且添加上一个事件监听。

Vue完整版，写在options里面

<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")

使用VUE实例的$mount进行挂载，需要注意的是，div#app将会被template中的内容所替换。

VUE非完整版，配合xxx.vue文件在Demo.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>

在该文件中使用<template>标签，注意该标签中的内容并非html，而是XML，前者语法更加松散，后者语法更加严格，更易编写编译器。

2. 模版中的语法

内容展示

表达式
1. {{ obj.a }} 表达式
2. {{ n + 1 }} 运算
3. {{ fn(n) }} 调用函数注意若表达式值为null 或 undefined 则不显示。
另一种写法是<div v-text='表达式'></div>，但不常用。
HTML内容
假设 data.x 的值为 <strong>hi</strong>
```
<div v-html='x'></div>
```
以上代码可显示粗体的hi，v-html表示值为富文本。
单纯的{{n}}
```
<div v-pre>{{n}}</div>
```
使用v-pre，模版不会对该标签进行编译。

绑定属性

绑定src属性
```
<img v-bind:src='x' />
```
v-bind:attribute用于绑定属性，可以简写为:attribute
```
<img :src='x' />
```

绑定对象

<div :style="{border: '1px solid red',height:100}"> //'100px'简写成'100'
</div>

为div的style属性绑定一个对象，单位默认为像素。

绑定事件

v-on:事件名
```
<button v-on:click="add">+1</button>
```
点击后运行add()
```
<button v-on:click="xxx(1)">xxx</button>
```
点击后运行xxx(1)
```
<button v-on:click="n+=1">xxx</button>
```
点击后运行n+=1

如果值为函数名，则进行调用，其他的直接运行。

v-on:事件可以缩写成 @事件
```
<button @click="add">+1</button>
```

条件判断

if……else

<div v-if="x>0"> x大于0 </div>
<div v-else-if="x===0">x等于0</div>
<div v-else>x小于0</div>

循环

for (value, key) in

<ul>
	<li v-for="(u, index) in users" :key="index">
    	索引:{{index}} 值:{{u.name}}
    </li>
</ul>
<ul>
	<li v-for="(value, index) in obj" :key="name">
    	属性名:{{index}} 属性值:{{value}}
    </li>
</ul>

显示、隐藏

v-show

<div v-show="n%2 === 0">n是偶数</div>

以上代码近似等于

<div :style"{display: n%2===0 ? 'block':'none'}">n是偶数</div>

小结一下

Vue模版的主要特点：

使用XML语法
使用{{}}插入表达式
使用 v-html、v-on、v-bind 等指令操作DOM
使用v-if、v-for 等指令实现条件判断和循环

3. directive 指令

指令是带有 v- 前缀的特殊 attribute，表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

语法
1. v-指令名:参数=值，如v-on:click='add'
2. 值中不含特殊字符，可不加引号
3. 某些指令无参数和值，如v-pre
4. 某些指令无值，如v-on:click.prevent

4. modifier 修饰符

修饰符是以.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

部分指令支持修饰符
1. @click.stop='add'表示阻止事件传播/冒泡
2. @click.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。
2. v-bind 支持的有：.prop .camel .sync。
3. v-model 支持的有： .lazy .mumber .trim。

VUE的模版、指令、修饰符

1. template的三种写法

2. 模版中的语法

内容展示

表达式

HTML内容

单纯的{{n}}

绑定属性

绑定src属性

绑定对象

绑定事件

v-on:事件名