昨日回顾

# 1 前端发展历史
    -vue  react
    -谷歌flutter，Dart语言
    -uni-app：小公司
    -vue： 3.x   2.x
        -3.x :ts
        -2.x :js

# 2 vue:
    -渐进式
    -MVVM: 
        M层：model，数据层，js
        V层：view，视图层，html，css
        VM层：viewModel层，负责M和V的交互

    -组件化开发，单页面应用
        -组件有自己的html，css，js
        -在index.html 中做组件的替换，实现单页面应用spa

    -js框架，源码下载引入，cdn引入   
    -new Vue({el:,data：})

# 3 插值语法：  {{变量，表达式，函数}}
    -字符串，数字，布尔，数组，对象，标签
    -三目运算符  条件?符合条件:不符合条件

# 4 指令系统（任何标签）
    -文本指令：v-text，v-html，v-show，v-if
    -事件指令：v-on:事件名='函数'
        -简写：@click='函数'
        -函数传参

    -属性指令： v-bind:属性名='变量'
        -简写：:属性名='变量'

style和class

# 本身他俩都是属性指令，但是他们比较特殊，应用更广泛，单独再讲

# class：推荐用数组  
    :class='变量'   
    变量可以是字符串，数组，对象

# style：推荐用对象
    :style='变量'   
    变量可以是字符串，数组，对象

# 数组的方法：很多，自己学

class和style都是标签的属性，但是其比较特殊。
特殊在class属性可能有多个类，style属性可能有多个属性。

正常情况下，给div绑定一个类，给这个类写一些样式：

class属性的三种设置方法

class的字符串写法：

给class属性绑定变量：

这样写，效果跟上面相同。

可以通过修改变量的值，给class属性设置多个类：

class的数组写法（推荐）：

示例：

给数组追加值，来给class属性添加size类：

class的对象写法:

示例：

通过修改对象的ture或false来设置该class属性是否有相应的类。

style属性的三种设置方法

style属性是给标签添加内联的样式：

如何使用变量和style属性进行双向绑定？

字符串的写法：

数组的写法：

可见使用数组写法，会将两个属性拆分成两个对象，存放在数组中。如果要去掉一个属性，需要删除数组的元素。

如果不想用引号引起来：单个单词的属性不会报错，而两个单词的会报错。

如果是多个单词用-连接的形式，可以写成驼峰：

对象的写法（推荐）：

查看前端：

会将style属性按照对象中的键值对进行渲染。

    
    
    
    



    
class的使用
    

        我是class，的div
    

    
style的使用

    

        我是style，的div
    

条件渲染

# 写在标签上，控制标签的显示与不显示
    v-if='布尔值/运算完是布尔值(表达式)'
    v-else-if='布尔值/运算完是布尔值'
    v-else

通过v-if后面的布尔值来决定，是否显示该标签。
这个布尔值可以是一个变量携带的数据，也可以是一个表达式运行的结果。

代码：

    
    
    


    
条件渲染
    
优秀
    
良好
    
及格
    
不及格

列表渲染

# v-for：放在标签上，可以循环显示多个此标签

使用bootstrap搭建表格:

data配置项：

使用v-for，从goodList中获取数据：

修改goodList变量，添加一个商品对象，页面立马会发生变化：

需求：一开始goodList为空，点击按钮之后goodList开始加载数据。

方法一：给按钮绑定一个点击事件，如下是事件所触发的函数。

需求：当goodList没有数据时，显示购物车空空如也。加载购物车之后，前端将数据显示在表格。

需要配合v-if，判断数组的长度：

如果goodList.length>0的运算结果为True，则显示这个div标签。否则不显示。

代码：

    
    
    
    
    


    

        

            

                

                    加载购物车
                

                

                    

                        

                        

                            
商品id号
                            
商品名
                            
商品价格
                            
商品数量
                        
                        
                        

                        

                            
{{good.id}}
                            
{{good.name}}
                            
{{good.price}}
                            
{{good.count}}
                        
                        
                    
                
                

                    购物车空空如何
                

            
        
    

使用v-for进行循环

之前我们使用v-for将数组进行了循环。
那么v-for是否可以对字符串、数字、对象，这些类型进行循环呢？

