DC's blog
DC
2023-11-25
目录

总结

作为后端人员, 对前端的知识只要有个印象即可, 一边参考笔记一边上网搜索, 将前端凑出来即可!

# es5 & es6

es5和es6指的是js的语法.

es5的语法 es6的语法
var obj2 = {"name":"dc","age":18} var obj3 = {name:"dc",age:18}
or
name = "dc"
age = 18
var obj3 = {name,age}
var obj2 = {"handleClick": function(){}} var obj3 = {handleClick: function(){}}
or
var obj3 = {handleClick(){}}
var a = function (name,age) {} 箭头函数 var a = (name,age) =>{}
var a = function (name) {return "Hello"}
var a = function (name,age) {return name+age}		 箭头函数
var a = name => "Hello"
var a = (name,age) => name+age

注意
1> 若对象的键名中包含 短横杠, 那么需要为其加上引号!! 并且取值时, 应该用中括号来取!
2> 若对象的键名 是fontSize, 那么渲染到 style属性 中时候, 会自动变成 font-size!
3> 匿名函数可以改写成箭头函数 ,箭头函数没有自己的this,会用外部的this!! 若只有一个参数,括号可去掉,若没有或者多个则不能去掉.

理一理, for循环!!
基本的 和 es6的of循环 用的最多. forEach也常用.
注: 至于if、for的子代码块里变量的作用域 详看,js基础语法之函数.md 这篇博文!

let arr = [11, 22, 33, 44, 55]

1. 最基本的.
for (let i = 0; i <= arr.length; i++) {
    console.log(arr[i])
}

2. 数组的foreach循环,js原生的  ”注!!“:若使用foreach,那么js中循环的对象是数组!!不能循环像py字典的那样的对象.
arr.forEach(function (value,index) {
    console.log(value,index)
})

3. in -- es5的语法
for (var i in arr){            // i是下标
    console.log(arr[i])
}

4. of -- es6的语法
for (var item of arr){         // item是arr中的成员
    console.log(item)
}

5. 补充: jquery中的$each   '注': 数组和对象都可以循环 循环对象是key和value,循环数组是index和value. 以数组为例.
$each(arr,function(index,value){
    console.log(value)
})


- 小提一嘴,python中的for循环只能是基于迭代的循环,不能基于索引进行循环.而java、go、js中既可以基于迭代也可以基于索引进行循环.
  伪代码如下:
  - 基于迭代 for xx in 可迭代对象
  - 基于索引 for i=0;i<10;i++
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 基础语法

- es5 es6语法

- m-v-vm   Ajax请求从后端api拿到json格式数据给m,vm双向绑定数据在v页面上展示. 核心奥义如下:
  1> 前端vue分为三层, js掌控Model层, html和css掌控View层, ViewModel将这两层连接起来,做数据的传递页面的监听等.  
  2> 页面变, 数据跟着变; 数据变, 页面跟着变.
  
  ★★★ 一定要理清, 在Django中的dtl模版语法,渲染是在后端完成的!! 而此处vue中{{name}}的渲染是由客户端浏览器来完成的!!
  
