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

最新推荐文章于 2023-09-26 20:43:34 发布

歪大梨

最新推荐文章于 2023-09-26 20:43:34 发布

阅读量733

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_64037609/article/details/127544822

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

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文件并引入使用
  - ```
  <script src="vue的本地文件路径"></script>
```
- 线上引入：即通过线上地址引入vue 并使用
  - ```
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
```
- 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设计模式