Vue - 回顾与总结

目录

Vue 回顾

1 前端发展史

	 -react，vue--》前端工程化---》前后端分离
   -大前端：flutter，uni-app

2 Vue介绍

	- 
	
	- 单页面应用(spa),组件化开发，
	
	- mvvm 架构MVVM 架构是指 Model-View-ViewModel 的架构模式。它将应用程序分为三个主要部分

（1）读音 同 View

（2） 单页面应用(spa),组件化开发

（3）MVVM 架构

MVVM 架构是指 Model-View-ViewModel 的架构模式。它将应用程序分为三个主要部分

  1. Model：代表应用程序中的数据和业务逻辑。
  2. View：代表用户界面，也就是用户看到和交互的部分。
  3. ViewModel：连接 Model 和 View，负责将 Model 中的数据转换为 View 中的呈现，并负责处理用户输入和对 Model 的更新。

3 Vue使用

（1）Vue引入

① js文件中：cdn引入

② 编辑器中：需要配置使用js的环境：node js编辑器

（2）在编辑器上使用

可以使用 webstorm

  • 在html页面中通过script标签产生vue实例并托管

4.插值语法

插值语法{{}}中可以使用的

① 变量

② 简单js代码

③ 三目运算符 ：符合条件输出条件1，不符合输出条件2

{{条件?'符合的条件1':'不符合的条件2'}}

5 指令系统-文本指令

Vue 中的指令是一种特殊的语法，用于在模板的标签中声明性地将某些行为绑定到元素上。指令通常以 v- 开头，后跟指令名，如 v-if、v-for、v-bind 和 v-on 等。每个指令都会对绑定的元素进行特定的操作。

① v-text=‘变量’ 把变量内容渲染到标签内部

把变量内容渲染到标签内部，如果是放的是函数加()，那么渲染的是函数的返回值

② v-html 把变量内容当标签渲染到标签内部

= xss攻击：跨站脚本攻击
= 解决xss攻击的原理 html特殊字符替换< >，将标签的尖括号替换成大于号小于号

③ v-show 控制标签的隐藏与显示

v-show=“布尔值/条件运算完是true false/变量”

控制标签的隐藏与显示

④ v-if 控制标签的插入和删除

v-if=“布尔值/条件运算完是true false/变量”控制标签的插入和删除

6 属性指令 v-bind

v-bind：用于绑定一个或多个元素属性或组件的 props。

放在标签上的属性【如：name、is、class】，用变量来替换

v-bind:属性名=‘变量’ --- 简写 :属性名=‘变量’

7 事件指令 v-on

给标签绑定事件： click、change等

（1）语法：

v-on:click='函数' --- 简写成 @click='函数'

（2）在 js 中写在配置项methods中

① 在函数中想用data中定义的变量： this.变量名

② 在函数中想用methods中定义的函数： this.函数名

（3）事件修饰符

Vue 支持多种事件修饰符，例如 .stop、.prevent、.capture、.self、.once 等

@click.self='函数'  放在父标签上，防止子标签点击事件冒泡
@click.stop='函数'  放在子标签上，防止子标签点击事件
@click.once='函数'  只能点击一次
@click.prevent='函数'  阻止a标签跳转，可以手动条状location.href='xxx'

8 class和style

绑定的js变量类型

  • class可以绑定的类型：字符串、数组、对象
  • style可以绑定的类型：字符串、数组、对象

9 条件渲染 v-if

- v-if
- v-else-if
- v-else

10 列表循环 v-for

（1）v-for用于循环渲染一个数组或对象的内容

① 普通循环

v-for='item in 数字/字符串/数组/对象'

② 带索引的循环

v-for='(value, index) in 数字/字符串/数组/对象'

（2）在使用 v-for 时，需要注意以下几点：

  • 必须为每个元素指定一个唯一的 key 属性，以便 Vue 可以在重新渲染时更高效地比较和更新元素。
  • 可以使用 v-for 渲染对象的属性，类似于数组。在这种情况下，迭代变量 item 会依次绑定到对象的每一个属性上，而索引变量 index 则依次绑定到属性名上。
  • 用 v-for="(item, index) in items" 的语法来获取索引。
  • 用对象的 Object.keys() 或 Object.entries() 方法来获取键值数组。

js中循环的方式

  -基于索引的循环 for (i=0;i<10;i++)
  - in
  - of 循环：基于迭代的循环

11 v-for的key值的解释

