vue3学习日记（一）-基础用法vue指令 1、基础指令 v-html v-once v-block v-text v-

vue指令

1、基础指令

v-html
v-once
v-block
v-text
v-pre
mustache语法

2、常用指令

v-bind
v-model
v-on

一、v-bind

:calss => 绑定不同的css样式
对象语法注意：引号可写可不写，:class里面可放在data中，computed中，可数组中，可与静态class结合

<div :class="{'active' :true,'title' :true}"></div>
<div :class="{active :true,title :true}"></div>

控制css的几种写法注意：用横线连接的时候，需要加单引号，使用驼峰写法可不加

<template id="my-app">
    <div :style="{color: colorRed,'font-size': '30px'}">哈哈哈</div>
    <div :style="{color: colorRed,fontSize: '30px'}">哈哈哈</div>
    <div :style="fontSize">哈哈哈</div>
    <div :style="fontSizeMethod()">哈哈哈</div>
    <div :style="[style1,style2]">哈哈哈</div>
  </template>

  <script>
    Vue.createApp({
      template: `#my-app`,
      data: function () {
        return {
          colorRed: 'red',
          firstStyle: {
            color: 'red',
            fontSize: '30px',
            'background-color': 'red'
          },
          style1: {
            color: 'red'
          },
          style2: {
            textDecoration: "underline"
          }
        }
      },
      methods: {
        fontSizeMethod() {
          return {
            color: 'yellow',
            fontSize: '30px',
            'background-color': 'red'
          }
        }
      }
    }).mount('#app')
  </script>

v-bind直接绑定一个对象

<template id="my-app">
    <div v-bind="info">哈哈哈</div>
  </template>


  <script>
    Vue.createApp({
      template: `#my-app`,
      data: function () {
        return {
          info: {
            name: 'xiaohuang',
            age: 18,
            weight: 150
          }
        }
      },
      methods: {
      }
    }).mount('#app')
  </script>

二、v-on

基本的点击事件， $event可以获取到事件发生时的事件对象，可以传不同的参数，$ event默认传入

@clcik="btnclick($enent,'张三')"

v-on的修饰符

.stop，-调用event.stopPropagation，停止冒泡三、条件渲染-template template在vue中，最终不会存在的
v-if，内容会被销毁（不会渲染），其对应的元素不会被渲染在dom中
v-else-if
v-else
当 = true,内容被渲染出来，可以写条件判断
v-show，元素会存在于控制台中，不支持template，不可以和v-else一起使用，dom其实是有渲染的，通过css的display：none实现的

四、v-for

参数是有顺序的

遍历数组 v-for=="(item,index) in 数组"
遍历对象 v-for=="(item,key,index) in 对象"
遍历数字 v-for=="(num,index) in 数字" 例如：v-for=="(num,index) in 10"，从1数到10

五、数组更新

push,增加进去元素
pop，移除第一个元素
shift，移除最后一个元素
unshift，增加第一个元素
splice，删除等
sort，排序
reverse，倒序
上面的方法是修改原本数组的数据，下面的方法生成新的数组，filter(),concat(),slice()

六、v-for中的key的作用

官方：

七、VNode（Virtual Node），虚拟节点

真实节点就是在html真是渲染存在的事实上，无论是组件还是元素，它们最终在vue中表现出来的是一个个VNode。

八、虚拟dom

dom是树，node是树上的一个个节点代码->虚拟dom树->真实dom（浏览器） diff算法会比较新旧VNode，如果没有key，一个一个比较

九、计算属性

1、复杂data的处理方式

常用的几种方式：

插值语法------{{}}

三元运算符
数据进行转换
表达式
多个数据结合起来如果放入太多的的逻辑，代码过重并且难以维护，我们可以抽离出去，如果抽成方法，弊端，使用data所有的过程都变成方法的调用，这时候，计算属性-computed出场了。

computed

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性。
计算属性是有缓冲的，方法没有缓冲。当我们多次使用同一个计算属性时，计算属性里面的运算只会执行一次。
计算属性是基于它们的依赖进行缓冲的，数据不发生变化是，计算属性不需要重新进行计算，当数据发生变化时，使用时，计算属性，重新进行计算。

watch

watch侦听器一般不侦听计算属性。计算属性不是元数据。 1、普通侦听 2、深度侦听 deep:true 3、立即执行 immediate:true

在生命周期中，可以用this.$watch侦听
侦听器取消

const unwatch = this.$watch('info.name', (newval, oldval) => {
          console.log('newval', 'newval');
          console.log('oldval', 'oldval');
        }, {
          deep: true,
          immediate: true
        })
        // unwatch()