1.Vue核心

1.Vue核心

1.1.介绍

1.1.1.官网

Vue中文官网：https://cn.vuejs.org

1.1.2.简介

Vue是一套用于构建用户界面的渐进式JavaScript框架。

  • 构建用户界面：将一堆杂乱的数据转为简单易懂可视化的界面
  • 渐进式：vue可以自底向上逐层的应用（从一个轻量小巧的核心库逐渐递进到各式各样的vue插件）
    • 简单应用：只需一个轻量小巧的核心库
    • 复杂应用：可以引入各式各样的vue插件

1.1.3.特点

1.Vue采用了组件化模式，提高代码复用率、且让代码更好维护。

  • 组件化：将某一个特定的功能里面的HTML、CSS、JS的代码封装到一个vue文件里面。

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

  • 命令式编码：需要一步一步的制定计算机执行的顺序或者步骤。
  • 声明式编码：不需要一步一步的指定的计算机执行的顺序或者步骤，只需描述问题的解决方案。

3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

  • 虚拟DOM：将真实的DOM抽象为虚拟的节点，使页面的渲染、更新等操作都在虚拟DOM上进行，可以提高页面性能和响应速度。
  • Diff算法：通过比较两个虚拟DOM树的节点和属性来确定页面上的哪些节点需要更新、添加、删除，确定需要操作的节点后，就可以用来替换真实的DOM，可以提高更新的效率。

1.1.4.引入Vue

v2下载网址：https://v2.cn.vuejs.org/v2/guide/installation.html

1.选择script标签的方式

  • CND：与src类似，这个可以加速访问

2.选择开发版本即可

image-20230415002233347

1.1.5.安装扩展

直接在火狐浏览器的扩展中心搜索Vue下载即可

image-20230415003248937

1.2.初识

效果图

image-20230416091028994

代码示例

image-20230415112628751

总结

  1. 想让vue工作，先得引入vue文件
  2. 创建vue实例对象，并且传入对应的配置对象
  3. div中的语法依然为HTML中的语法，只不过是在原有的基础上混入了vue语法
  4. div中的代码被称为vue模板
  5. Vue实例和容器是一一对应的
  6. 真实的开发中只有一个vue实例，且会配合组件进行使用
  7. 一旦data中的数据发生变化，则页面中用到data中的数据也会发生变化

1.3.模板

效果图

image-20230416091141773

模板语法分为两种

  1. 插值语法：双大括号表达式
    • 功能:用于解析标签体内容
    • 语法:{{js表达式}}
  2. 指令语法:以v-开头
    • 功能:用于解析标签体内容、解析标签属性、绑定事件等
    • 语法:v-xxx:???
      • xxx为vue的指令语法，有很多，例如bind、if等
      • ???会作为js表达式处理，与上面的插值语法类似

image-20230415133343225

1.4.数据绑定

数据绑定分为两种

  1. 单向数据绑定:数据只能从data流向页面
    • 语法:v-bind:标签属性或者简写为:标签属性
  2. 双向数据绑定:数据不仅可以从data流向页面，还可以从页面流向data
    • 语法:v-model:value或者简写为v-model
    • 注意
      • 一般默认收集value的值
      • 只能用于输入（表单）类的元素上

效果图

image-20230416091237369

代码示例

image-20230415135251017

1.5.el与data的写法

el第一种写法

new Vue({
    el:'#code',
})

el第二种写法

const v = new Vue({
    data:{
        name:'张三'
    }
})

v.$mount("#root")

data第一种写法

new Vue({
    //对象式写法
    data:{
        name:'张三'
    }
})

data第二种写法

  • vue3中不能使用对象式写法
  • 不能使用箭头函数，并且全部由vue管理的都不能使用箭头函数!!!!!!!!!!!!!!!!!!!!!重要的事情说三遍
new Vue({
    //函数式写法
    data:function(){
        return{
            name:'张三'
        }
    }
})

1.6.MVVM模型

M:模型（model）：对应data中的数据

V:视图（view）：模板

VM:视图模型（viewMdoel）：Vue实例对象

image-20230415172353209

MVVM模型图

image-20230415172140135

1.7.事件处理

1.7.1.事件绑定

效果图

image-20230416092234267

代码示例

image-20230416092622052

