Vue学习笔记-第七弹

知识浅谈
556 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

🍁 作者：知识浅谈，CSDN签约讲师，CSDN博客专家，华为云云享专家，阿里云星级博主
📌 擅长领域：全栈工程师、爬虫、ACM算法
💒 公众号：知识浅谈
🔥 联系方式vx：zsqtcc

知识补充

render函数

  1. render(createElement,context){

    ​ return createElement(this.tag,{},"hello");

    }

    createElement(参数一，参数二，参数三)

    参数一是 标签，或者组件名

    参数二是 选项

    参数三是 子元素是什么，可以是文本节点(直接就是一个字符串)，也可以是数组.

    • createElement中，当传递的第一个参数是html标签，
    <!--
<template>
</template>
-->
<!--上边的template之后还会编译成render函数-->

<script>
import Vue from 'vue';
export default {
  name: "Heading",
  props:{
    tag:String,//这个在调用这个组件的时候会传递过来
  },
  data(){
    return{
      people:['a','s','d']
    }
  },
  render(createElement, context) {
    // return createElement(this.tag,{},"Hello shit");  //使用render函数的好处就是可以动态创
    return createElement(this.tag,{},this.people.map(name =>
      createElement('li',{attrs:{class: 'test'},on:{
          click:()=>{
            console.log("li chicked! ");  //这个是检测li元素有没有被点击
          }
      }},`${name}`)));
  }
}
</script>

<style scoped>
</style>
    • createElement中，当传递的第一个参数是组件的时候
    # 把上边的render函数改成这个就可以了
render(createElement, context) {
  return createElement(Test,{props:{
      msg: "测试"
    }});
},

computed和watch函数

  • computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
  • computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
  • watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，但是我们不能类似这样监控，比如：
watch:{
goodsList.price(newVal,oldVal){
    //监控商品列表中是商品价格
}
}

下边的是对的
watch:{
　example0(newVal,oldVal){//监控单个变量
           ……
   }，
example2(newVal,oldVal){//监控对象
           ……
   }，
}

注意事项

因为axios在前台传递对象的时候，默认的是使用的是请求体的json格式，所以后端接受对象的时候要在参数前用@RequestBody

@RequestBody ：对前端发送的json数据解析为后端的实体类对象

@ResponseBody: 发送到前端的时候会把实体类对象转换为json串的格式

注意把vue打包好的项目放到springboot项目中运行的时候，注意修改index.html文件中访问静态资源的路径，以及maven中要clean一下

🍚总结

上边也是我整理的一些优化的方法，不行了肝不动了，休息了休息了。

avatar
文章
阅读
粉丝