Vue3 基础VSCode代码片段第一步，复制自己需要生成代码片段的代码；第二步，https://snippet-g

VSCode代码片段

第一步，复制自己需要生成代码片段的代码；第二步，snippet-generator.app/ 在该网站中生成代码片段；第三步，在VSCode中配置代码片段；

vscode代码片段过程

设置 - 用户代码片段 - html.json(HTML) - 粘贴生成的代码片段

vue 语法

v-once

v-once 用于指定元素或者组件只渲染一次
当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
该指令可以用于性能优化；
如果是子节点，也是只会渲染一次

v-text指令

用于更新元素的 textContent <div v-text="msg"></div> 等价于 <div>{{msg}}</div>

v-pre

v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签
跳过不需要编译的节点，加快编译的速度

v-cloak

保持在元素上直到关联组件实例结束编译；和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。

v-on

修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyAlias} - 仅当事件是从特定键触发时才触发回调。
.once - 只触发一次回调。
.left - 只当点击鼠标左键时触发。
.right - 只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发。
.passive - { passive: true } 模式添加侦听器

参数传递

如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

v-for

v-for的基本格式是 "item in 数组
v-for也支持遍历对象，并且支持有一二三个参数

一个参数： "value in object";
二个参数： "(value, key) in object";
三个参数： "(value, key, index) in object";

v-for同时也支持数字的遍历

watch

侦听的是data中的数据默认情况下侦听data数据本身的改变（内部侦听的改变是不能侦听的）如：侦听data中的 msg 的变化，由msg: { name: "wx", age: 20 }改变成msg: { name: "wxwx", age: 20 }是侦听不到msg.name的变化的。

需要侦听到内部的变化需要做如下处理: 对msg做深度侦听，不在是写成函数形式，而写成对象形式

watch: {
    msg: {
      handler: function(newInfo, oldInfo) {
        console.log("侦听msg内部数据是不是变化了", msg.name);
      },
      deep: true, // 深度侦听
    }
}
methods: {
    changeMsgName() {
      this.msg.name = "wxwx"
    }
}

可以发现执行了以上代码的console，所以msg内部数据的改变有被侦听到。

watch还可以在页面渲染的时候对需要立即执行的data数据进行侦听，需要在对象中加上一个 immediate 就行

watch: {
    msg: {
      handler: function(newInfo, oldInfo) {
        console.log("newInfo", newInfo, "oldInfo", oldInfo)
      },
      deep: true, // 深度侦听
      immediate: true // 立即执行
    }
}

页面渲染时会有以上console的打印，但是 oldInfo 是 undefined。

注意：当去改变data数据中对象的内部值时，newInfo 和 oldInfo 的值都是改变后的值

通过一下方式可以拿到oldInfo（旧值）

watch: {
    "msg.name": function(newName, oldName) {
      console.log(newName, oldName);
    },
},

以上console打印 wx wxx

watch: {
    msg: {
      handler: function(newInfo, oldInfo) {
        console.log("newValue:", newInfo.name, "oldValue:", oldInfo.name);
      },
      deep: true, // 深度侦听
    }
},
methods: {
    changeMsgName() {
      this.msg.name = "wxwx";
    },
}

以上console输出的 newInfo 和 oldInfo 都是 "wxwx"

watch 实现侦听的其他方式

只侦听某个对象中的值

watch: {
    "msg.name": function(newName, oldName) {
      console.log(newName, oldName);
    },
},

使用this.$watch来侦听

created() {
    this.$watch("msg", function(newInfo, oldInfo) {
      console.log(newInfo, oldInfo);
    }, {
      deep: true,
      immediate: true
    })
}

组件化

全局组件

使用vue.createApp(App).component('组件名'，{属性})

<div id="app"></div>

<template id="my-app">
    <component-a></component-a>
</template>

<template id="component-a">
    <h2>{{title}}</h2>
    <p>{{content}}</p>
</template>

const App = {
    template: "#my-app",
}

const app = Vue.createApp(App)

app.component("component-a", {
template: "#component-a",
    data() {
      return {
          title: 'a',
          content: 'componentA'
      }
    },
    methods: {},
    computed: {},
    ...
});

app.mount('#app')

局部组件

<div id="app"></div>

<template id="my-app">
    <h2>{{message}}</h2>
    <component-a></component-a>
</template>

<template id="component-a">
    <h2>我是ComponentA</h2>
</template>

const ComponentA = {
    template: "#component-a"
}

const App = {
    template: "#my-app",
    components: {
        ComponentA
    },
    data() {
        return {
          message: "Hello World"
        }
    }
}

const app = Vue.createApp(App)


app.mount('#app')