- 组件化与单页面 ★整个vue项目就是一个页面! (提一嘴,页面间的跳转会借助vue-router,这个还蛮重要的.）
  vue实例的配置项
     el      被vue实例托管的div标签
     data    变量
     method  方法, '★注意':在方法里取data里的变量要用this;
                         若方法里还有匿名方法,匿名方法里的this不是指vue实例,解决方案用es6的箭头函数即可.
                           
- 浏览器控制台 vm._data  vm.变量名
                           
- 插值语法{{}} 
  - 数组使用中括号取值,其下标从0开始;  
  - 类似于python字典的js对象,中括号和点语法都能取值; (使用中括号时,中括号里面的东西最好加上引号)
  - 简单表达式、三目运算、"{{函数名()}}"等
    若插入的是函数,该函数方法return的返回值会 放到/渲染到 插入的地方!!
                           
- 指令都必须写在标签里 
  通常都以“v-”开头, 有些可以简写,比如 @它是 v-on: 的简写
     文本指令 
         - v-html:"变量名"与v-text:"变量名"; -- 针对的是标签内容的展示   Ps:细品,v-text有点{{}}的意思在里面.        
         - v-show:"变量名"与v-if:"变量名"    -- 针对的是整个标签的显示和隐藏
     事件指令 
         @click="handleClick"等同于v-on:click="handleClick"   
             handleClick函数写在vm的method中,用es6语法写  
             ★ 函数的函数体中的this指的就是当前的vue实例vm, 注:函数中取变量,需要通过this.变量名来取
         @click="handleClick2($event)" $event固定写法,传递过去的是当前点击事件
     属性指令 
         (是针对标签的属性的!!可以动态的绑定一个变量,变量值发生变化,标签该属性的值就发生变化) 注:此处的绑定是 单向绑定的.
         ★ 应用于任意标签的任意属性(哪怕是在标签上自定义的属性)上.
         :标签的属性名="变量名" 等同于 v-bind:标签的属性名="变量名"                   
     - 属性指令应用于 标签里的Style和Class属性! 他们绑定的变量的值都支持 字符串、数组、对象.
       ★但‘class推荐使用数组,style推荐使用对象’!!
       <div :class="class_list">    class_list: ['red', 'font-20', 'be-bold'] 数组里面都是写好的css样式类
       <div :style="style_obj">     style_obj: {color: 'red', fontSize: '20px'}    
                           
- 用于条件渲染的指令 v-if  v-else-if  v-else
   <h2 v-if="score>90">优秀</h2>
   <h2 v-else-if="score>80 && score<=90">良好</h2>
   <h2 v-else-if="score>=60 && score<=80">及格</h2>
   <h2 v-else>不及格</h2>
   Ps: ==比较的是值是否一样, ===比较的是值和类型是否一样!!
                           
- 用于列表渲染的指令 v-for
  - ★ 注意!!若此处urls的长度为3,那么会循环出3个li标签!! 并不是一个li标签里循环出3个img标签. 务必理解到!
    <ul>
       <li v-for="url in urls">    // 此处的urls是包含多个url地址的数组对象
           <img :src='url'>
       </li>
    </ul>
  - <p v-for="i in num">{{i}}</p>  // 若num变量值为4,那么会有4个p标签,i的值从1到4.
  - <li v-for="(value,index) in list_test">
    ★ for循环的对象,可以是数组(列表)、对象(字典)、数字、以及数组(列表)套对象(字典) 
    ★ 数组 的`index`和`value`是 反的; 对象 的`key`和`value`也是 反的!
    ★ 数组更新,页面没有跟着变换,换个写法,用Vue.set()
  
                           
"▼★◆● ψ(｀∇´)ψ" 前面的都是数据变,页面变,是单向绑定! 若想不仅数据变页面变,还得页面变,数据跟着变,需要使用v-model!
- 双向数据绑定 v-model
  ★★ v-model只针对input标签!!!
  input框里输入的内容 input框的type="text" -- 都针对的是输入框的内容!!
    - input框使用 :value="变量名"   只能实现《单向的》数据绑定,页面变化,变量不会跟着变 一般不会用它
    - input框使用 v-modle="变量名" 《双向的》数据绑定, 页面变化、变量变化都会相互影响!!
                           
- input框中的事件
  ★★ 事件@input、@change、@blur只适用于input框!
  change 和 blur 最本质的区别: 若输入框为空/默认值未改变, 失去焦点后, change不会触发, 但是blur会触发!!
  blur应用场景:用户输入手机号后,在进行其它操作之前(比如输入验证码),先校验该手机号是否在数据库里!! 注册时验证用户是否存在同理!
                           
- 事件修饰符
  - 何为冒泡事件? 子标签和父标签都有点击事件,点击子标签时,父标签的点击事件会一同被触发..
    解决冒泡事件, `.stop`写在子控件里,子不冒泡给父; `.self`写在父控件里,子冒泡上来的父不处理!!
    @click.self="handleUl"
    @click.stop="handleLi"
  - 阻止a标签的链接跳转
    @click.prevent="handleA"
  - 多次点击事件只会触发一次 (抽奖系统) Ps:所以在生活中,像秒杀啥的,我们应该刷新一次点一次,才能提高概率中奖.
    @click.once="handleMS"
                           
- 按键修饰符
  事件不仅有 @input、@change、@blur 和 @click, 还有@keyup、@keydown
  - @keyup按下任意键弹起来触发;@keydown按下就触发
  - @keyup.enter @keyup.esc 加了限制,按下enter键和esc键 才会执行绑定的函数
    若是其它键,给@keyup绑定的函数传递$event,通过event.code或者event.key判断下!
                           
- 表单控制
  在上面,我们晓得了双向数据绑定v-model,只针对input标签. 
  input标签的type属性有很多值. 当input框的type="text"时,v-model针对的是输入框的内容!!
  但form表单中的input框可设置type属性的值变成单选框和多选框,它们是如何进行v-model绑定的呢?
  - checkbox的单选 ==> v-model绑定一个布尔值 ==> 只要选中布尔就为true,反之为false
  - radio的单选    ==> v-model绑定一个字符串 ==> 选中后,字符串的值就是当前选择input框value属性对应的值
  - checkbox的多选 ==> v-model会绑定一个数组 ==> 多个选中,数组中就有这些选中的input框的value对应的值
  注:特别提醒,radio的单选、checkbox的多选 这两个都是把value值放到了绑定的变量里!!
  PS:提一嘴,后续可将form表单中的数据,即双向绑定的变量直接通过ajax传递给后端存储数据库!! 还蛮重要的.
                           
- v-model的进阶 不是特别的重要
  v-model.lazy   v-model.number   v-model.trim

                           
                          
1>【实现通过点击控制某个标签的消失与展示!!】  
   一个标签用 v-show + 另一个标签 @click       
   具体实现 -  v-show="sw" sw是bool值,绑定的事件函数里 this.sw = !this.sw
2>【实现通过点击随机的展示一张图片!!】
   img标签用 :src="url" + 另一个标签 @click
   具体实现 - 变量url写一个图片链接,my_array数据变量里放3张图片链接. 
            事件函数里 this.url = this.my_array[Math.random()*3]
3>【购物车内容的显示与不显示】
   v-if + v-for + v-else + @click
   具体实现 - 变量shopping_car一开始为空,触发点击事件,会往shopping_car这个数组中push对象!!
            循环 v-for = "item in shopping_car"  对象取值 {{item.name}}  {{item.price}}
4>【过滤案例的实现】
   v-model + @input + v-for
   具体实现 - 数组对象的filter + 字符串的indexOf + 箭头函数
5>【购物车案例 - 结算】
   关键在于:
      v-for  +  <input type="checkbox" v-model="checkGroup" :value="item"> + 插值函数,函数里用了for循环
      注意,插值里有函数,页面一更新,函数会重新执行.
6>【购物车案例 - 全选与全不选】
   关键在于:
      <input type="checkbox" v-model="checkAll" @change="handleAll">  // checkbox的单选
      <input type="checkbox" v-model="checkGroup" :value="item" @change="checkone">  // checkbox的多选
7>【购物车案例 - 数量加减】
   关键在于:
      <td>
          <button @click="handleJian(item)">-</button>
          {{item.number}}
          <button @click="item.number++">+</button>
      </td>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

另外的一点小知识

1> v-for循环的标签里通常会绑定一个属性 :key 来加快渲染速度.
2> 若数组对象的值改变了,页面没有发生相应的变化,不妨试试用vue.set()来进行数据的检测和更新.
1
2

一些当时第一次看到的写法

:class="isActive?'red box':'purple box'"
<button @click="item.number++">+</button>
<button @click="name='Darker1'">
1
2
3

# vue的生命周期

- 每个组件都有自己的html、css、数据以及方法
- ★ vue的实例 vm (new Vue)、页面里的组件 vc (Vue.component)都是有生命周期的.
生命周期涉及8个函数
  - beforeCreate   创建Vue实例之前调用 
  - created        创建Vue实例成功后调用(可以在此处发送ajax请求后端数据)  '用的比较多'
  - beforeMount    挂载/渲染DOM (即插值、指令等) 之前调用 
  - mounted        挂载/渲染DOM (即插值、指令等) 之后调用
  - == '到这里,初始化完成了' == - 
  - beforeUpdate   重新渲染之前调用 (数据更新等操作时,有变化,会控制DOM重新渲染)
  - updated        重新渲染完成之后调用
  - == '只要不销毁, 那么当页面发生变化,就会重复执行beforeUpdate、updated这两个阶段/一直循环 ' == - 
  - beforeDestroy  销毁之前调用
  - destroyed      销毁之后调用

请记住:
  在created中发送ajax请求向后端请求数据.
  在destroyed中清除定时器.
  子页面发生变化会执行子页面的beforeUpdate和Update;删除子页面会执行vm根页面的beforeUpdate和Update.
  在mounted函数以及往后的阶段才能拿到el;在created函数以及往后的阶段才能拿到data!!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 基础语法补充

- axios前后端交互
  方式一: 使用jq的ajax发送请求,用的很少
  方式二: 使用js官方提供的fetch发送请求,现在很少用,它不支持ie. (扩展,使用了es6 promise)
  方式三: 使用axios发送请求,一般都使用这种方式!!
         注意,真正的数据在 res.data中.
  PS: 注意,跨域问题的解决!
  请复习下,前后端交互的三种编码格式.
 【显示电影的小案例】  


- 计算属性 computed:{}
  1> 模板中的表达式虽然方便,但也只能用来做简单的操作.如果在模板中写太多逻辑,会让模板变得臃肿,难以维护.So,需要计算属性!
  2> 使用函数的形式,只要页面更新/页面中有地方发送了改变,该函数就会重新执行,比较耗费资源,别问为啥!So,需要计算属性!
     <虽然说耗费的是客户端浏览器的资源,哈哈哈!>
  计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生变化时才会重新求值.
  三大特点: 当属性用 + 有缓存,关联数据不变,页面再怎么更新,它也不会变化 + 关联数据发生变化,才会重新计算.
  注意: 一定要return!!!
 【首字母大写】
 【通过计算属性,重写过滤案例】

  
- 监听属性/侦听属性 watch:{}  
  应用场景:分组筛选中使用!!
  监听属性, 即vue对象中data中的变量发生了变化就会执行对应函数, 函数名要用变量名.
  
  
- 请务必再次阅读这篇博文,加深对 methods computed watch的理解!!
  https://www.cnblogs.com/liuqingzheng/articles/9717447.html
- 更深层次的应用 不必刻意深究,遇到了再仔细推敲,以需求推进学习.
  https://juejin.cn/post/6995583554029617165
  
  
- 组件化开发
  - 作用: 扩展HTML元素,封装可重用的代码,目的是复用!!
  - Single-Page application,简称SPA: 以后vue项目只有一个页面,看的的页面变化都是组件间的切换!
  - 全局组件
    全局组件即整个页面中都可以使用的组件. 注意,多次复用的话,它们是相互隔离,互不影响的!
  - 局部组件
    局部组件只能在某个组件中使用,即定义它的vue对象绑定的标签中使用
  - 组件与组件之间的通信
    ★ 首先要明白,各个组件之间的数据、方法等各种东西都是隔离的!!
    - 父子通信之父传子(通过自定义属性实现)
      分三步走!
    - 父子通信之子传父(通过自定义事件实现) 
      关键在于 this.$emit('自定义事件名', 自定义事件绑定方法所需参数1/子传父的变量, 参数2)
    - ref属性实现组件间通信 很常用,也很好用!!
      vue提供了一个标签属性ref,它可以放在任意标签上面.
      - 若放到普通标签上
        通过 this.$refs.ref属性的属性值 就能拿到原生的dom对象,可使用原生操作该dom
      - 若放到自定义的子组件标签上
        通过 this.$refs.ref属性的属性值 就能拿到子组件对象 可调用该子组件对象的一切(变量、函数等)
        也就是说,在父组件中拿到了子组件对象,子组件对象中属性和方法可以直接用、直接改
      - 思考下,使用ref属性,子传父、父传子如何体现的呢?
        - 通过ref,子传父
          因为在父中,可以拿到子组件对象, So, 子组件中的所有变量和方法都可以直接使用
        - 通过ref,父传子
          因为在父中,可以拿到子组件对象, So, 子组件对象.变量 = 父组件.变量
    Ps: vuex插件可以实现跨组件通信.
  - 动态组件
    动态切换组件主要通过component配合is属性,决定哪一个组件显示.
    <component :is='组件名'></component>
  - keep-alive属性 
    使得组件切换后再切换回去,页面内容得以保留!! 即保留状态,避免重新渲染!
  - 插槽
    在组件中留空白,在父组件中使用时,插入html片段!
    - 不具名插槽
    - 具名插槽
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

# vue-cli

之前我们全是在单个页面中写vue语法. 现在,我们需要将其做成一个vue项目!!
- 就需要用到vue-cli脚手架,它基于webpack技术进行打包,帮我们创建一个vue项目.(webpack具体是啥,暂且不用深究)
  - 搭建nodejs的环境 类比于搭建python环境,它两都是解释型后端语言
    node命令 -- 对应python命令
    npm命令  -- 对于pip命令
  - npm install -g @vue/cli    -- 类比于 pip install Django
  - 安装完后释放出命令vue         -- 类比于 Django安装完成后释放出命令django-admin
  - 使用该命令创建vue项目         -- 类比于 使用django-admin命令创建Django项目
  - vue create 项目名           -- 类比于 django-admin startproject 项目名
  - npm run serve 启动项目
  - npm install 根据package.json重新下载里面的依赖到node_modules文件夹中

- vue项目目录的详细介绍

- vue项目是怎么运作的?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# html中使用elementPlus

不使用脚手架, 在html总使用 vue3和elementPlus

参考文档: https://zhuanlan.zhihu.com/p/648954421
注: 在谷歌、safari上能成功, 火狐浏览器上不行..

image-20240105183830711

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue3 -->
    <script src="//unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- element-plus 全局样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- element-plus UI -->
    <script src="//unpkg.com/element-plus"></script>
    <!-- element-plus 图标 -->
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
</head>

<body>
<div id="app">
    <el-input v-model="value" placeholder="Please input" style="width: 200px"></el-input>
    <el-divider></el-divider>
    <el-button icon="edit" type="primary" @click="handle">提示</el-button>
</div>
<!--
setup语法糖, 无法在html里面使用,请使用setup() 函数去处理!
即<script setup></script> 不支持!!
-->
<script>
    const {createApp, ref} = Vue
    const APP = createApp({
        setup() {
            const value = ref("")
            const handle = () => {
                const {ElMessage} = ElementPlus
                ElMessage({
                    message: '点击！',
                    type: 'success',
                })
                // ElementPlus.ElMessage({message: '点击！',type: 'success',})
            }
            return {
                value,
                handle
            }
        }
    })
    APP.component('edit', ElementPlusIconsVue.Edit)
    APP.use(ElementPlus).mount('#app')
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
插件的使用(2)
vue语法基础

← vue语法基础→

最近更新
01
卷积神经网络
01-17
02
过拟合与欠拟合的处理
01-16
03
Mnist分类任务
01-16
更多文章>
Theme by Vdoing | Copyright © 2023-2025 DC | One Piece