Vue学习笔记

VIP文章 Chen__sir__

已于 2022-11-02 09:49:25 修改

阅读量480

点赞数 1

分类专栏： Vue 前端文章标签： vue.js 学习 javascript

于 2022-10-30 17:51:13 首次发布

本文链接：https://blog.csdn.net/Chen__sir__/article/details/127602390

版权

Vue核心

特点

采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为Vue模板

插值语法例子：

<body>
    <div id="root">
        <h1>Hello,{
  {name}}</h1>
    </div>
    <script type="text/javascript">
        // Vue.config.productionTip = false;
        //创建Vue实例
        new Vue({
     
            el: '#root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串
            data: {
      //data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象
                name: '陈润z'
            }
        })
    </script>
</body>

每个容器一一对应

指令语法例子：v-开头

单向绑定（v-bind：）数据只能从data流向页面
双向绑定（v-model）数据不仅能从data流向页面，还可以从页面流向data
1. 只能用在表单类元素（输入类元素）上
2. v-model：value可以简写为v-medel

data与el的2种写法

el有两种写法
1. new vue时候配置el属性
2. 先创建vue实例，随后再通过vm.$mount(‘#root’)指定el的值
data有两种写法
1. 对象式
2. 函数式
3. 目前两种都可以用,学到组件时,data必须使用函数式,否则会报错
一定不要写箭头函数,this只需window而不是vue

事件修饰符

鼠标事件：

prevent:阻止默认事件
stop:阻止事件冒泡
once:事件只触发一次
capture:使用事件的捕获模式
self:只有event.target是当前操作的元素是才出发事件
passive:事件的默认行为立即执行,无需等待事件回调执行完毕

键盘事件：

回车：enter
删除：delete
退出：esc
空格：space
换行：tab
上：up
下：down
左：left
右：right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case

系统修饰键：ctrl、alt、shift、meta

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合keydown使用：正常触发事件

vue中允许链式编程

计算属性

定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Objcet.defineproperty方法提供的getter和setter
get函数什么时候执行
1. 初次读取时会执行一次
2. 当依赖的数据发生改变时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用）效率更高，调试方便
备注：
1. 计算属性最终会出现在vm上，直接读取使用即可
2. 如果计算属性要被修改，那必须写set函数去响应修改，切set中要引起计算时依赖的数据发生变化

监视属性watch

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视！！！
监视的两种写法
1. new Vue时传入watch配置
2. 通过vm.$watch监视

深度监视

Vue中的watch默认不监测对象内部值的改变（一层）
配置deep：true可以监测对象内部值的改变（多层）
备注
1. vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
2. 使用watch时根据的具体结构，决定是否采用深度监视

computed和watch之间的区别：

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作

两个细节：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象

Vue本身有自带的监测信息是否改变，但是有一个bug，用如下方法Vue开发者工具无法监测到无法监测到

//可以被监测到
this.persons[0].name = 'xxx'
this.persons[0].age = 50
this.persons[0].sex = '男'
//无法被监测到
this.persons[0]={id:'001',name:'xxx',age:'50',sex:'男'}

Vue监测数据的原理

创建Vue数据时会把变量进行数据代理,Vue给它set get方法,如果不是一开始就创建的,则无法成功代理,也就无法完成响应式操作,一个对象中想用的数据一定要提前配置好.Vue提供了后期添加响应式数据的方法:Vue.set(‘想要给谁添加数据’,‘键’,‘值’) 或者vm.$set(),注意:这个方法只能给data数据里某一个对象里面追加属性,不能直接给data追加属性

Vue无法监测到数组里的的数据,数组对象Vue无法创建set get方法——无法响应式操作
但是在数组中可以调用数组中对应的7个方法，修改完数组后Vue重新编译并在页面展示

Vue会监视data中所有层次的数据
如何监测对象中的数据
1. 通过setter实现监视，且要在new Vue时就传入要监测的数据
  1. 对象中追加的属性，Vue默认不做响应式处理
  2. 如需给后添加的属性做响应式，请使用如下API
    1. Vue.set(‘想要给谁添加数据’,‘键’,‘值’)
    2. vm.$set(‘想要给谁添加数据’,‘键’,‘值’)
如何监测数组中的数据？
1. 通过包裹数组更新元素的方法实现，本质就是做了两件事：
  1. 通过包裹数组更新元素的方法实现，本质就是做了两件事
    1. 调用原生对应的方法对数组进行更新（7个）
    2. 重新解析模板进而更新页面同上API
在Vue修改数组中的某个元素一定要用如下方法
1. push() pop() shift() unshift() splice() sort() reverse()
2. Vue.set() 或 vm.$set()
特别注意：Vue.set() 和vm.$set() 不能给vm或vm的根数据对象添加属性!!! data和data在data一级的对象

绑定样式:

v-bind:class 缩写 :class

class样式
1. 写法:class=“xxx” xxx可以是字符串、对象、数组
2. 字符串写法适用于：类名不确定，要动态获取
3. 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
4. 数组写法适用于：要绑定多个样式，个数确定，，名字也确定，但不确定用不用
style样式
1. :style="{fontSize:xxx}"其中xxx是动态值
2. :style="{a,b}"其中a、b是样式对象样式对象必须是Css样式里存在的,而且要符合驼峰命名规则
3. $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-saL7CdhL-1667122915862)(E:\Typora\image-20220927213159237.png)]$

