VUE基础知识总结,坚持每天一遍,一篇就够用了

Vue是目前 `前端三大框架` 之一: Angular React Vue

- 理念: `自动化+数据驱动`

  - 自动完成DOM的相关操作, 数据变更时 自动更新相关DOM元素

  - 作者希望用户: 只要关心数据的变化即可, DOM的操作全自动

Vue分三个版本:

- vue1: 已淘汰

- `vue2`: 目前占有率较高

- vue3: 以后的主流

Vue开发方式:

- 脚本: 同 jQuery 引入脚本即可, 适合入门阶段

- 脚手架: 适合实际开发 !

Vue语法:

new Vue({配置项}): 创建一个Vue对象, 根据配置项进行 个性化处理

         el: 设置vue管理的元素, 值是 `id选择器`

          data: 数据. 存储元素中使用的相关数据

          methods: 方法们. 存储元素中使用的方法

HTML中新增语法

         { {}}: 使用范围 -- `双标签的内容`, 其中书写JS代码

          v-bind 或 : 使用范围 -- 属性

           v-bind:属性名=""

            :属性名=""

         v-on 或 @ : 使用范围 -- 事件

           v-on:事件名=""

            @事件名=""

         动态class  :class="{样式类: true/false}"

         根据值是 true还是false 决定是否添加样式

指令: vue提供的一套DOM属性, 可以快速操作DOM

v-html : 本质 innerHTML, 内容作为html解析后显示- v-text : 本质 innerText, 内容作为文本展示

v-show : 利用 css 的 style 的 display:none 实现元素的隐藏

v-once : 一次性渲染. 元素初始化渲染后, 后续数据变化不会更新

v-for : 遍历数组 生成元素

          v-for="值 of/in 数组"

          v-for="(值, 序号) of/in 数组"

         key属性: 为遍历出来的DOM元素添加`唯一`标识, 当数组内容发生变更时, 相同唯一标识的元素直接复用. 提高使用效率

选项:  可选的配置项 -- 通过官方API文档查看

el : 指定vue对象管理的元