前言
在介绍一下vue文件结构之前，先说明一下组件化开发这个概念。组件化开发是将整UI根据结构、是否可复用等逻辑将项目的UI划分不同的独立部分，每个组件内封装自定义内容与逻辑，然后再将这些组件组合起来的过程。通常来说一个组件就是一个vue文件，同样一个vue文件的扩展名也是.vue。
vue文件的结构
一个vue文件一般情况下由三分部组成：template(HTML部分)、script(组件逻辑、交互部分)、style(组件样式部分)。以下为一个简单的组件例子：
<template>
<h1>{{ msg }}</h1>
</template>
<script setup>
export default {
data() {
return {
msg: "欢迎学习Vue！"
}
}
}
</script>
<style scoped>
h1 {
color: #efefef;
}
</style>
在上面的例子中
Vue响应式
在上面的例子中我们发现script部分中有一个data方法，它返回一个对象{msg: "欢迎学习Vue!"}，与此同时在template部分中有一个{{msg}}。这其实是在template中将script中data方法的数据显示到页面中。当我们改动data中msg属性的值，同时template中的显示也会随着msg的值变化而变化，这种当数据发生变化时视图会随着数据变动而变动，这种就称为响应式，具体响应式怎么实现的，放在后续再讲。
组件模板语法
插值
在template中使用双括号{{}}可以将script中的数据显示到页面中，如：
<template>
<span>Message: {{ msg }}</span> <!-- 欢迎学习Vue！ -->
</template>
<script>
export default {
data() {
msg: "今天是个好日子！"
}
}
</script>
同样{{}}不止可以使用一个值，同时还支持表达式，如：
<span>{{ '今天天气很好,' + msg }}</span> <!-- 今天天气很好，欢迎学习Vue! -->
<span>{{ 5 + 10 }}</span> <!-- 15 -->
<span>{{ '5' + 10 }}</span> <!-- 510 -->
插入HTML
在当前标签位置插入新的HTML子元素需要用到v-html指令，格式为: v-html="表达式"例如script中有以下strHtml属性值为一个字符串<span>1</span>，要将这串字符以HTML的形式放在页面，如以下：
<template>
<div :v-html="strHtml"></div>
</template>
在页面中的显示代码会为：
<div><span>1</span></div><template>
动态绑定属性
要动态绑定标签属性使用v-bind:属性名="表达式",如：
<template>
<div v-bind:id="myid"></div>
</template>
<script>
export default{
data() {
return {
myClass: "class1",
id: "id1"
}
}
}
</script>
也可使用简写 :属性名="表达式"，如：
<div :id="myid" :class="myClass"></div>
当表达式的值为一个布尔值时,则根据这个布尔值来决定这个属性是否存在
<input :disabled="isDisable()" /> <!-- 当表达式里isDisable函数的返回值为true时则表示有该属性，当为false时，则属性不存在 -->
<script setup>
const isDisable = () => {
return true;
}
</script>
动态绑定多个属性
通过不带参数的 v-bind，你可以将它们绑定到单个元素上：
script的数据部分：
data() {
return {
objectOfAttrs:{
id: 'container',
class: 'wrapper'
}
}
}
模板部分
<div v-bind="objectOfAttrs"></div>
官网的模板语法规则地址：cn.vuejs.org/guide/essen…