<body>
    <div id="root">
        <div class="basic" :class="mood" @click="changeMood">{
  {name}}</div>
        <div class="basic" :style="styleObj">{
  {name}}</div>
    </div>

    <script>
        new Vue({
     
            el: '#root',
            data: {
     
                name: '陈润喆',
                mood: 'normal',
                styleObj: {
     
                    fontSize: '40px'
                }
            },

            methods: {
     
                changeMood() {
     
                    const arr = ['happy', 'sad', 'normal']
                    const index = Math.floor(Math.random() * 3) //向下取整,取值0 1 2
                    this.mood = arr[index]
                }
            },
        })
    </script>
</body>

条件渲染

v-show v-if

v-if与template的关系

使用template模板时只可以使用v-if,否则会失效

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

列表渲染

v-for指令

用于展示列表数据
语法:v-for=“(item,index) in xxx” :key=“yyy”
可遍历:数组对象字符串指定次数

<body>
    <div id="root">
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {
  {p.name}}-{
  {p.age}}-------{
  {index}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
     
            el: '#root',
            data: {
     
                persons: [
                    {
      id: '001', name: '张三', age: '18' },
                    {
      id: '002', name: '李四', age: '19' },
                    {
      id: '003', name: '王五', age: '20' }
                ]
            }
        })
    </script>
</body>

用id和用key中index做唯一标识的区别，如果数据是从上面插入时，用数据中的id做唯一标识，向下插入用index。

react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：
1. key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟标识】随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
对比规则：
1. 旧虚拟DOM中找到了新虚拟DOM相同的key：
  1. 若虚拟DOM中内容没变，直接使用之前的真实DOM
  2. 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
2. 旧虚拟DOM中未找到与新虚拟DOM相同的key
  1. 创建新的真实DOM，随后渲染到页面
用index作为key可能会引发的问题
1. 若对数据进行更新：逆序添加、逆序删除等破坏
  1. 会产生没必要的真实DOM更新==>界面效果没问题，但效率低
2. 如果结构中还包含输入类的DOM：
  1. 会产生错误的DOM更新==>界面有问题
开发中如何选择key?
1. 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证等
2. 如果不存在对数据逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key
3. 简而言之：用每条数据的唯一标识就完了

收集表单数据

在这里插入图片描述

<body>
    <div id="root">
        <form action="" @submit.prevent="sub">
            <label for="demo">账号</label>
            <input type="text" id="demo" v-model="userInfo.account">
            <br