总结

  1. 使用v-on:xxx或者@xxx可以绑定事件，xxx为事件名，例如click，dblclick等
  2. 默认的事件形参为event，如果有传参数，则需要使用$event占位
  3. 事件的回调函数需要配置到methods对象中，最终也会和data一样出现在vm上
  4. methods中配置的函数，和data中一样，不要使用箭头函数！！！
  5. methods中配置的函数，都是被vue所管理的函数
    1. this(前提不使用箭头函数,箭头函数的指向是window)的指向是vm或组件实例对象
    2. 全部由vue管理的都不能使用箭头函数!!!!!!!!!!!!!!!!!!!!!重要的事情说三遍

1.7.2.事件修饰符

使用方法：@click.xxx，xxx为修饰符

image-20230416101442932

1.7.3.键盘事件

当按下键盘上特定的键时才会触发事件

效果图

image-20230416103949060

使用方法：@keyup(keydown).xxx，xxx为修饰符（特定的键）

image-20230416103940810

总结

  1. vue中常用的按键别名（特定的键）
    1. 回车=>enter
    2. 删除(退格)=>delete（back）
    3. 退出=>esc
    4. 空格=>space
    5. 换行=>tab(特殊键，只能使用在keydown事件)
    6. 上=>up
    7. 下=>down
    8. 左=>left
    9. 右=>right
  2. vue未提供别名的按键，可以使用按键的原始名称进行绑定
    1. 使用key方法进行调用查看名字
    2. 当按键名字为两个单词组成时需要改成全部小写，并且单词之间使用-键进行分格
      • 例如：CapLock（转换字母大小写键）=>cap-lock
  3. 系统修饰键：ctrl、alt、shift、meta（win键）
    1. 配合keyup事件：按下修饰键的同时需要再按下其他键，然后松开其他键，这样事件才会被触发
    2. 配合keydown事件：正常触发事件
  4. 除了使用特定的键名来使用修饰符，也可以使用特定键的编码来指定，但是这种方式逐渐淘汰
    • 使用keyCode方法查看编码
    • 例如：@keyup.13 === @keyup.enter
  5. 修改指定键的名字
    • Vue.config.keyCodes.要修改的名字 = 要修改键的编码

1.7.4.事件总结

  1. 修饰符的使用可以连续写
    • 例如：@click.prevent.stop
    • 先阻止默认行为，后阻止冒泡
  2. 系统修饰键中指定某一个组合才触发事件
    • 例如：@keyup.ctrl.y
    • 指定ctrl+y键才触发

1.8.计算属性与监视属性

1.8.1.计算属性

  1. 定义：计算属性是通过已有的属性计算得来的
    • 属性：data中的属性
  2. 原理：使用object.defineproperty方法中的getter和setter方法
  3. get方法执行的时机
    1. 初次读取时会执行一次
    2. 当依赖的数据发生改变时会再次被调用
      • 依赖的数据：计算属性所需要的属性
  4. 优点：与methods实现相比，内部有缓存机制（可以复用），效率更高，调试也更方便
  5. 备注
    1. 计算属性最终会出现在vm上，直接读取使用即可
    2. 如果计算属性要被修改，则必须要提高set方法进行修改，且set中要引起计算时依赖的数据发生改变
    3. get和set方法不能使用箭头函数的方式定义，否则this就会变成window，并且全部由vue管理的都不能使用箭头函数!!!!!!!!!!!!!!!!!!!!!重要的事情说三遍

效果图

image-20230416130030887

代码示例

image-20230416153943024

1.8.2.监视属性

效果图

image-20230416164030423

代码示例

image-20230416164656562

总结

  1. 当被监视的属性变化时，回调函数会自动调用，进行相关的操作

  2. 监视的属性必须存在才能进行监视！

  3. 两种书写格式

    1. new Vue({
    //监视属性
    watch:{
        //监视的对象
        flag:{
            //handler：当监视的对象发生改变时会调用
            handler(newValue,oldValue){
                console.log("新值：" + newValue + "   旧值： " + oldValue);
            }
        }
    }  
})

//当监视对象中只有handler这一个方法时，还可以进行简写
new Vue({
    //监视属性
    watch:{
        //监视的对象
        flag(newValue,oldValue){
                console.log("新值：" + newValue + "   旧值： " + oldValue);
        }
    }  
})

    2. const vm = new Vue({
})
//此处的监视对象必须用`单引号`引起来,因为不能使用简写方式，以前用的都是简写的方式，所以不用单引号也可以
vm.$watch('flag',{
    handler(newValue,oldValue){
        console.log("新值：" + newValue + "   旧值： " + oldValue);
    }
})