必须为每个元素指定一个唯一的 key 属性，以便 Vue 可以在重新渲染时更高效地比较和更新元素。

  <div>
    <div v-for="(item, index) in items" :key="index">{{ item }}</div>
  </div>

在上面的例子中，我们使用了 :key="index" 来指定【索引】作为元素的 key 值

12 数组的检测与更新

Vue中，更新数组，或对象新增属性时，Vue无法自动检测到数据的变化。

可以使用一些方法，在调用时触发页面更新

（1）数组

更新

// 通过 $set 方法修改数组中的某个元素
this.$set(this.items, index, newValue);

新增一个元素

// 通过 $set 方法向数组中添加一个新的元素
this.$set(this.items, this.items.length, newValue);

（2）对象

新增

给对象新增一个属性

Vue.set(对象, key, value)

// 通过 $set 方法新增一个属性
this.$set(this.obj, 'newProp', 123);

修改

// 直接修改对象中某个属性的值
this.obj.prop = 'new value';

13 input事件

放在input标签上的事件

@change=‘函数’  ==文本域变化
@blur           ==失焦
@input          ==输入
@focus          ==获得焦点

14 v-model：input标签与变量双向绑定

通过v-model双向绑定的input框，可以实现响应式页面更新，input框内的内容变化，页面会更新

（1）修饰符

	-v-model.trim='变量'  移除input输入的左右空格
  -v-model.lazy='变量'  延迟input输入的显示时间
  -v-model.number='变量'  以数字开头仅能显示输入的数字，以字母开头可以显示输入的所有内容

15 表单控制中的v-model绑定

（1）radio单选

多个radio绑定同一个变量时，v-model绑定的变量需要是一个空字符串，这样选中才可以将radio绑定的值传给对应的变量

（2）checkbox：单选与多选

①checkbox单选时，单个复选框，v-model绑定给布尔值

②checkbox多选时，多个复选框，v-model绑定到同一个数组

16 按键修饰符

（1）按键事件：keyup、keydown、keypress

按下按键后会触发绑定的函数

keydown：按下键盘上的任何键时触发。
keyup：释放键盘上的任何键时触发。
keypress：按下字符键时触发（即非功能键

（2）按键修饰符

指定按下某个按键

// 按下回车
@keyup.enter='函数'

17 数组的 filter方法

数组的过滤方法filter()，返回一个包含了满足条件的新数组【只有数组有过滤方法】

return true表示这个值保留，false表示这个值不要

数组.filter(item)=>{
    return true/false
}

18 字符串的 indexOf方法

判断子字符串是否在字符串中，i 为索引位置

字符串.indexOf(子字符串)

19 箭头函数

用于解决js中this指向的问题，在箭头函数中没有自己的this，所以它的this会指向上一层

（1）普通匿名函数 function

let f=function(){}

（2） 箭头函数

① 没有参数

let f=()=>{}

② 只有一个参数，没有返回值

let f=()=>{}

③ 只有一个参数，一个返回值

let f=()=>{}

20 购物车

（1）基本购物车案例

-v-for循环展示所有购物车商品，checkbox多选：多个都绑定一个数组值checkGroup，value值不一样
-写个函数getprice，函数返回计算checkGroup中数量*价格的综合
-用插值放在页面上，只要页面刷新，函数会重新计算

（2）加入全选全不选

-加入全选全部选的checkbox，自己单独的，绑定checkAll ，true或false
-给这个checkbox绑定change事件，只要变化就执行函数
	如果是true，   checkGroup=所有购物车商品
    如果是false   checkGroup=[]
-给每个checkbox绑定一个change事件
	判断checkGroup长度是否等于总长度，如果等于，就让checkAll为true
    否则都是false

（3）增加减少数量

-左侧右侧加入两个按钮，点击按钮，触发事件
	-增加：直接数字++
    -减少：函数判断，不能少于1
    	-必须传入对象，item，不能传入数字
-js中的值（字符串，数字）和引用（对象，数组）
-python中：可变和不可变

21 跟后端交互发送ajax

（1）XMLHttpRequest: 原生js提供的

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数    --  get参数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=红楼梦');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
    console.log(xhr.response);
});

（2）JQuery中的ajax

$.ajax(
	{
		url: "...",
		type: "get",
		data: {"name": "李四", "age": 20},
        dataType: json,
        success: function(resp) {
            //code: 更新dom对象
        },
        error: function() { alert("请求错误") };
	}
)

