vue3入门人话版（二）：模板语法

ps: 模版语法均为单向绑定，数据-> 视图。 此处理解为渲染结束后，对变量的修改操作无效即可

文本插值

来，先看文件结构。单文件组件语法定义

然后你要明白的是在前端的世界有三种基本语言语言，js、css、html，他们可以在一个文件中存在。
js：掌管逻辑
html：掌管显示结构
css：掌管外貌

具体的说，js中可以定义变量，然后在html中使用。

so？

<script setup>
import { getCurrentInstance } from 'vue';

    const msg = '这是一个名为msg的变量'  
</script>

<template>


  <div id="app"> 
    <span>Message: {{ msg }}</span>
    <div id="app2">
      <div id="app3"></div>
    </div>
  </div>
 
</template>

<style scoped></style>

无论vue框架封装成什么样子，他最终也要在这个标签内部定义变量，然后赋值！

例如

app.vue
    consmsg=getCurrentInstance().appContext.config.globalProperties.msg

main.js

app.config.globalProperties.msg='这不是一个msg'

原始 HTML

同上，直接使用在<script>中使用变量定义即可。

attribute绑定

attribute直译为属性，attribute绑定指前端中的数据绑定，具体来说是说标签的某个属性的指要和某个变量产生关联，在后端场景中，通常是用引用地址来表述。

<script setup>
import { ref } from 'vue';

const msg = ref(1);
const rawHtml = "<div>Content goes here</div>";
const dynamicId = ref(1);

const clickHandler = () => {
  dynamicId.value += 1;
  msg.value += 1;
};
</script>

<template>
  <div id="app"> 
    <span>Message: {{ msg }}</span>
    <div id="app2">
      <p>Using v-html directive: <span v-html="rawHtml"></span></p>
      <div id="app3">
        <div :id="dynamicId"></div>
        <button @click="clickHandler()">Click Me</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 样式 */
</style>