Vue学习第一篇模板语法属性绑定

Alpha

August 7, 2023

5508 views

No comments

1015 words

首页编程技术前端开发

vscode的一些配置

## 准备工作

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

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

```shell
npm init vue@latest
```

- 项目文件介绍

![image.webp](https://blog.a152.top/usr/uploads/2023/08/3615313309.webp)

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可以被简写成:
- 动态绑定多个值：需要命名准确

## 代码示例

```javascript
<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>

```

Last modification：August 8, 2023

如果觉得我的内容对你有用，请随意赞赏

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Vue学习 第一篇 模板语法 属性绑定