重看Vue文档第一天（基础部分总结）

组件化应用构建

• 几乎任意类型的应用界面都可以抽象为一个组件树；
• 子单元通过prop接口与父单元进行了良好的解耦；
• 每个Vue应用都是通过用createApp函数创建一个新的应用实例开始的；
• 传递给createApp的选项用于配置根组件，当我们挂载应用时，该组件被用作渲染的起点；

const RootComponent = {
	/*选项*/
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

• vm是ViewModel的缩写；
• 注意：不要在选项property或回调上使用箭头函数，因为其没有this，进场会导致语法错误。

模板语法

• Vue.js使用了基于HTML的模板语法，能被遵循规范的浏览器和HTML解析器解析；
• Mustache标签将会被替代为对应组件实例中msgproperty的值；
• 为了输出真正的HTML，需要使用v-html指令；
• 注意：在你的站点上动态渲染的HTML是非常危险的，因为它很容易导致XSS攻击（绝不要将用户提供的内容作为插值）；
• 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

Data Property和方法

• 组件的data选项是一个函数（返回一个对象），Vue会在创建新组建实例的过程中调用此函数；
• Vue会通过响应性系统将其包裹起来，并以$data的形式存储在组件实例中；
• 我们用methods选项向组件实例添加方法，它应该是一个包含所需方法的对象；
• Vue自动为methods绑定this，以便于它始终指向组件实例；
• 在定义methods时应该避免使用箭头函数，这会阻止Vue绑定恰当的this指向；
• Vue没有内置支持防抖和节流，但可以使用Lodash等库来实现。

计算属性和侦听器

• 对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性；
• 计算属性将基于它们的响应依赖关系缓存；
• 计算属性默认只有getter，不过在需要时你也可以提供一个setter；
• Vue通过watch选项提供了一个更通用的方法来响应数据的变化；
• 当需要在数据变化时异步或开销较大的操作时，使用watch是最有用的。

Class与Style绑定

• 对象语法：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

• 绑定的数据对象不必内联定义在模板里；
• 数组语法+对象语法：

<div :class="[{ active: isActive }, errorClass]"></div>

• 在:style中使用需要一个vendor prefix（浏览器引擎前缀）的CSS property时，Vue将自动侦测并添加相应的前缀。

条件渲染

• v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别；
• 带有v-show的元素始终会被渲染并保留在DOM中，其只是简单地切换元素的display CSS属性值；
• v-show不支持<template>元素，也不支持v-else；
• 如果需要非常频繁地切换，则使用v-show较好；
• 如果在运行时条件很少改变，则使用v-if较好；
• 不推荐v-if和v-for一起使用，同时使用时v-if具有比v-for更高的优先级，这意味着v-if将没有权限访问v-for里的变量（可以把v-for移动到<template>标签中来修正）。

列表渲染

• 用v-for把一个数组映射为一组元素；
• 你也可以用v-for来遍历一个对象的property；
• 在遍历对象时，会按Object.keys()的结果遍历，但是不能保证它在不同JavaScript引擎下的结果都一致；
• 不要使用对象或数组之类的非基本类型值作为v-for的key，请用字符串或数值类型的值；
• Vue将被侦听的数组的变更方法进行了包裹，所以它们也会触发视图更新，这些被包裹的方法包括：push()、pop()、shift()、unshift()、splice()、sort()、reverse()；
• 非变更方法：filter()、concat()、slice()，它们不会变更原始数组，而总是返回一个新数组。

事件处理

• 有时也需要在内联语句处理器中访问原始的DOM事件。可以用特殊变量$event把它传入方法；
• 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔；
• Vue.js为v-on提供了事件修饰符；

修饰符	作用
.stop	阻止单击事件继续冒泡
.prevent	提交事件不再重载页面
.capture	添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素处理
.self	只当在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的
.once	事件仅触发一次
.passive	不阻止默认行为（尤其能够提升移动端的性能）

• @click.prevent.self会阻止元素本身及其子元素的点击的默认行为；
• @click.self.prevent只会阻止对元素自身的点击的默认行为。

表单输入绑定

• v-model始终将当前活动实例的数据作为数据来源；

① text和textarea元素使用valueproperty和input事件；
② checkbox和radio使用checkedproperty和change事件；
③ select字段将value作为prop并将change作为事件。

• 用v-for渲染select的动态选项；

修饰符	作用
.lazy	在change时同步数据而非input时更新
.number	自动将用户的输入值转为数值类型
.trim	自动过滤用户输入的首尾空白字符

组件基础

• 你每用一次组件，就会有一个它的新实例被创建；
• 通常一个应用会以一棵嵌套组件树的形式来组织；
• 我们可以使用v-bind来动态传递prop；
• 在组件的emits选项中列出已抛出的事件；
• 我们使用<slot>作为我们想要插入内容的占位符；
• HTML attribute名不区分大小写，因此浏览器将所有大写字符解释为小写；
• 当你在DOM模板中使用时，驼峰prop名称和event处理器参数需要使用它们的kebab-cased（横线字符分隔）等效值。