Vue基础语法

1. 前置知识

1.1 methods方法绑定this

1. method函数不能使用箭头函数
   this != window；
   而箭头函数中的this就是window，因为箭头函数中不绑定this，箭头函数会在自己的上层作用域中查找this，即script作用域中的this，所以就是window；
2. this指向什么内容
   Vue源码对methods中的所有函数进行了遍历，并且通过bind绑定了this

1.2 VSCode创建代码片段

1. 先在网站https://snippet-generator.app/中生成代码片段。
2. VSCode配置：code -> 首选项 -> 用户配置 -> 选择html，把代码片段粘进去即可。

2. 模版语法

<template>
    <div>{{ value }}</div>
</template>

类似于上述代码中将DOM和底层组件实例的数据绑定在一起的语法，Vue大多数基于模版语法

2.1 插值语法

2.1.1 mustache语法

把数据显示到模板（template）中，使用最多的语法是 Mustache语法 (双大括号) 的文本插值

<div>{{ value }}</div>
// value可以是数值、表达式但不能是赋值语句

2.1.2 v-once

单例模式，只在加载的时候渲染一次，无视数据的更新

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

<template id="my-app">
  <p v-once>{{value}}</p>
  <button @click="add">+1</button>
</template>

<script src="../js/vue.js"></script>
<script>
  const App = {
    template: "#my-app",
    data() {
      return {
        value: 0,
      };
    },
    methods: {
      add() {
        this.value++;
      },
    },
  };

  Vue.createApp(App).mount("#app");
  // value会+1, 但渲染出的value一直为0