1.目錄結構

1.vscode			——VSCode工具的配置文件夾
2.node_modules 		——Vue項目的運行依賴文件夾
3.public			——資源文件夾（瀏覽器圖標）
4.src				——源碼文件夾
5..gitgnore			——git忽略文件
6.index.html		——如果html文件
7.package.json		——信息描述文件
8.README.md			——注釋文件
9.vite.config.js	——Vue配置文件

2.模板語法

	Vue使用一種基于HTML的模板語法，使我們能夠聲明式地將其組件實例的數據綁定到呈現的DOM上，
所有的Vue模板都是語法層面合法的HTML，可以被符合規范的瀏覽器和HTML解析器解析。以下為初始化項目（刪除示例代碼）：1.components文件夾下所有文件刪除；2.App.vue文件只留下script與template標簽；3.修改main.js文件夾（刪除初始化樣式）4.刪除assets下所有文件刷新后會得到空頁面（控制臺沒有錯誤提示）

2.1.文本插值

	最基本的數據綁定形式的是文本插值，它使用的是“Mustache”語法（即雙大括號）

<template><p>{{ msg }}</p>
</template>
<script>export default {data(){return{msg:"神奇的魔法"}}}
</script>

2.2.使用JavaScript表達式

	每個綁定僅支持單一表達式，也就是說一段能被求值的JS代碼。一個簡單的判斷方法是是否可以合法地寫在main后面（求值，三目運算符，字符串）

	無效1.{{ var a = 1 }}(語句而非表達式)2.{{ if(ok){ return message } }}(條件控制也不支持)單一表達式 + 有return的結果才可以

2.3.原始HTML

	若想插入HTML，需要使用v-html指令

3.屬性綁定

	雙大括號不能在HTML attributes中使用，想要響應式地綁定一個attribute，應該使用v-bind指令v-bind后面可以添加動態的屬性

	v-bind指令指示Vue將元素的id attribute與組件的dynamicId屬性保持一致。如果綁定的值是null或者undifined，那么該attribute將會從渲染的元素上移除

3.1.簡寫

	因為v-bind非常常用，提供了特定的簡寫語法: == v-bind:

	<div :id="dynamicId" :class="dynamicClass"></div>

3.2.布爾型Attribute

	布爾型attribute依據true/false值來決定attribute是否應該存在于該元素上，disabled就是最常見的例子之一

3.3.動態綁定多個值

	一個包含多個attribute的JavaScript對象