赵日天的个人博客

4 object(s)
 

Vue学习指南

1.day01

  1. el绑定的是dom元素，类似于css选择器，但是一般使用id选择器
  2. 插值语法，即是插值表达式（有具体的返回值），可以在{{}}中执行js表达式，例如：字符串拼接、map、三元运算符……
  3. Vue指令，以v-开头的指令我们称为vue指令 ，在指令后面的引号内的内容，也是一个表达式
  4. v-text就是将data里面的数据渲染到页面上，会将原来的文本内容覆盖，插值语法也就是v-text的简写形式。同理也就是说，如果data中的内容是html内容，那么v-text不会解析，只会将其当成字符串填充。
  5. 解析html标签需要使用v-html，原理是innerHTML，它会覆盖掉标签中的原本内容 ，v-html使用时可能会有一些sql注入的安全隐患。
  6. 事件绑定一般使用的是v-on:click=“sayhello()” ,其中sayhello函数需要写在methods对象，简写形式为 @click=“syahello()”，如果没有参数则括号可以省略 。methods对象和el、data并列。使用方法推荐： @事件名=“事件处理方法”。 事件的使用方法有两种，一种是不加括号，另一种是加括号传参数，这两种方法都会有一个默认的参数event事件对象，可以直接使用。但是不能加括号但不传参数，这样的话事件对象无法获取，会得到undefind.

  7. 阻止事件冒泡使用在click后面跟上 .stop 即可 。阻止事件默认行为使用 .prevent 同样的还有 .enter .page-down ……等案件的别名

    <div  @click="clickDiv" style="width:200px;height:200px;background-color:red;">
<span @click.stop="clickSpan" style="width:100px;height:100px;background-color:blue;"></span>
</div>
  8. vue中的this指向的是当前vue的实例化对象，也就是可以在this中得到当前vue的属性以及方法 ，对其进行修改之后会发生响应式变化。
  9. 通过使用v-bind来绑定属性，缩写形式为 ： ，可以直接使用：来代替v-bind，双引号中也是js表达式 。对于绑定class和style的方式可以采用对象的方式进行赋值，也可以使用数组的方式同时设置多个值。注意的是如果绑定的style样式带了连字符，则需要改为驼峰命名。
  10. 计数器案例
  11. 图片切换案例
  12. 原生js实现插值语法，主要是利用正则，匹配大括号中的内容，最后并进行替换
  13. 原生js实现v-text 获取节点的v-text属性，并将其标签内容替换成所对应的键值对内容
  14. vue响应式对象的原理 ，vue2中主要使用Object.defineProperty来设置set和get ，而vue3中使用的则是proxy

2.day02

1.v-model

  1. 数据双向绑定使用 v-model指令，实现vue内部数据到页面之间的双向绑定（vue中的语法糖）
  2. v-model的原生js实现过程，绑定input事件，当input发生改变时，就获取当前input的value，并将其赋值给data中的数据。
  3. 多行文本、单个复选框采用boolean类型、多个复选框的绑定采用数组……
  4. 可以使用 .lazy事件将其更改为onchange事件，也就是失去焦点时才出发对应的操作。
  5. 同样用法的还有 .number 强制将用户输入的内容强制更改为数字类型，如果不能转化为数字，则自动忽略掉.number，也就是将其当成字符串来处理。
  6. 修饰符 .trim 自动过滤用户输入前面的空格

2.v-for

  1. v-for作用在需要重复的元素上
  2. 语法： v-for=“元素别名 in 数组” 或者 v-for= “（元素别名，下标别名） in 数组”

  3. 需要注意的是，在真实开发场景中，一般需要我们给每一个需要遍历的元素添加一个key属性，来对元素进行标识。

    image-20220301205537519

  4. 记事本案例，类似于todolist
  5. 计算属性，原生xhr fetch axios computed的触发场景，注意事项
  6. 生命周期钩子函数 总共八个对应不同的阶段

day03

  1. vue中的动画，对应六个不同 阶段
  2. 监视器 深度监视的使用
  3. 虚拟dom与diff算法，什么是虚拟dom 什么是diff算法 传统的dom方法，
  4. mvc开发模式 优点 缺点 angualar react
  5. mvvm开发模式 优缺点
    M：（model）普通的 javascript 数据对象V：（view）前端展示页面VM：（ViewModel）用于双向绑定数据与页面，对于我们的课程来说，就是 vue 的实例MVVM 模式采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。这种模式下，页面输入改变数据，数据改变影响页面数据展示与渲染vue 使用 MVVM 响应式编程模型，避免直接操作 DOM , 降低 DOM 操作的复杂性。

day04

  1. 过滤器的使用 全局过滤器和局部过滤器 谁调用他 参数就是谁 使用管道符进行调用
  2. 自定义指令 directives 使用v-来进行调用，引号里面为参数表达式也就是说将里面的当作表达式解析后当为参数传递
  3. 自定义指令不但可以使用匿名函数来写，同时还可以使用对象的方法来写，非常灵活
  4. 有局部自定义指令和全局自定义指令 全局没有s
  5. 围棋案例实战