//当监视对象中只有handler这一个方法时，还可以进行简写
const vm = new Vue({
})
//此处的监视对象必须用`单引号`引起来,因为不能使用简写方式，以前用的都是简写的方式，所以不用单引号也可以
vm.$watch('flag',function(newValue,oldValue){
        console.log("新值：" + newValue + "   旧值： " + oldValue);
    }
})

1.8.3.深度监视

效果图

未开启深度监视 开启深度监视
image-20230416170942650 image-20230416170930864

代码示例

image-20230416171008621

总结

  1. vue的watch默认不监视对象内部值的改变（只监视一层，例如：例子中的nums）
  2. 配置deep=true：可以监视对象内部值的改变（可以监视多层，例如：例子中的a,b）
  3. 备注
    1. vue自身可以监视对象内部值的改变，但是vue提供的watch默认不支持！
    2. 使用watch时根据数据的具体结构，决定是否使用深度监视。

1.8.4.两个属性的区别

computed和watch的区别

  1. computed能干的事情，watch也能干
  2. 反之，watch能干的事情，computed不一定能干，例如：异步操作

两个原则

  1. 所有被vue所管理的函数，最好都全部写成普通的函数
  2. 所有不被vue所管理的函数（定时器，Ajax，promise等的回调函数），最好都写成箭头函数

这样两个原则中的this才能都指向vm或者组件实例对象。

1.9.绑定样式

在应用界面中, 某个(些)元素的样式是变化的

class/style 绑定就是专门用来实现动态样式效果的技术

1.9.1.绑定class样式

效果图

image-20230416193043551

代码示例

image-20230416193110798

1.9.2.绑定style样式

效果图

image-20230416195106798

代码示例

image-20230416195136305

绑定样式总结

  1. class样式写法：:class="xxx"，xxx可以为数组，对象，字符串

    1. 字符串写法---适用于样式名字不确定，需要动态切换
    2. 数组写法---适用于样式名字不确定，样式个数不确定
    3. 对象写法---适用于样式名字确定，样式个数确定，但要动态决定要不要使用

  2. style样式

    1. :style="{fontSize:xxx}"，其中xxx为动态值

    2. :style=[a,b,c]，其中a、b、c为样式对象

      • 样式对象：已经定义好的样式对象

      • //例如
styleObj:{
    fontSize: '20px',
    color: 'red'
},
styleArr:[
    {
        borderRadius: '50%',
    },
    {
        border: '10px solid yellow'
    }
]

1.10.渲染

1.10.1.条件渲染

效果图

image-20230416225421075

代码示例

image-20230416225452216

总结

  1. v-if
    1. 写法
      1. v-if="表达式"
      2. v-else-if="表达式"
      3. v-else
    2. 场景：切换频率较低的场景
    3. 特点：不展示的DOM元素会直接被移除
    4. 注意：v-if可以和v-else-if、v-else一起使用，但是结构不能被打断
  2. v-show
    1. 写法：v-show="表达式"
    2. 场景：切换频率较高的场景
    3. 特点：不展示的DOM元素不会被移除，仅仅只是被隐藏
  3. 备注：使用v-if时,元素可能无法被获取到，而v-show一定可以获取到

1.10.2.列表渲染

效果图

image-20230416232220828

代码示例

image-20230416232617895

总结

  1. 作用：用于展示列表数据
  2. 写法：v-for="(value,index) in object" :key="xxx"，:key为唯一标识
  3. 可遍历：数组、对象、字符串、指定次数等

1.10.3.列表中的key

react和vue中的key有什么作用

  1. key是虚拟DOM对象的标识，当数据发生变化时，vue会根据新数据生成新的虚拟DOM，随后vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下：
    1. 旧虚拟DOM中找到了与新虚拟DOM相同的key
      1. 若虚拟DOM中内容没有改变，会直接使用之前的真实DOM。
      2. 若虚拟DOM中内容有改变，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
    2. 旧虚拟DOM中未找到与新虚拟DOM相同的key
      • 创建新的真实DOM，随后渲染到页面
  2. 用索引作为key引发的问题
    • 若对数据进行逆序添加、逆序删除等破坏顺序的操作，会产生没有必要的真实DOM更新，虽然不影响页面渲染，但是效率会降低。
    • 如果结构中还包括输入类的DOM，会产生错误DOM更新，并且会影响页面渲染。
  3. 如何选择key值
    1. 使用每条数据的唯一标识作为key，例如学号、电话号码、邮箱、身份证号等唯一值。
    2. 如果不存对数据进行逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表展示，则使用索引作为key是没有问题的。

