vue介绍，引入及使用，优缺点，基本指令，双向绑定数据，类名灵活操作，设计模式（MVVM和MVC）

目录

为什么要使用vue

vue的优缺点

优点

缺点

SPA

vue的引入和使用

引入

使用

1.实例化vue对象

2.data属性

3.methods属性

vue的指令

vue操作DOM的指令

v-text

v-html

v-on

v-once

v-if

else-if 和 else

v-show

v-if 和 v-show的区别

vue的双向数据绑定指令

v-model

vue给元素添加属性的指令

v-bind

类名的灵活操作

vue操作样式的指令

v-bind:style

vue循环渲染指令

v-for

设计模式

MVC模式

MVVM设计模式

---

• vue2 主要是针对中小型项目开发的框架 如果开发大型项目 不如vue3性能好（vue2的源码是使用js开发的）
• vue3 主要是针对大型项目开发的框架 如果开发中小型项目 会造成性能的浪费（vue3的源码是使用ts开发的）

• 一般目前市面上公司进行项目重构的时候 使用的都是vue2框架 但如果是新开发的后台管理系统（企业OA管理系统）一般多使用vue3框架

• vue2官网地址：Vue.js

• vue是一个渐进性框架 可以和其他框架配合工作

• vue的核心库 只关注视图层，可以很方便的开发前后端分离项目

  为什么要使用vue

  • 一个完整的项目:HTML(基本视图)+CSS(样式)+js(交互).通常情况下对于HTML我们又称之为视图结构

  • 视图结构组成: 内容(标签)和数据(文本内容和属性值)

  • 而刚好vue只关注视图层.将数据和内容进行拆分 内容交给HTML进行处理,数据交给后端进行处理.

  • 优势:

    • 1.适用于前后端分离

    • 2.用户户体验更优 因为html页面中 要处理的代码逻辑更简洁 从而就会节省我们的浏览器性能，这样页面加载就会加快，也就可以进一步提升用户体验

  vue的优缺点

  优点

  • 轻量级

    • vue框架的数据量是非常小的，可以在满足开发需求的情况下 做到极致的轻量级

    • 压缩过的生产版本 37.36KB min+gzip

  • 双向数据绑定

    • 模型层数据的改变会更新到视图层,视图层数据的更新会同步到模型层

  • 提供了基本的指令

    • 使用指令可以解决有些特殊的复杂的逻辑

    • 在vue中 实现任何的js操作 本质上都是通过指令 来完成的

    • vue不会再通过DOM和BOM来操作页面和浏览器 而是通过数据和指令 来操作页面和浏览器

  • 客户端路由

    • 可以做到页面和路由地址实现一一对应的关系

    • 实现局部刷新的spa（单页面应用）效果 从而节省cpu资源 进一步提高用户体验

  • 数据驱动

    • 在vue中 前端页面 实现任何效果 都是通过数据的变更来实现的

    • 数据驱动一般需要结合服务端来实现

  • vue的两个核心:组件化应用和数据驱动

  缺点

  • 不支持ie8及以下浏览器

    • 原因是 vue的底层逻辑中 实现双向数据绑定的方法 是es5中提供的 而ie8及以下浏览器 不支持es5

  • 首屏加载速度慢

    • 在首次加载项目时,会将所有的静态资源全部加载过来,（CSS js img font）

  • 不利于SEO优化

    • 因为在搜索引擎中 爬虫去爬代码的时候会发现 vue的代码结构和js代码逻辑没有分离

  SPA

  • SPA（single page application）单页面应用

  • MPA（multiple page application）多页面应用

  • 二者区别

  • 

     

  vue的引入和使用

  引入

  • 本地引入：下载vue文件 并引入使用

  • 线上引入：即通过线上地址 引入vue 并使用

  • npm下载vue并配合脚手架vue-cli来协同开发

  • 当我们引入了vue之后 就会自动得到一个变量——Vue 这个变量的值是一个构造函数 我们开发vue代码 全依仗这个构造函数

  使用

  1.实例化vue对象

  • 我们如果想开发vue代码 需要先使用Vue构造函数 实例化vue对象

  • 写法：

    • let vm = new Vue({
          el:"#元素id",//el属性是用来指定当前vue对象 控制哪一个元素的
          data:{
              属性名：数据，
              属性名：数据，
              ...
          }//data属性 是用来存放当前vue实例中所有数据的  这些数据 可以再vue实例对象控制的元素中 使用
      })
      <div>{{data中的属性名}}div>
      

    • 注意：el属性控制的元素 不可以是html 或 body

    • 注意：el的值可以设置为任何css3选择器 但是一般简易使用id选择器（保证控制元素的唯一性）

    • 注意：建议 一个页面中 只创建一个vue实例 不要同时存在多个实例

      • 因此 vue页面 一般都会设置一个根元素 作为最外层的容器元素 vue实例只控制根元素即可。

  2.data属性

  • data属性是vue实例中 用来存放数据的属性 其值是一个对象 对象中通过属性的方式存放实例中要使用的数据。

  • 注意：在data属性中写入的数据属性 会直接添加给当前的vue实例对象

  • 这些数据 在插入到html结构中的时候 不仅仅可以单独插入 还可以进行运算

    • let vm = new Vue({
          el:"#元素id",//el属性是用来指定当前vue对象 控制哪一个元素的
          data:{
              title：数据，
              content：数据，
              ...
          }//data属性 是用来存放当前vue实例中所有数据的  这些数据 可以再vue实例对象控制的元素中 使用
      })
      

    • <div>{{title}}div>
      <div>{{title+1}}div>
      <div>{{title>10}}div>
      <div>{{price||price1}}div>
      <div>{{price>10 ? "贵":"低"}}div>
      

  3.methods属性

  • Vue构造函数的实参对象中 存在一个methods属性

  • 这个属性是一个对象 对象中用来存放vue实例中 要用到的所有方法函数

  • 写法

    • //js中的内容
      let vm = new Vue({
          el:"#元素id",//el属性是用来指定当前vue对象 控制哪一个元素的
          data:{
              title：数据，
              content：数据，
              ...
          },//data属性 是用来存放当前vue实例中所有数据的  这些数据 可以再vue实例对象控制的元素中 使用
          methods:{
              方法名：()=>{},
              方法名(){},
              ....
          }
      })
      

    • <div>{{methods对象中的方法名()}}div>
      插入html结构的 是 函数的返回值 
      注意：如果没有返回值 就不插入任何值  而 不会插入undefined
      

  vue的指令

  • vue本质上是一个融合怪，它吸收了angular的指令系统 和 react的操作系统

  • vue通过指令 来完成相关的 DOM操作和一些相应的功能

  vue操作DOM的指令

  • v-text

    • 作用：设置元素的文本内容

    • 用法：

      • <div v-text="data对象中的属性名">div>
        

      • 作用：将div的文本内容 设置为 data对象中指定属性的属性值

  • v-html

    • 作用：设置元素的html内容

    • 用法：

      • <div v-html="data对象中的属性名">div>
        

      • 作用：将div的html内容 设置为 data对象中指定属性的属性值

  • 总结：所有的指令 写法 都和 标签属性类似

     

  • v-on

    • 作用：给元素绑定事件

    • 用法：

      • <div v-on:事件名="methods中的属性名">div>
        

      • 作用：给元素添加指定事件名的事件 并使用methods中指定的函数来作为事件处理函数

    • 简写形式

      • <div @事件名="methods中的属性名">div>
        

    • 另：我们在编写事件处理函数的时候 可以只写methods中的属性名 也可以写 methods中的属性名()

    • 事件对象

      • 在vue的事件中 我们通过事件处理函数的第一个形参 来接收 事件对象

    • 在vue的事件处理函数中 this指向 当前的vue实例对象

  • v-once

    • 作用：设置了v-once指令的标签 其自身和其内容都只会加载一次

    • 用法：

      • <div v-once>
            xxxx
        div>
        

      • 作用：添加了v-once指令的div 这个div和他的内容 都只会加载一次

  • v-if

    • 作用：条件渲染 如果满足条件 就渲染 如果不满足就移除

    • 用法：

      • <div v-if="data属性中的数据">
            xxxx
        div>
        

      • 作用：如果data属性中的数据值为true 则加载这个元素及其内容 如果值为false，则会将元素不加载或移除

    • else-if 和 else

      • <div v-if="data属性中的数据">
            xxxx
        div>
        <div v-else-if="data属性中的数据">
            xxxx
        div>
        <div v-else>
            xxxx
        div>
        

  • v-show

    • 作用：条件渲染 如果满足条件 就显示 如果不满足条件 就隐藏

    • 用法：

      • <div v-show="data属性中的数据">
            xxxx
        div>
        

      • 作用：如果data属性中的数据值为true 就显示这个元素及其内容 否则 就隐藏

  • v-if 和 v-show的区别

    • 二者效果大致差不多 但是 区别在于

      • v-if在判断条件为假时 会将元素彻底移除出DOM树 相对比较耗费cpu资源

      • v-show在判断条件为假时 会将元素display：none 相对较节省cpu资源

    • 应用场景：

      • 如果是频繁切换的效果 就应该使用v-show

      • 如果是只渲染一次 就应该使用v-if

