vscode的一些配置

准备工作

这是cpm安装的解决方案 https://blog.csdn.net/w_t_y_y/article/details/88739790

• [X] 开发环境选择： vscode+volar插件 ✅ 2023-08-06

npm init vue@latest

• 项目文件介绍

npm install 安装的是node_modules，也就是项目依赖文件
代码一般在src文件夹下面写

vite.config.js是配置文件

我目前只需要关注src文件夹即可

模板语法

vue使用一种基于html的模板语法，可以被符合规范的浏览器和html解析器解析

模板插值语法
{{ }}

插入html

需要用v-html指令完成

属性绑定

使用v-bind指令
双大括号不能在html属性中使用，需要响应式的绑定一个attribute，必须使用v-bind指令

值通过{{}}或者v-html，而属性用v-bind
如果绑定的值是null或者没有被定义，那么这个属性将会从元素上移除

• 简写：v-bind可以被简写成:
• 动态绑定多个值：需要命名准确

代码示例

<template>
  <div v-bind:class="msg" :id="hello">
    <h3>模板语法</h3>
    <p>{{ num + 5 }}</p>
    <p v-html="html"></p>
  </div>
  <div v-bind="objectAttrs">测试绑定多个</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "active",
      hello: "hello",
      num: 1,
      html: "<a href='http://blog.a152.top'>测试</a>",
      objectAttrs: {
        class: "active",
        id: "hello",
      },
    };
  },
};
</script>

<style>
.active {
  color: blue;
}
</style>