day05

  1. 混入minins
  2. 案例音乐播放器基本使用 ：音乐搜索、音乐列表、评论列表、音乐封面展示、audio标签控制
  3. BetterScroll的使用，原生如何使用，zaivue中如何使用 注意事项 需要三个元素嵌套

  4. created mounted updated三种使用场景 updated的两个风险：data中的任意一个变化都会调用updated，在其中更改响应式对象会造成死循环

    image-20220311224609154

  5. $refs的使用 vue中不建议直接获取dom节点，如果非要获取，可以使用$refs 使用之后refs就被挂载到了vue上，我们就可以通过vue去获得当前的dom对象 this.$refs.wrapper 注意的是refs只能在mounted之后使用
  6. 使用betterScroll时需要注意三个点 ：三层结构 引入 new节点
  7. 完善案例，在created时就发送axios，添加热门榜单以及一些bug
  8. mounted和created几个不同时间段完成的事，生命钩子函数？

day06

  1. vue组件是什么 有什么用
  2. 组件的声明方法： 全局组件 局部组件
  3. 接收两个参数 驼峰命名 参数 如何调用
  4. 子组件中的data必须为返回值
  5. 为什么组件中的data必须为返回值呢 如果使用对象语法，那么多个子组件操作同一个对象，会造成污染，但如果使用函数返回的方式，每次调用组件都会在自己内部return一个响应式对象集合 根组件每次实例化都会返回一个独立的，但子组件是共用的
  6. 父子组件之间互相传值 在父组件调用子组件时 给子组件添加自定义属性，在子组件内部，就可以通过props去进行接收 接收到的数据可以像data中的一样被渲染到页面中
  7. 如果传递过来的msg跟自己内部声明的同名 那么则会覆盖掉
  8. props可以写成一个数组，比较直观 简洁 ，但同样的也可以用对象的形式来写props，每一个值都为一个对象 可以对传过来的值进行一些规定 ，比如type以及default等
  9. 父组件向子组件传递参数使用自定义属性传值 数据传递是单向的 父->子 当父组件传递一个参数到子组件之后 父组件中该值发生变化之后 子组件中的也会发生变化，但子组件中该值发生改变时，父组件中不会改变
  10. 子组件向父组件传值 $emit 的使用方法 在子组件中模拟触发父组件传递过来的函数 父组件通过自定义事件将事件名传递
  11. 组件间传值 兄弟之间互相传值 使用EventBus进行传值 EventBus称为事件中心，兄弟组件间传递信息，都通过这个事件中心进行传递，就是在新创立的这个vue上挂载了相关的事件
  12. 组件间传值 子-> 父 使用ref进行传递
  13. ref我们之前在获取元素的dom节点时曾用过 在页面的节点元素中添加ref=“aa” 之后就会发现这个ref被挂载到了vue上，我们就可以在vue中获取到当前这个节点。在这里如果ref属性作用在子组件上，引用就指向子组件实例，也就是当前的子组件，我们可以得到它的所有内容，也可以对其进行修改，但是这种方法比较危险，拥有的权限太高了。
  14. 动态组件 实现方法 主要就是动态的绑定component元素中的 is 属性 我们可以让多个组件使用同一个挂载点，并且进行动态切换。
  15. keep-alive的作用：可以将已经切换出去的非活跃组件保留在内存中，如果把切换出去的组件保留在内存中，可以保留它的状态，避免重新渲染。
  16. 组件插槽 slot
  17. 组件最大的作用就是可以提高复用性，插槽就相当于是在子组件中挖坑占位，具体的内容则由父组件来决定
  18. 组件主要有 匿名插槽 、具名插槽、作用域插槽
  19. 匿名插槽一般使用单个插槽 为slot标签，没有其它内容
  20. 具名插槽 在slot中使用name属性，多个插槽可以具有不同的名字，具名插槽存在的意义是为为了解决在单个页面中同时使用多个插槽。
  21. 作用域插槽是一种特殊类型的插槽，作用域插槽会绑定了一套数据，父组件可以拿这些数据来用，于是，情况就变成了这样：样式父组件说了算，但父组件中内容可以显示子组件插槽绑定的数据。

dayo7

  1. 路由组件的介绍，什么是前端路由 什么是后端路由
  2. 前端路由的原生实现
  3. vueRouter路由的基本使用
  4. 黑云音乐播放器案例：
  5. 组件的使用，路由需要几大步，第一步 导包 第二步 路由实例化 将路由挂载到vue上
  6. 路由传参 组件一般首字母大写
  7. 路由传递参数

day08

  1. 使用vue-cli，脚手架的使用会极大的方便我们的开发效率
  2. 使用vue-cli时 先检测node、npm的版本，之后只用npm i @vue/cli 即可安装vue-cli
  3. 之后便可以使用 vue create test 来创建一个名为test的项目
  4. 创建之后按照我们的选择会自动安装相对应的包
  5. 比如我们要使用vuex 或者vuerouter 便可以选择自动安装
  6. 之后我们使用了vue-cli来巩固了之前的vue基础上所学的
  7. 比如 插值语法，组件的使用，组件通信，vueRouter，不过我们把不同的项目放到了不同的文件中
  8. 在这里需要注意暴露的方式，这个还需要巩固
  9. 在使用vue-cli巩固之前的黑云音乐的案例时我们就要用到之前所学的一些知识
  10. 需要注意的是，cli中的views和components的区别，views主要用来保存页面，儿components则用来保存一些公共组件
  11. vueRouter使用时，首先在main.js中进行注册，之后再router文件夹下的index.js中对每一个路由进行配置。

day08

  1. 使用vue-cli模仿之前的黑云音乐播放器，其中之前的四个组件写在现在的views下，单独作为一个页面，只有个搜索框作为组件，在app.vue中使用之后在其它页面中就可以不用使用了。这里引入css文件可以使用import来引入assets下的css文件夹下

written by zrt