（3）fetch

fetch(url) .then(...) .catch(...)

fetch 简介

① fetch()使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。

② fetch()采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。

③ fetch()通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。

fetch('get获取地址', {
    method: 'GET',
    headers: {
        //设置请求头
        'content-type': 'x-www-form-urlencoded'
    },
    //不管同源还是跨域请求都带着COOKIE信息
    credentials: 'include'
}).then(result => {
    console.log(result);
})

（4）axios

  • 更多学习axios的内容：

https://www.runoob.com/vue2/vuejs-ajax-axios.html

axios与后端交换，axios封装了原装的XMLHttpRequest

1 第三方html引入 
cdn

2 node中需要npm下载后导入
npm install axios

① 简介

Axios 是一个基于 Promise 的 HTTP 请求客户端，可以用于浏览器和 Node.js 环境中发送 HTTP 请求。它可以拦截请求和响应、转换请求和响应数据、自动转换 JSON 数据、取消请求等。

npm install axios

② axios两种写法

第一种：

axios.post('/post',senddata).then((res)=>{
  console.log(res)
})

第二种

axios({
  method:'post',
  url:'/post',
  data:data,
  timeout: 50000
}).then(()=>{
  console.log(res)
})

③ axios.create 提取相同配置

可以把一些反复出现的配置写在这里面


const instance = axios.create({
   baseURL:"http://localhost:3000"
})

// 使用instance发请求
instance({
    url:"/posts"
}).then(()=>{
  console.log(res)
})

22 生命周期钩子

钩子函数 描述
beforeCreate 创建Vue实例之前调用
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用

  • 循环定时器：

    setInterval(匿名函数,3000) - 每隔3s执行

    取消定时 clearInterval()

  • 执行一次的定时器：

    setTimemout(匿名函数，3000)

24 组件

（1）全局组件

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello Vue!'
    }
  },
  template: '<div>{{ message }}</div>'
})

（2）局部组件

 // 在全局中设计局部组件
        template: `
          <div>
          <button @click="handleShow">展示名字</button>
               <sections></sections>
          <div v-if="show">名字{{ name }}</div>
          </div>`,
        methods: {
            handleShow() {
                this.show = !this.show
            }
        },

（3）项目中的组件

项目阶段：都是写组件-氛围组件页面和小组件
导入注册即可

25 父子组件间通信

（1）父传子：自定义属性

    	<Child :myname='变量'></Child
        子组件中
        	props接收   []  {}  {}
            以后直接this.myname直接用就行了

（2）子传父：自定义事件

		<Child @myevnet='父组件的函数' @xx='yy'></Child>
     	子组件中:通过某种情况传，咱们写的是按钮点击
            this.$emit('xx',参数)

26 ref属性

（1）ref属性放在普通标签上，拿到标签的dom对象

（2）ref属性放在组件上，拿到组件对象

在父组件中可以通过this.$refs.组件名拿到子组件对象中的数据和

27 动态组件

通过组件标签component 中的:is="组件名"，来动态显示组件

<component :is="order"></component>
  • <keep-alive>标签保持组件不销毁

28 插槽

（1）匿名插槽

<slot> </slot>

（2）具名插槽

过在<slot name='xxx'></slot>标签中的name属性给插槽起名字，并在想要添加在插槽内的标签添加 slot="xxx"，指定插入的标签，当存在多个插入的标签时，可以通过名字来管理

29 计算属性

计算属性是一种特殊的属性，计算属性的值是基于现有的状态计算得出的，并且只有在其依赖的状态发生变化时才会重新计算

computed: {
  // 计算属性的名称
  propertyName () {
    // 计算属性的计算逻辑
    // 可以使用 this 来访问组件的状态
    return computedValue;
  }
}

30 监听属性

watch配置项中,只要监听属性发生变化，就会会执行


watch:{
    name(){
        // 监听的数据变化后，编写逻辑
    }
}

31 es6的导入导出语法

（1）默认导出和导入

① 导出:只能导出一个对象

export default {}

② 导入

import 命名 from '路径'

（2）命名导入导出

① 导出：可以导出多个

export const A='a'
export const B='b'
...

② 导入

import {A, B} from '路径'

32 props三种使用方式

①数组

props:[name]

②对象：单个校验-限定类型

  props: {
    name:Number
  }

③对象：多个校验-默认值和必填

有默认值后没有传值的情况下使用默认值

