Vue3 学习笔记 02-06

Vue coderwhy 02笔记

1. A bind（B）， A的this指向B
2. 文件-首选项-添加代码片段 选择对应的文件格式 创建代码片段 代码片段生成网站 snippet-generator.app/
3. v-html 解析标签；v-once 只渲染一次；v-pre不编译；v-cloak，未编译时产生css指令【v-cloak】{}；（不常用属性）
4. vue3 template可以不止一个根元素
5. 对象语法 :class="{ A: boolean , B:boolean}" 通过改变boolean 动态改变样式
6. 数组语法 :class="['abc', title, isActive ? active' : '' ]" //title定义在在data中;三元运算，isActive 是Boolean; :ckass = " [ { b:boolean } ] "
7. :style="{ color : red }" red加引号是string，不加会被解析成变量, 'font-size'/fontSize
8. 动态绑定属性名 :[name]="value" , //data中name:'abc',value='ccc'
9. 用data的数据给标签添加属性，v-bind="info" //data中 info:{A:'xx',B:'xx'}

11. 绑定多个事件，v-on="{ click: A方法,mousemove: B方法 }"
12. 方法传参 @click="A($event,'abc',16)" ---方法 A(event,b,c){}

Vue coderwhy 03笔记

1. template 不支持v-show、v-else，template代替div，标签不会被渲染；
2. template 可以智齿v-for，并且不被渲染
3. 遍历对象 (value,key,index) in {} 通过v-for; 遍历数字，(num,index) in 10；ps: index从0开始
4. vnode是vue创建的虚拟节点，虚拟DOM是一个个VNode形成的树结构
5. v-for 有key时,diff算法更加高效，一般:key="item/id"，尽量不用index作为key值 patch 如果匹配，就进行更新操作，如果为null即判断失败就进行挂载操作

Vue coderwhy 04笔记

1. computed用法：

函数：fullName(){
    return 操作
}

  对象：fullName: {

      get: function(){
          return 操作
      }
          set: function(newValue){
          console.log();//等其他操作，在给fullName数据被改变的时候触发
      }      }

2. 计算属性有缓存，数据发生改变时才会重新执行，多处使用只执行一次，性能高；对数据进行复杂运算时使用。
3. watch监听器，作用：监听数据的变化，一改变就可以对其进行一些逻辑的处理。

使用方法：
//监听哪个data数据，就用哪个作为名字
watch: {
    fullName(newValue,oldValue){
        console.log()//拿到新旧值做一些操作；一改变就执行回调函数
    }
}
watch: {
    info: {//非语法糖写法
       handler: function(newValue,oldValue){
          console.log()//拿到新旧值做一些操作；一改变就执行回调函数
       },
       deep: true, //深度监听，对象下的属性值改变也会触发回调
       immediate: true, //立即执行，初次渲染页面就执行一次
    }
}
watch: {
   info: "方法名" //字符串写法，methods里定义该方法
   "info.name": function(newValue,oldValue){ //监听某个属性写法
          console.log()//拿到新旧值做一些操作；一改变就执行回调函数
    }
}

created(){
    const unwatch = this.$watch("info",function(new,old){
        console.log();
    },{
        deep: true,
        immediate: true
    })
    unwatch(),//可通过调用取消监听
}

4. :disabled="判断语句/boolean" 可以使元素不可点击
5. splice(index,1/0/num,C) //1，删除一个，0增加，C替换的值
6. Vue3 不支持过滤器,推荐使用计算属性

    conputed:{
        books(){
            return this.books.map(item => {
                const newObj = Object.assign({}, item);
                newObj.A = "#" + item.price;
                return newObj;
            })
        }
    }

Vue coderwhy 05笔记

1. 浅拷贝const A = Object.assign({},info) ，info的属性拷贝给{};
2. 深拷贝const B = JSON.parse(JSON.stringify(info)),或者引用lodash;
3. v-model 里跟上.lazy修饰符，事件从input切换为change，提交时触发，比如回车； .number可以转换成数字类型 .trim修饰符去除两边空格