Vue知识点总结

  • v-once：只执行一次
  • v-html：用来展示带标签的字符串
  • v-text：会覆盖已存在的文本
  • v-pre：不显示js传过来的数据，就显示当前所写的
  • v-cloak：数据加载出来之前，不显示当前控件
  • v-bind：标签里面添加该标签后，才可以动态使用属性（语法糖只需要前面加个:就可以了）
  • v-on：
    。语法糖：@
    。参数：默认传的是事件的event
    。修饰符：@事件后加.**，有很多，用到的话可以查找一下（eg：.enter、.once、.present）
  • v-if：当条件为false时，包含v-if的元素根本不会存在于dom中
  • v-show：当条件为false时，只是给我们的元素添加了一个行内样式display：none
  • vue在渲染两个互斥的元素时，不会重新创建，会复用原来的元素（若想重新创建需要修改key为不同的值）
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

在这里参数是监听的事件名。

  • v-for：遍历对象item是value，尽量给元素或者组件添加一个:key属性（主要是为了高效的更新虚拟dom）。

  • 哪些可以做到响应式
    1.push():最后添加元素（可以多个）
    2.pop()：删除最后一个元素
    3.shift()：删除数组第一个元素
    4.unshift：在数组前面添加元素（可以多个）
    5.splice()：删除元素/插入元素/替换元素
    6.sort()：
    7.reverse()：反转

  • 通过索引修改数组元素，dom是不能够响应的

  • 获取数组的长度用length

  • 编程范式：
    1.命令式编程/声明式编程，
    2.面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）

  • for循环：

 computed: {
        totalPrice() {
            // let totalPrice = 0
            // 三种遍历方式
            // for(let i = 0; i < this.books.length; i++) {
            //     totalPrice += this.books[i].price * this.books[i].count
            // }

            // for (const i in this.books) {
            //     const element = this.books[i];
            //     totalPrice += element.price * element.count
            // }

            // for (const item of this.books) {
            //     totalPrice += item.price * item.count
            // }
            // return totalPrice

// 最後一種，函数式遍历
            return this.books.reduce(function(pre, book) {
                console.log(book.price + "---------" + book.count + "---------" + pre + book.price)
                return pre + book.price * book.count
            }, 0)
        }
    },
  • 函数式遍历
            const arr = ["23", "234", "34", "45", "67"]

            //把arr遍历重新生成一个小于100的数组
            let newArr = arr.filter(function(n) {
                return n < 100
            })

            // 把原来数组乘2
            let new2Arr = newArr.map(function(n) {
                return n * 2
            })

            // 对数组中所有的内容进行汇总 (prvalue是初始化值，n数组中的元素，0就是给prvalue的初始化值)
            new2Arr.reduce(function(prvalue, n) {
                return prvalue + n
            }, 0)


            // 上面简写(采用链式编程)：

            let total = arr.filter(function(n) {
                return n < 100
            }).map(function(n) {
                return n * 2
            }).reduce(function(prvalue, n) {
                return prvalue + n
            }, 0)
            console.log(total)

// 再次简写：
            let total = arr.filter(n => n < 100).map(n => n*2).reduce((pre, n) => pre + n);
            console.log(total)

  • v-model双向绑定（原理）：


    image.png

  • 组件data对象为什么是函数：

如果不是函数，是对象，会造成数据污染，改变第一个组件，第二个组件数据变了

  • 父组件向子组件传值：props
    在子组件中写props对象（可以是数组等其他形式，但是对象可以设置类型和默认值）
    注意下面，如果采用驼峰命名，使用的时候要用-分开
    image.png
  • 子组件向父组件传值：$emit 
// 传递一个值
// 子组件
this.$emit('test',this.param)
// 父组件（一个值时，这里的$event可以不写。也可以写其他不带$符号的任意字符）
@test='test($event)'

传递多个值

// 子组件
this.$emit('test',this.param1,this.param2)
// 父组件（多个值必须要用arguments来接收，数组的形式）
@test='test(arguments)'

  • 插槽 slot
    作用域插槽

    image.png

  • 钩子：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  mode: "history",
  linkActiveClass: "active"
})
// 前置钩子（hook）
// 全局导航守卫，用来监听路由跳转时,如果重写该方法（不重写默认是执行next()进行跳转的），必须要执行next()，不然不会跳转，
router.beforeEach((to, from, next) => {
  // 从from跳转to
  document.title = to.matched[0].meta.title;
  // 主动调取方法进行跳转,这里可以用来判断用户是否登录，如果登录跳转下一个界面，否则做相关判断
  next(); 
})

