VUE的模版、指令、修饰符

1. template的三种写法

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

2. 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中的内容所替换。

3. 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。