Vue - 回顾与总结

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 的架构模式。它将应用程序分为三个主要部分

Model：代表应用程序中的数据和业务逻辑。
View：代表用户界面，也就是用户看到和交互的部分。
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')
 }

②标签控制：`<router-link :to="/xx"></router-link>`

通过 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 阅读(34) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

duoduosg

Vue - 回顾与总结

Vue 回顾

1 前端发展史

2 Vue介绍

（1）读音 同 View

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

（3）MVVM 架构

3 Vue使用

（1）Vue引入

（2）在编辑器上使用

4.插值语法

5 指令系统-文本指令

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

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

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

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

6 属性指令 v-bind

7 事件指令 v-on

（1）语法：

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

（3）事件修饰符

8 class和style

绑定的js变量类型

9 条件渲染 v-if

10 列表循环 v-for

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

① 普通循环

② 带索引的循环

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

11 v-for的key值的解释

12 数组的检测与更新

（1）数组

更新

新增一个元素

（2）对象

新增

修改

13 input事件

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

（1）修饰符

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

（1）radio单选

（2）checkbox：单选与多选

16 按键修饰符

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

（2）按键修饰符

17 数组的 filter方法

18 字符串的 indexOf方法

19 箭头函数

（1）普通匿名函数 function

20 购物车

（1）基本购物车案例

（2）加入全选全不选

（3）增加减少数量

21 跟后端交互发送ajax

（1）XMLHttpRequest: 原生js提供的

（2）JQuery中的ajax

（3）fetch

（4）axios

① 简介

② axios两种写法

③ axios.create 提取相同配置

22 生命周期钩子

24 组件

（1）全局组件

（2）局部组件

25 父子组件间通信

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

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

26 ref属性

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

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

27 动态组件

28 插槽

（1）匿名插槽

（2）具名插槽

29 计算属性

30 监听属性

31 es6的导入导出语法

（1）读音同 View

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

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

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

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

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

11 `v-for`的`key`值的解释

①js控制:`$router.push`方法

②标签控制：`<router-link :to="/xx"></router-link>`

39 前端补充`prototype` 和 `Proxy`