VUE3（二）基础指令

methods中不应该使用=>{}来定义函数，理由是该写法下绑定的是父级作用域的上下文（window），this不会按照预期地指向实例。

箭头函数不绑定this。

const foo =function{
  console.log(this);
}
foo();//window，隐式绑定
const obj={bar:foo};
obj.bar();//obj

const foo =()=>{
  console.log(this);
}
foo();//window
const obj={bar:foo};
obj.bar();//window
//这些this是从上层作用域script中找到的

function bar(){
  console.log(this);
}
const info={name:"sss"}
const foo=bar.bind(info)
foo();//info，显式绑定

通过vscode创建用户代码片段

在snippets文件夹下存储了用户的代码片段，通过settings，preference，user snippet中可以找到。

保存用户代码片段的方法是：利用一个自动生成用户代码片段的网站，将要生成的代码粘贴过去，就可以直接生成，并复制粘贴到html.json中保存。

Mustache语法

<template id="my-app">
        <!-- 1.mustache语法的基本使用 -->
        <h2>{{message}}</h2>
        <!-- 2.表达式 -->
        <h2>{{counter * 10}}</h2>
        <h2>{{message.split(' ').reverse().join(' ')}}</h2>
        <!-- 3.函数 -->
        <h2>{{getReverseString()}}</h2>
        <!-- 4.三元运算符 -->
        <h2>{{isShow?"哈哈哈":""}}</h2>
        <button @click="toggle">取反</button>
        <!-- 错误语法 -->
        <!-- 不能使用var、if等语句 -->
    </template>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    message: "hello world",
                    counter: 100,
                    isShow: true
                }
            },
            methods:{
                getReverseString(){
                    return this.message.split(' ').reverse().join(' ');
                },
                toggle(){
                    this.isShow=!this.isShow;
                }
            }
        };
        Vue.createApp(app).mount("#app");
    </script>

v-once

被v-once修饰的标签在数据发生改变后也不会重新渲染，并且处于其之下的子标签也不会。（可用于性能优化）

    <template id="my-app">
        <h2>{{counter}}</h2>
        <div v-once>
            <h2>{{counter}}</h2>
            <h2>{{message}}</h2>
        </div>
        <button @click="increment">+1</button>
    </template>

v-text

用法等价于{{}}，但是{{}}更加灵活。

    <template id="my-app">
        <!-- 这两种写法等价 -->
        <h2>{{message}}</h2>
        <h2 v-text="message"></h2>
    </template>

v-html

v-html用于解析需要显示的文本中的html，下面两行代码的显示效果如下：

    <template id="my-app">
        <h2>{{msg}}</h2>
        <h2 v-html="msg"></h2>
    </template>
//msg: '<span style="color: red; background-color: black;">哈哈哈</span>'

v-pre

用于禁止解析{{}}中的内容。

    <template id="my-app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </template>

v-cloak

在标签被渲染之前，v-cloak会存在于这个标签中，渲染后会被取消。因此可以结合css设定渲染成功前的显示效果。

    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <template id="my-app">
        <h2>{{message}}</h2>
        <h2 v-cloak>{{message}}</h2>
    </template>