// 后置钩子
router.afterEach((to, from) => {
  console.log(to + '----afterEach---' + from)
})

  • 后端渲染：jsp：java server page

  • 后端路由：后端处理URL和页面之间的映射关系

  • 前后端分离：后端只提供数据，不负责任何阶段的内容

  • Promise：

  • background:

background: url(../../../assets/image/common/collect.svg) 0 0/14px 14px;

// 等价于

background-image: url(../../../assets/image/common/collect.svg);
background-position: 0 0;
background-size: 14px 14px;
  • 如果当前元素用到position:absolute;属性，其父元素需要用position: relative;
  • main.js中使用template 需要导入vue.esm-bundler预先编译vue-loader
    image.png
  • Vue 组件添加事件要加native的修饰符（eg: @click.native = “clickevent”）

  • 事件总线：类似于vuex的全局属性，他是来标识全局方法的

    。Vue中的$Bus使用

    。vue使用bus进行组件通信

  • 在create()方法里面拿this.$refs，有可能拿不到值，必须要放在monted()方法里面获取

  • 防抖（节流）函数：解决多次请求的问题

    /**
 * 函数防抖
 */
export function debounce(fn, delay) {
  // 记录上一次的延时器
  var timer = null;
  var delay = delay || 200;
  return function() {
    var args = arguments;
    var that = this;
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
        fn.apply(that,args)
    }, delay);
  }
}

  • 记录一个很巧妙的方法用来给一位数字前面补0:

// 当传的是一位数字，eg:3. "00" + 3 就是"003"，此时通过截取str的长度，最终变成"03"，感觉很巧妙
function padLeftZero(str) {
          return ('00' + str).substr(str.length);
      }
  1. filter过滤(返回的是符合条件的数组)
var oldArray = [1,2,3,4,5,6,7,8,9,10,11,12,15,18];
// 只能在这一行下面写代码
var newArray = oldArray.filter(function(val){return val<6;});
/// 箭头函数
// var newArray = oldArray.filter(val => val<6);
  1. reduce()的使用
// reduce()方法为归并类方法，最常见的应用场景就是，计算数组中每一项的总和。
let arr = [1,2,3,4,5]
 arr.reduce((prev,cur)=>{
      return prev+cur
 })
//上面这段代码，是用来计算数组总和的，reduce方法中，只传了第一个参数，也就是只传了一个函数，但第二个参数、初始值并没有传，当第二个值没有传的时候，第一次循环，prev的值，默认为数组的第一项，而cur的值为数组的第二项，也就是第一次循环，会return 1+2 ，这个时候，第一次循环返回的结果会传给下一次循环中方法的第一个参数，也就是说、第二次循环方法中prev的值，是第一次循环方法返回的结果。
let arr = [1,2,3,4,5]
arr.reduce((prev,cur)=>{
    return prev+cur
},10)
// 我们传入一下第二个参数，第一次循环，prev的值为reduce的第二个参数，也就是“归并基础的初始值”，而cur的值为数组的第一项，第一次循环会返回10+1 。
  1. find的用法
    通俗的讲find是找到数组中符合条件的第一项，看下面代码
let arr = [{ name: '老于', age: 18 }, { name: '张三', age: 15 }, { name: '李四', age: 22 }, { name: '王五', age: 25 }, { name: '老朱', age: 12 }]
    let str=''
    str=arr.find(item=>{
      return item.age>12
    })
    console.log(arr);
    console.log(str);
image.png

  • 给vue注册属性，所有的组件都可以使用


    image.png

  • 路由导航守卫

/// 挂载路由导航守卫，判断token是否重新回到登录
router.beforeEach((to, from, next) => {
  /*
  to: 去哪里
  from： 从拿来
  next（） ： 放行
  */
  if (to.path === "/login") return next();

  const tokenStr = window.sessionStorage.getItem("token");
  if (!tokenStr) return next("/login");
  next();
})
  • eslint 语法要求使用单引号，方法后不适用分号，但是vscode格式化后，会默认添加，此时可添加.prettierrc文件
{
    "semi": false, // 移除分号
    "singleQuote": true // 单引号
}
image.png
  • vue有单项数据流，自组件不允许修改父组件传过来的对象，可通过方法传递修改（不能修改传入的props）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。