1.10.4.列表过滤

效果图

image-20230417103514213

代码示例

image-20230417103708557

1.10.5.列表排序

效果图

image-20230417143747078

代码示例

image-20230417143659656

1.11.指令

1.11.1.内置指令

已学指令

  1. v-bind：单向绑定解析表达式，简写：:xxx
  2. v-model：双向绑定解析表达式，绑定value时简写：v-model
  3. v-for：遍历数组、对象、字符串
  4. v-on：绑定事件监听，简写：@
  5. v-if：条件渲染（动态控制节点是否存在）
  6. v-else-：条件渲染（动态控制节点是否存在）
  7. v-show：条件渲染（动态控制节点是否展示）

①v-text

作用：向其所在的节点中渲染文本内容，会把整个内容模块都当成文本

与插值语法的区别：v-text会替换掉整个节点的内容，插值语法不会

效果图

image-20230417223145768

代码示例

image-20230417223137969

②v-html

作用：向其所在的节点中渲染包含html内容，不会把内容模块当成文本，会进行解析html，js等代码

与插值语法的区别

  • v-html会替换掉整个节点的内容，插值语法不会
  • v-html可以识别html结构

注意：安全性问题

  • 在网站上动态渲染任意html是非常危险的，容易导致XSS攻击。
  • 一定要在可信的内容上使用v-html，不能使用在用户提交的内容上！

效果图

image-20230417225346615

代码示例

image-20230417225406862

③v-cloak

作用：是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性

使用css配合v-cloak可以解决网速慢时页面会加载出{{xxx}}的问题

代码示例

image-20230417231707703

开始访问前五秒时，页面不会显示效果，会将原本的{{name}}给隐藏掉，

当五秒过后，会立即执行vue，并且将v-cloak删除，随后显示Vue

④v-once

作用:v-once所在节点在初次动态渲染后，就视为静态内容了。

以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

效果图

image-20230417232604811

代码示例

image-20230417232624238

⑤v-pre

作用：让Vue跳过其所在节点的编译。

可利用它跳过没有使用指令语法、插值语法的节点，可以加快编译速度。

效果图

image-20230417233202158

代码示例

image-20230417233214261

1.11.2.自定义指令

①函数式自定义指令

效果图

image-20230418095156774

代码示例

image-20230418095213131

执行时机

  1. 指令与元素成功绑定时（刚开始）
  2. 指令所在的模板被重新解析时

②对象式自定义指令

效果图

image-20230418211045314

代码示例

image-20230418211059837

1.11.3.总结

定义语法：

  1. 局部指令

    new Vue({
    directives:{指令名：配置对象}
})
或
new Vue({
    directives{指令名：回调函数}
})

  2. 全局指令

    Vue.directives{指令名：配置对象}
或
Vue.directives{指令名：回调函数}

配置对象中常用的三个回调：

  1. bind：指令与元素成功绑定时调用。
  2. inserted：指令所在元素被插入页面时调用。
  3. update：指令所在的模板被重新解析时调用。

备注：

  1. 指令定义时不用加v-，但使用时需要加v-。
  2. 指令名如果是多个单词，每个单词间用-分格，不要使用驼峰命名法。

1.12.生命周期

基本概念：

  1. 别名：生命周期回调函数、生命周期函数、生命周期钩子。
  2. 作用：Vue关键时刻可以帮我们调用的一些特殊名称的函数。
  3. 备注：
    1. 生命周期函数的名称不可修改，但函数的具体内容是程序员根据需求编写的。
    2. 生命周期函数中的this指向的是vm或者组件实例对象。

流程图

生命周期

总结

常用的生命周期钩子：

  1. mounted：发送Ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作。
  2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾操作。

关于销毁Vue实例：

  1. 销毁后借助Vue开发者工具看不到任何信息。
  2. 销毁后自定义事件会失效，但原生DOM事件依然有效。
  3. 一般不会在beforeDestroy中操作数据，因为即使操作了数据，也不会再触发更新流程了。
posted @ 2023-04-18 23:29  22-10-21  阅读(45)  评论(0)  编辑  收藏  举报