Vue演练场基础知识（一）声明式渲染+Attribute绑定+事件监听

本文链接：https://blog.youkuaiyun.com/weixin_41944775/article/details/144812948

为学习Vue基础知识，我动手操作通关了Vue演练场，设置偏好时我选的是选项式 + 单文件组件。该演练场教程的目标是快速体验使用 Vue 是什么感受，深入了解请观看深入指南。以下是我结合深入指南写的总结笔记，希望对Vue初学者有所帮助。

文章目录

一. 开始
二. 声明式渲染
三. Attribute绑定
四. 事件监听

一. 开始

<template>
  <h1>Hello World!</h1>
</template>

二. 声明式渲染

Vue 的单文件组件（即*.vue）是一种特殊的文件格式，把一个 vue 组件的模板、逻辑和样式封装在单个文件里。
Vue 的核心功能是声明式渲染：通过拓展于标准 HTML 的模板语法，我们可以根据 JS 变量的状态来描述 HTML 应该是什么样子。当状态改变，HTML 就会自动更新。
先看一个最简单的，我们只要在 JS 中使用data组件选项（等于一个返回对象的函数）声明一个变量，再在模板中用双花括号包住一个变量或一个 JS 表达式，就能动态渲染文本内容了。

<script>
export default {
    data() {
        return {msg: 'Hello World!'};
    }
}
</script>
<template>
  <h1>{{msg}}</h1>
</template>

三. Attribute绑定

既然动态渲染文本内容使用双花括号，那把数据属性动态绑定到元素Attribute也可以用双花括号吗？

<h1 className={{titleClass}}></h1> // 无效

遗憾的是，Vue模板语法中双花括号只能用于文本插值，不能用于Attribute。绑定Attribute要用v-bind指令：

<h1 v-bind:className="titleClass"></h1>

或简写为

<h1 :className="titleClass"></h1>

指令是一种v-开头的特殊属性，是vue模板语法的一部份，冒号后面是v-bind指令的参数。:className="titleClass"的意思是把元素里的Attribute，即className，与组件JS状态里的titleClass 绑定，使className的取值自动与titleClass保持同步。

也可以向组件传入Attribute。如果一个传入子组件的Attribute 或者 v-on 事件监听器没有被子组件显式声明为props或 emits，它就会被看作透传 Attribute，直接添加到子组件根元素上。最常见的例子就是 class、style 和 id。

// 父组件中
<MyCompo
	:class="titleClass"
	:isShow="isShow"
	@onclick="onClick"
	@someEvent="someEvent"
/>

// MyCompo.vue
<script>
export default {
	props: ['isShow'],
	emits: ['someEvent']
}
</script>
<template>
	<!--class和onclick将被视为Attribute，加在这个根元素div上-->
	<div>
		略
	</div>
</template>

四. 事件监听

普通的元素 Attribute 可以用v-bind 与变量或表达式绑定起来，但元素事件属性的值是函数或语句，不能用v-bind，在 Vue 中该怎么给元素绑定事件属性呢？
若不使用Vue模板语法，用原生HTML也可以设置事件属性，但事件属性内容只能写一行字符串（可以包含多条语句），且不能调用data里的数据属性，局限性较大。

<template>
  <button onclick="alert('Hello World!')">click me</button>
</template>

Vue模板语法中为事件属性准备的指令的是v-on指令，v-on里可以直接调取data里的数据属性。

<template>
  <button v-on:click="add">xxx</button>
</template>

或简写为

<template>
  <button @click="add">xxx</button>
</template>

v-on的值分为两种，像上面的@click="add"，add是JS标识符，所以属于方法事件处理器，如果值不是合法的 JavaScript 标识符或属性访问路径，就属于内联事件处理器。举例来说，foo、foo.bar 和 foo[‘bar’] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器。

方法事件处理器

若事件处理比较复杂，就需要在methods组件选项（等于一个对象，其中的每个元素都是一个方法）中定义一个方法，方法体的内容是事件处理逻辑，再将其方法名赋值给v-on指令，组成一个方法事件处理器，一起将methods中的事件处理函数绑定到元素的事件属性上。
在methods组件选项中，可以用this访问组件实例，并通过组件实例读取和修改data中的变量。

<script>
export default {
  data() {
    return {count: 0}
  },
  methods: {
    add(event) {
      this.count++;
      event.stopPropagation();
    }
  }
}
</script>

<template>
  <button @click="add">Count is: {{ count }}</button>
</template>

内联事件处理器

若事件处理非常简单，只需一行命令，可以不定义方法，直接写入内联事件处理器。

<button @click="count++">xxx</button>

若v-on中调用了方法而不是等于方法名，也属于内联事件处理器。

<button @click="add()">xxx</button>

或

<button @click="say('Hello', $event)">xxx</button>

或

<button @click="event => say('Hello', event)">xxx</button>

事件修饰符

除了普通的v-on指令，Vue模板语法还支持一些特殊的事件修饰符。下面列举了一部份，更详细的请见事件修饰符。

// 相当于click事件中加了event.stopPropagation()，单击事件将停止传递
<button @click.stop="add">xxx</button>

// 相当于submit事件中加了event.preventDefault()，提交事件将不重载页面
<button @submit.prevent="add">xxx</button>

// 可以链式
<button @submit.stop.prevent="add">xxx</button>

// 可以只有修饰符
<button @submit.stop>xxx</button>

// 仅当 event.target 是元素本身时才会触发事件处理器
<button @click.self="add">xxx</button>
...

// 键盘按下 `key` 为 `Enter` 的键时触发
<button @keyup.enter="add">xxx</button>

// 按下tab触发 (Vue 为一些常用的按键提供了别名)
<button @keyup.tab="add">xxx</button>
...