props: {
    film: {
      type: String,
      required: false,
      default: '流浪地球' // 
    }

33 混入mixin

使用方式

① 定义混入对象

  • 新建mixin包，在index.js中新建混入对象

② 在局部组件中导入混入对象【局部使用】

通过配置项mixins使用

 mixins: [mixComponent]

③ 在main.js中导入混入对象【全局使用】

// 导入混入类
import {mixComponent} from "@/mixin";
// 全局配置混入对象
Vue.mixin(mixComponent)

34 插件

（1）插件的作用：

① 自定义全局变量

② 自定义指令

③ 自定义全局组件

④ 自定义mixin

（2）语法

① 定义插件

export default {
    install(app){
					
    }
}

② 使用插件，main.js

导入
Vue.use(插件)---》就会执行install

35 vuex 状态管理器

（1）作用：

① 跨组件间通信

② 在vuex做前后端交互，以及一些逻辑判断

（2）语法

export default new Vuex.Store({
       state: {
           # 放数据
       },
 
       mutations: {
           # 放方法，正常是让actions中来调用
           # 组件也可以直接调用
 
       },
       actions: {
           # 放方法，正常组件调用
           # ①逻辑判断
           # ②与后端交互
           # ③调用mutations中方法
       }
   })

36 浏览器中的存储 Local Storage、session Storage、cookie

①Local Storage【计算机的本地存储器/局部存储器】

特点：过期时间-永久存储，除非清空缓存，手动删除，代码删除

作用：使浏览者可以在明确脱机、低带宽或连接时断时续的情况下高效地工作,同时可提高系统的响应速度,减少用户的等待时间。

②session Storage【对话期存储】

特点：过期时间-当前会话有效，关闭浏览器，自动清理

③cookie【信息记录程序】

特点：过期时间-有过期时间，可以设置

作用：Cookie通常是由浏览器存储的文本文件，当用户重新访问同一网站时，浏览器将发送该cookie以帮助网站"记住"用户的过去行为。

都是浏览器存储数据的，存储数据的用处，比如迪卡侬官网不登录加购物车的功能，

37 vue Router

（1）路由跳转

①js控制:$router.push方法

runHome(){
   this.$router.push('/home')
 }

通过 to属性来控制跳转的地址

<router-link :to="/home">
		<button>点我跳转到home页面</button>
</router-link>

（2）路由跳转携带数据

① 方式1：带在路径中使用?携带

/course/?pk=1

获取数据：

this.$route.query.pk

② 方式2：路径中分割的

携带参数在路径中分割的时候，需要在router文件夹下的index.js中注册路由的时候，通过:来绑定属性，这样在this.$route.params才能点出来

/course/1
// router/index.js中注册的时候需要通过:绑定属性
  {
     path: '/login/:id',
     name: 'login',
     component: Login
 },

获取数据：

this.$route.params.id

38 Vue 3

看博客

https://www.cnblogs.com/DuoDuosg/p/17145527.html

39 前端补充prototype 和 Proxy

prototype 和 Proxy 是 JavaScript 中两种不同的技术，用于实现对象和数组的特殊操作。

prototype 是 JavaScript 中的一个原型对象，用于实现继承和原型链。每个 JavaScript 对象都有一个 prototype 属性，它指向该对象的原型对象。原型对象可以包含一些共享的属性和方法，从而实现对象的共享和继承。在 JavaScript 中，使用 prototype 可以实现面向对象编程的许多特性，例如继承、多态等。

Proxy 是 ES6 中新增的一个特性，用于创建一个代理对象，可以用来拦截对目标对象的操作。代理对象的行为类似于目标对象，但是可以对目标对象的访问进行控制。使用 Proxy 可以实现一些高级的特性，例如数据绑定、观察者模式等。使用 Proxy 时，我们可以在代理对象上定义一些特殊的方法（例如 get、set 等），在访问代理对象时会自动调用这些方法。通过这些方法，我们可以实现对目标对象的访问控制、修改操作等。

虽然 prototype 和 Proxy 都是用于实现对象和数组的特殊操作，但是它们的使用场景和功能是不同的。prototype 主要用于实现继承和原型链，而 Proxy 主要用于实现数据绑定和观察者模式。在实际开发中，我们可以根据需要选择不同的技术来实现我们的需求。

posted @ 2023-02-23 20:33  Duosg  阅读(39)  评论(0)  编辑  收藏  举报