Vue（渐进式 JavaScript 框架）

指令（指令 (Directives) 是带有 v- 前缀的特殊特性。）

• 一种是 内置指令， 一种是 自定义指令
  • v-text 用来展示文本
  • v-html 渲染dom结构， 也可以渲染文本（但是他是不安全的，因为他不会校验文本）
  • {{ }} 小胡子语法，插值语法， v-text 的用发差不多， 只是形式不一样
  • v-show 都是用来展示或隐藏元素，但是v-show 通过 display css 的属性进行隐藏元素。
  • v-if 都是用来展示或隐藏元素，但是是通过直接不渲染的方式进行显示或隐藏元素。
  • v-bind 简写 : 在vue中用于绑定一个或多个特性
  • v-for 用于渲染一组数据 他可以遍历数组或对象
  • v-bind:key（唯一性， 而且我们推荐在遍历时使用 id 做 key， 而不是 index） key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
  • v-model 在 vue 中进行双向数据绑定，他是使用 :input 和 @change 事件进行底层的实现（是不是一般都用于表单，它还可以被运用在 自定义组件上）；
  • v-on 简写 @, 在 vue 中进行绑定事件
  • v-if v-else-if v-else 用于判断一组数据的显示
• 自定义指令
• 语法
  • Vue.Directive(‘绑定的名称’, 处理函数)
  • derectives(‘绑定的名称’, 处理函数)
• 使用
  • v-绑定的名称
  • 
    

侦听属性(watch) & 计算属性（computed）

• 侦听属性
  • 1. Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
  • 1. 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
• 计算属性
  • 1. 计算属性是基于当前数据进行简单的加工返回的新数据，
  • 1. 当计算属性的数据变化时它会自动计算，计算属性返回的值也会跟着变化。
  • 1. 不同的是计算属性是基于它们的响应式依赖进行缓存的。

变更方法（能够触发试图更新的我们称之为变更方法）

  push()
  pop()
  shift()
  unshift()
  splice()
  sort()
  reverse()
  // 让字符串进行反转后输出
  const str = 'hello';
  str.split('').reverse().join('');

非变更方法（不能触发试图更新的）

  filter()
  concat()
  slice()
  **它们不会改变原始数组，而总是返回一个新数组。**

区别 watch & computed & methods

• 1. computed: 用于简单的数据监测，而且具有缓存功能，每次数据变更只需要计算一次就可以，而且可以监听多个值，只要任意被监听的值发生改变都会重新触发计算。
• 1. watch：当需要数据变化时执行异步或者开销较大的操作时执行 watch， 而且只能简单一（单）个数据。
• 1. methods: 只有调用才会触发，没有缓存功能，并且每次调用都会被执行。
• 注：watch 一 对 多，computed 多 对 一。

命令行工具 (CLI) 1.0（vue的上一个版本）, 2.0（目前用的最多的）, 3.0（vite）

• 1. 在全局下载 @vue/cli 推荐使用 cnpm & yarn

示例：
cnpm i -g @vue/cli

• 1. 使用 vue create xxx(项目名称) 来生成一个项目

示例：
vue create my_app

• 1. 进入到下载项目

示例：
cd my_app

• 1. 启动项目 ```javascript

  示例：

  npm run serve

  or

  yarn serve ```

** 如果用npm那就一直用npm。 如果用yarn 那就一直用yarn 不要混合使用，也不要一个下载一个去启动项目 **

如果下载 node-sass 的时候下载不下来，就执行下面那两句话就可以。

• 1. yarn config set registry https://registry.npm.taobao.org -g
• 1. yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

如果执行报错 说 yarn 不是内部或外部命令, 先去全局下载 yarn 再去执行 上面这两句话

cnpm i -g yarn

修饰符

• 1. 按键修饰符
• 1. 事件修饰符
• 1. 鼠标修饰符
• 1. .exact 修饰符
• 1. .once 修饰符
• v-model
  • 1. .lazy 修饰符
  • 1. .number 修饰符
  • 1. .trim 修饰符
• 1. .passive 修饰符

ref

• 1. ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
• 1. 使用 this.$refs 获取真实dom 或 组件实例
• 1. 放在 dom 上获取的是dom， 放在组件上， 获取的是 组件实例

注册组件

注册全局组件

• Vue.component(‘创建的组件名称’, { template: ‘’, data() { return {} } });

局部注册组件

• components(‘创建的组件名称’, { template: ‘’, data() { return {} } });

生命周期

• 一共 5 个单词， 11个生命周期
• 5个 单词 之前 before 之后 ed 10个生命周期
  • create
  • mount -> 可以获取到真实 dom 节点
  • update
  • destroy
  • activated -> 被 keepAllive 内置组件包裹之后才会触发的生命周期
  • errorCaptured(当捕获一个来自子孙组件的错误时被调用。)

keep-alive 缓存组件和缓存组件内部的状态

动态组件( :is )不是固定的，组件 元素上挂在一个 :is 的属性 通过 is 属性来确定展示那个组件

props 校验

• props: [‘arr’, ‘index’]
• props: { arr: { type: Array }, index: { type: Number } };
• 1. 到这里，我们只看到了以字符串数组形式列出的 prop：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

• 1. 但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

props: {
  title: {
    type: String,
    // 必传
    required: true
  },
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

只要不是传递纯字符串，则都需要添加 v-bind 进行动态赋值

路由

• 1. 封装一个路由表

作业