# v-for 可以循环数组，数字，字符串，对象
    v-for="key in obj"
        -如果是数组：key就是数组的一个个元素
        -如果是数字：key就是从1开始的一个个数字
        -如果是字符串：key就是一个个字符
        -如果是对象：key就是一个个value的值
    v-for="(key,value) in obj" 
        -如果是数组：key就是数组的一个个元素,value就是索引
        -如果是数字：key就是从1开始的一个个数字,value就是索引
        -如果是字符串：key就是一个个字符,value就是索引
        -如果是对象：key就是一个个value的值，value就是一个个key（谜语人）
        '''(key, value) in obj 括号必须加，否则会报错！'''

 # 每次循环的标签上，一般都会带一个属性 --->   :key='值必须唯一'
    -key值的解释：是为了加速虚拟dom的替换

# 什么叫加速虚拟dom的替换？

循环数字

v-for可以对数字进行循环：

查看结果：

需要注意的是对数字进行循环，是从1开始而不是从0开始的。并且使用循环获得的数字，需要在标签内部使用插值语法{{ i }}。

扩展：这里循环的是一个具体的数字，也可以放一个变量，变量里存的是数字。

对数字也可以同时获取其索引值，请注意索引是从0开始的：

查看前端：

循环字符串

查看示例：

查看结果：

可以发现和python一样，会将每一个字符都通过for循环获取出来，渲染到页面上。（可以正常识别中文字符，将中文算作一个字符）

还可以同时获取字符串和索引：

查看前端：

循环对象

可能会有这样的疑问：
循环对象会得到对象的key还是value?
或者说，想同时获取对象的key和value应该如何写？

示例：

查看上述示例的结果：

可见循环了3次，将对象的value拿了出来。

如果想同时获取key和value：

查看效果：

循环数组

示例：

注意：第二个参数是索引，第一个参数是值。

标签key值加速虚拟dom的替换

当变量中的数据发生变化时，vm层会检测到这个变化。此时vm层会干什么事情？

首先，vm层维护了一个虚拟dom，当数据变化之后，vm层首先会对虚拟dom进行修改。修改完成之后，vm层会拿着虚拟dom和真实dom进行比较。如果有二者之间有变化，会将真实dom进行一个替换，如果没有变化，就不进行操作。虚拟dom实际就是一个字符串。

如果是一个对于一个数组进行v-for循环产生表格场景：

如果是在数组的中间插入一条数据，那么对于页面显示来说，上面部分的数据是不需要动的，而下面部分的数据需要下移一行。这会涉及到效率的问题，为了插入这一条数据，我是将整个表格都替换，还是只替换其中某一部分？

如果使用了虚拟dom，我们想在中间插入数据，此时虚拟dom会和真实dom进行比较，只对不同的部分进行替换。如果我们不写key值，也就是不使用虚拟dom，此时插入一条数据，会将整个表格一行一行的进行重新渲染。（效率低）

注意：key值必须唯一。

如下会导致key属性不唯一：

应该这样写：

element走马灯组件：

代码：

    
    
    
    
    


    

        

            

                

                    加载购物车
                

                

                    

                        

                        

                            
商品id号
                            
商品名
                            
商品价格
                            
商品数量
                        
                        
                        

                        

                            
{{good.id}}
                            
{{good.name}}
                            
{{good.price}}
                            
{{good.count}}
                        
                        
                    
                
                

                    购物车空空如何
                

            
        
    

Vue.set解决监控失效

数组的检测与更新

js数组有很多的内置方法：

Vue可以监控数组的变化。数组的变化可能会导致页面的变化。但Vue是如何监控的呢？会不会出现一种情况，既数组出现了变化，但是Vue没有监控到该变化，导致页面没有发生变化呢？

准备数组girls：

写一个按钮，给数组添加数据：

再写一个按钮，使用concat()方法对数组追加一个数组：

可以发现，数据添加进数组了，但是页面却没有发生变化。

不只是使用concat方法，对数组的值的修改，有时候也会监控不到，页面不会发生变化:

使用Vue.set():

• Vue.set(要修改的数组, 索引, value)

对象的检查与更新

示例：

此时我们点击按钮之后，会给对象添加进一个属性'height':'180'。

神奇的事情发生了，虽然点击了按钮，数据添加进去了，但是页面没有变化：

这也是因为，vm层没有监控到数据的变化。

使用Vue.set()解决这个问题：

• Vue.set(需要修改的对象, key, value)

通过Vue.set()会通知一下vm层，告诉vm层，这个对象的数据变化了，印次页面会重新渲染。

    
    
    



    
数组的检测与更新
    点我追加女生
    |
    点我追加一批女生|
    点我修改数组页面变化|
    
{{girl}}

    
对象的检测与更新
    点我追加身高
    |
    点我追加身高--解决
    |
    
{{key}}---{{value}}

