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对象管理的元素

data : 存放元素上使用的数据

        在.vue文件里, data必须是函数, 和复用有关

methods: 存放元素上使用的方法/函数

         通常和事件存在绑定关系

          @click=”方法名”`: 触发方法时,默认把 事件参数作为实参传递给方法

          @click=”方法名()” : 自定义传参模式.  如果需要事件参数, 则显式传递 `$event`

         computed: 计算属性(`get`), 自动触发,不需要()

        方法存储在 computed 中, 自动转为计算属性

脚手架:

        一类软件的统称: 用于生成项目包;   就像建楼房时的脚手架, 创建楼房

        vue的脚手架安装: npm i -g @vue/cli

        使用脚手架生成包

         vue create 包名     包名不允许大写字母

         v-pre: 原样输出  {{}}  代码

        v-model: 双向数据绑定. 适用于 `表单元素` — 输入框,单选,下拉,多选,多行文本框

                表单元素的特点: 用户可以操作并修改其值

                利用v-model 把变量绑定在 表单元素上

                方向1: 变量的值会显示在元素上

                 方向2: 元素的值发生变化时. 同步更新给变量

自定义指令:

 选项: directives

 格式: v-指令名

 语法1:

  directives:{

      指令(元素, 绑定的值){

          操作元素…

      }

  }

语法2: 面试考点 – 生命周期

  dicrectives:{

      指令: {

          bind(){

              DOM元素在内存中创建完毕, 还未展示到页面上 的时间点

          },

          inserted(){

              DOM元素被显示到页面上时

          },

          updated(){},

          unbind(){}

      }

  }

网络请求

使用第三方模块 axios:  利用Promise封装而来, 没有回调地狱风险

注意: 必须先安装再使用  npm i axios vue-axios

使用: axios.get(url).then(res=>{…})

生命周期

组件从创建 到 最终销毁, 会触发一系列的`钩子函数`

钩子函数: 在固定的事件发生时, 自动触发的函数

创建周期: 负责选项中的 `数据` 部分的加载

         beforeCreate

         created

挂载周期: 负责DOM元素的显示

          beforeMount

          mounted:  此处发网络请求

更新周期: DOM元素变化时

          beforeUpdate: 数据有变化, 马上要更新到页面

         updated: 数据更新到页面

销毁周期: .vue文件要销毁

        beforeDestroy: 马上要销毁

        destroyed: 数据之类的销毁, 不再可用

重点:vue文件 在加载到页面上的一瞬间, 就会触发 mounted 配置项函数

 通常在这里 自动触发网络请求

指令:vue为元素提供了一套新的属性

v-text: innerText 原样显示文本- v-html: innerHTML 作为html解析后显示

v-show: 利用 display:none 实现隐藏, 适合频繁切换

v-if: 利用 移除/添加DOM实现隐藏.  适合网络请求的数据.  请求前先不加载, 请求完再加载

         v-else

         v-else-if

v-for: 遍历数据并展示

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

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

        v-for=”值 in/of 数字”

         搭配 :key使用

        给遍历出来的元素添加`唯一标识`, 一旦数组有变化 可以更好的复用相同唯一标识的元素

v-on: 事件绑定 — `@`

@事件名=”方法名”  — 默认参数1 是 事件参数

@事件名=”方法名(…, $event)”– 自定义传参, 用 $event关键词代表事件参数

v-bind: 属性绑定 —  :

:属性名=”值”

v-model: 双向数据绑定  — 适用于用户可操作性的 表单元素 — 单选 多选 输入..

        方向1: 把数据显示到DOM元素

        方向2: DOM元素的值发生变化, 更新给变量

v-pre: 原样显示 标签内容, 不解析`{{}}`

v-once: 一次性渲染,  后续不随数据变化

过滤器: filters  

        语法{{ 值 | 过滤器 }}

组件: components

        把大型网页中的 某一部分 拆分到外部书写, vue文件

data为什么是函数:  复用

vue文件作为组件可以重复使用. 为了确保每次使用时 都是独立的数据项, 会调用data函数, 来获取新的数据对象

slot: 插槽

         一个占位符, 组件可以用于制作布局, 在使用时临时替换成具体内容

        默认插槽: `<slot />`    命名插槽: `<slot name=”名字” />`

        组件的双标签语法: `<组件></组件>`  其中的内容会替换掉默认插槽

        命名插槽语法分3种

        vue2.6前:

来源：床前明月慌