• vue的双向数据绑定指令

  • v-model

    • 作用：添加了这个指令的标签（表单标签（input）） 就可以和vue实例提供的数据 实现双向绑定，即二者互相影响 你变我也变，我变你也变

    • 用法：

      • <input type="text" v-model="data中指定的数据">
        

      • 作用：input的value 就会是data中指定的数据 如果data中的数据发生变化 input的value 也会相应变化，如果input中输入了新的值 data中的数据 也会相应变化

    • 注意：双向数据绑定 是基于 es5特性实现的 也正因如此 vue不支持ie8及以下浏览器

  vue给元素添加属性的指令

  • v-bind

    • v-bind绑定的属性 其属性值 可以使用 vue实例对象中提供的数据

    • 用法：

      • <div v-bind:属性名 = "data中指定的数据">
            xxxx
        div>
        

      • 作用：使用data中指定的数据 作为当前属性的属性值

    • 简写形式

      • <div :属性名 = "data中指定的数据">
            xxxx
        div>
        

    • 类名的灵活操作

      • 在v-bind绑定的类名中 我们还可以使用 三元运算符

        • <div :class = "data中指定的数据是否满足指定条件 ? 类名1 ：类名2">
              xxxx
          div>
          

        • 作用：如果data中的数据 满足条件 就使用类名1 否则就是用 类名2

      • 在v-bind绑定的类名中 我们还可以通过对象的方式 来添加多个类名 并控制每个类名的使用情况

        • <div :class = "{类名1:布尔值，类名2:布尔值，...}">
          	xxxx
          div>
          

        • 作用：同时给div 添加多个类名 如果其后的布尔值为true 表示添加这个类名 为false 表示不添加这个类名

        • 注意：布尔值 可以使用data中的数据来进行动态设置

  vue操作样式的指令

  • v-bind:style

  • 作用：操作元素的样式

    • 用法：

    • <div v-bind:style="{样式名：样式值,....}/data中的数据">
          xxxx
      div>
      <div :style="{样式名：样式值,....}/data中的数据">
          xxxx
      div>
      

  vue循环渲染指令

  • v-for

    • 作用：可以循环指定数据（数组、对象、字符串） 并将其内容 渲染到页面中

    • 用法：

      • <div v-for="(item,idx) in data中指定的数据">
            item表示 数组中的数组项/字符串中的字符/对象中的属性值
            idx表示 数组中的索引/字符串中的索引/对象中的属性名
        div>
        

  • 使用v-for指令的 标签 一般都建议 设置一个属性——key（键）为了提升代码性能

    • key属性的作用如果只渲染一次 则体现不出来

    • 但是 如果循环渲染的数据可能发生变化 就一定要设置这个属性

    • 另外 如果我们对某一数据进行修改

      • 如果设置了key属性 则会单独重新渲染 修改数据对应的元素内容

      • 如果没有设置key属性 则会将所有v-for渲染出来的元素都重新渲染

• 设计模式

  • 设计模式的概念 是从服务端开发引荐过来的 最原初的设计模式是 MVC模式

    • MVC模式

      • 全拼为 Model View Controller

      • MVC模式共分为三个应用层

        • View：视图层 就是html+css 用来控制前端页面（搭建货架）

        • Controller：控制层 就是js 用来实现前后端的交互（请求服务器数据并填入视图层 进货+上货）

        • Model：数据层 就是服务器 用来存储数据 并提供接口 （仓库）

           

      • MVC模式不够优化 因为视图层和数据层只能单向数据交互

    • MVVM设计模式

      • MVVM设计模式 也分为三个应用层

        • View层：视图层 还是html页面 用来搭建页面结构，渲染数据 并 和 用户交互

        • ViewModel：视图数据层 就是js 用来实现ajax数据交互，获取到服务器提供的数据供给view层使用 并执行一些处理逻辑（例如：methods中的函数）

        • Model：数据层 就是服务器 用来提供数据接

           

      • MVVM和MVC最大的区别在于

        • 前者view层 和 VM层 实现了双向数据绑定

        • 后者view层 和 controller层 没有实现双向数据绑定

    • 了解 MVP设计模式