双向数据绑定 v-model

# input标签，v-model：数据双向绑定
    -使用 属性指令绑定 :value='变量'  是数据的单向绑定
    - v-model="name" ：数据双向绑定

示例：

我们通过控制台修改value属性的值时，页面会随之变化：(彭于晏 --变成--> lqz)

但此时有个问题，我们修改页面上的输入框的内容时，vm.name变量不会随之改变：

这称之为单向绑定。

如果我们使用Vue提供的V-model，则可以实现页面和数据的双向绑定：

数据双向绑定示例：

    
    
    


    
数据双向绑定
    用户名: 
    密码: 
    提交{{err}}

input输入框相关事件

# 事件绑定 
v-on:事件名='函数' ---> @事件名='函数'

# input输入框相关事件
    -blur：失去焦点触发  也就是光标移走之后就触发
    -change：发生变化触发  光标移走之后，还需要检查输入框的内容是否发生变化，发生变化则触发
    -input：输入触发  只要输入就会触发事件。

代码：

    
    
    


    
input的事件处理
    
blur
  

     ---->{{name1}}
    
change
     ---->{{name2}}
    
input
     ---->{{name3}}

过滤案例

实现浏览器搜索框，随着你输入的文字越具体，下拉框显示的信息越少的效果。

准备数据列表：

通过v-for显示数据：

输入框绑定事件：

我们希望输入之后，dataList中的数据会有变化：

filter方法

这需要使用一个数组过滤内置方法filter，filter会循环的从数组中取出值，然后传入函数中执行。如果返回true，该值保留，如果返回false，该值丢弃：

indexOf方法

还需要判断子字符串是否在字符串中：

indexOf可以判断'a'在'atom'的索引位置，如上图输出结果是0.

所以可以使用indefOf(a)>=0，来进行判断：

箭头函数

示例：将普通函数改成箭头函数

不带参数的箭头函数：

带一个参数，没有返回值的箭头函数：

多个参数，没有返回值的箭头函数：

一个参数，有返回值，函数体只有一行:

为什么要使用箭头函数？

• 简洁
• 箭头函数没有自己的this

js的this指向问题：谁调用this就指向谁

箭头函数没有自己的this，示例：

查看区别：

可见箭头函数没有自己的this，他会用上一层的this，所以这个this是window对象。

    
    
    


    
过滤案例
    
    

        
{{item}}
    

事件修饰符

.stop    只处理自己的事件，不向父控件冒泡
.self   只处理自己的事件，子控件冒泡的事件不处理
.prevent    阻止a链接的跳转
.once   事件只会触发一次（适用于抽奖页面）

事件修饰符用于对事件进行控制。

设置三个事件：

事件冒泡：子标签被点击，父标签的点击事件也会同时被触发。

.stop

示例：

被stop修饰的事件，只处理自己的事件，不会向父控件冒泡。（阻止子控件冒泡）

.self

父控件只处理自己的事件，阻止子控件冒泡。

.prevent

正常点击a标签会跳转，给其添加@click.prevent事件，会导致a标签不跳转。

.once

被.once修饰的事件只能触发一次，除非再次刷新页面。（试用于秒杀系统）（接口幂等性问题）

代码：

    
    
    


    
事件修饰符
    
事件冒泡--通过 事件修饰符 stop ，加在子控件上，阻止事件冒泡
    

        
美女
        
帅哥
    

    
事件冒泡--通过 事件修饰符 self加在父控件上，只处理自己的事件
    

        
美女
        
帅哥
    

    
阻止a标签跳转
    点我看美女

    
once只执行一次
    点我秒杀

按键修饰符

比如一个搜索框：

只有键盘输入enter(回车)时，才会进行搜索。我们也希望能监控用户按键，然后进行相应处理。

补充两个事件：

• @keydown:按键一按下去，该事件就触发
• @keyup:按键按下去，然后抬起来时，事件触发

注意这里的按键时，按任何按键都会触发。

示例;

查看事件对象：

重要属性：

• code : "KeyL"
• key : "l"
• KeyCode : 76

是一个键盘按键事件。键盘事件有一个属性keycode

每个keycode都对应键盘上的一个按键。

于是我们可以通过按键事件对象的属性，对用户输入的按键进行区分：

也可以使用按键修饰符.enter，这样就无需做判断了:

也就是只有enter按键才会触发这个handleUp事件。

Vue3是Vue2的超集 Typescript是Javascript的超集 也就是说Ts可以写Js的代码
而Ts的语法Js不支持。