目錄
VUE特點
文檔tips
開發者工具
從一個Hello world開始
hello world Demo
容器和實例的對應關系
差值語法{{}}
VUE特點
構建用戶界面：可以用來把數據構建成用戶界面。
漸進式：自底向上，可以先從一個非常輕量級的框架開始，漸漸往里面放一些需要的插件，不需要一開始就從一個大型的項目庫開始。
聲明式：（與命令式相反，命令式是指一行代碼就是一個命令，每一行代碼發出一條命令，多個命令組合達成一個效果，比如JS），聲明式是先聲明框架，給框架綁定數據，達成某種效果。讓編程人員無需直接操作DOM，提高開發效率。
組件化：VUE頁面由組件構成，可以提高代碼復用率（單個組件中包含當前組件需要的HTML、CSS、JS，需要某個組件的效果，直接把組件拿來用就行了），增加可維護性（每個組件之間的樣式是獨立的，需要調試或修改時，單獨調試或修改一個組件即可）。
虛擬DOM和diff算法：該算法用于頁面數據發生變化時，數據映射到真實DOM之前，會增加一個比較算法，頁面的變化會被更新到虛擬DOM，虛擬DOM會比較更新前后虛擬DOM的變化（該比較算法就是diff），diff會比較出可以復用的DOM，只把需要新增的內容推到真實DOM。
文檔tips
記這個筆記，只是為了方便入門，日常中如果有不太會的地方，還是應該學習怎么查閱文檔。
Vue.js
可以在 Awesome Vue中瀏覽和Vue相關的組件效果等，在【瀏覽和Vue相關的包】中查詢包。
可以在風格指南中查詢vue的代碼風格建議，cookbook中學習vue使用技巧。
Vue的安裝使用，有兩種方式，一種是在HTML頁面中引入Vue.js編寫相關代碼，另一種方式是使用腳手架。
版本：Vue分為開發版本和生產版本。兩個版本的區別可以看官方注釋，開發版本是本地開發使用的，生產版本是實際部署使用的。生產版比開發版刪除了一些內容，進行了壓縮，更輕量級，適合部署。
開發者工具
Vue有一個官方的開發者工具vue-devtools，可以在瀏覽器上通過F12進行使用，可以查看Vue項目的各種信息，推薦使用。
https://github.com/vuejs/devtools-v6?tab=readme-ov-file#vue-devtools
如果可以登錄github，可以在github上下載代碼：
先選一個想下載的版本，
按github里提示的步驟一步一步進行就好了：
在命令行里git clone拉下來這個倉庫，
git clone -b v6.6.4 https://github.com/vuejs/vue-devtools.gitclone之后會多一個文件夾，進到這個文件夾里面，敲npm install和npm run build
cd vue-devtools
npm install
npm run build然后進瀏覽器頁面，找到拓寬程序頁面，打開開發者模式：
按安裝步驟，選擇這個加載未打包的拓展程序：
然后選shells下的chrome文件
如果下載的vue-devtools版本太舊了，瀏覽器不支持，可以按照這個方法進行修改：https://zhuanlan.zhihu.com/p/1927399384947065539
如果國內的網無法訪問github下載，可以在國內的非官方網站下載，極簡插件官網_Chrome插件下載_Chrome瀏覽器應用商店
下載完了之后，按安裝說明，拖到拓展程序頁面里就行了，但需要注意Vue2最好下載舊版vue-devtools，否則可能安裝了拓展程序，也無法使用。
添加完工具，可以把工具右下角的按鈕打開，
這樣在網頁中，點擊右邊這個圖標，并且設置顯示Vue這個工具的圖標，可以查看Vue工具的使用狀態：
如果工具在項目里不起效果，可以在項目入口文件main.js或者配置文件里加上這個配置，設置允許開發者工具：
Vue.config.devtools = true從一個Hello world開始
hello world Demo
先從一個Vue的小demo開始，熟悉的hello world。
為了理解Vue，這里不從腳手架開始，只是使用HTML開始編寫Vue。
我這里使用的是Js語法引入Vue，可以在官方的script語法里加一個type="text/javascript"，否則可能js不會生效。HTML <script> 標簽的 type 屬性。（這里其實就是設置一下script中的內容是javascript）。
為Vue準備組件應用的容器，這里的demo就是容器（對于一個樣式，想要他在頁面上使用，需要設定他在頁面的位置，Vue的掛載屬性可以讓這個容器和Vue綁定，如果沒有位置，組件無法顯示）
<body><div id="demo"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>新建Vue實例，使用new Vue()，該構造函數接收一個對象參數，該對象為配置對象，里面配置一系列參數。
el：把Vue實例和容器綁定。el的value可以是css選擇器，也可以是通過js語句獲取的DOM。
el是element的簡稱，指定Vue實例應用在哪個容器上。
demo里的代碼被稱為Vue模版。
<body><div id="demo"><p>Hello World</p></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">new Vue({el: '#demo', //el是element的簡稱，指定Vue實例應用在哪個容器上，值通常為css選擇器//這里也可以不寫選擇器，也可以寫document.getElementById('demo')})</script>
</body>data
data保存Vue實例中的數據，value為對象。
<script>new Vue({el: '#demo', //el是element的簡稱，指定Vue實例應用在哪個容易上，值通常為css選擇器//這里也可以不寫選擇器，也可以寫document.getElementById('demo')data:{keyWords:'Hello World',}})</script>要在DOM中使用data中保存的數據，有多種方法，其中一種是可以使用差值語法，用{{}}。
<body><div id="demo"><p>{{ keyWords }}</p></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">new Vue({el: '#demo', //el是element的簡稱，指定Vue實例應用在哪個容易上，值通常為css選擇器//這里也可以不寫選擇器，也可以寫document.getElementById('demo')data:{keyWords:'Hello World',}})</script>
</body>在該例子中，先有的容器demo，后有的Vue實例，在new Vue實例構建時，會對demo模版進行解析。
解析時，會看模板中有沒有Vue特有的一些語法（比如{{}}），如果有的話，對語法進行處理，并返回新的容器，用新的容器替換原來的整個容器。
容器和實例的對應關系
如果一個HTML中，有多個符合條件的el設置的選擇器，會發生什么：
先說結論，一個Vue實例只能應用在一個容器上。一個容器也只能對應一個Vue實例。
<body><div class="demo"><p>{{ keyWords }}</p></div><div class="demo"><p>{{ keyWords }}</p></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">new Vue({el: '.demo', //el是element的簡稱，指定Vue實例應用在哪個容易上，值通常為css選擇器//這里也可以不寫選擇器，也可以寫document.getElementById('demo')data:{keyWords:'Hello World',}})</script>
</body>在這段代碼中，設置了兩個class為demo的容器，而Vue實例的element設置的是class=demo的容器，所以有兩個容器都滿足條件。
這時的結果，vue實例會應用在第一個容器上，不會報錯。但由于Vue沒有應用在第二個容器上，第二個demo容器無法識別{{}}語法，會原樣顯示字符。
如果反過來，兩個Vue實例同時作用在一個容器中，后一個Vue實例的代碼不會生效。
<body><div class="demo"><p>{{ keyWords }},{{keyWords2}}</p></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">new Vue({el: '.demo', //el是element的簡稱，指定Vue實例應用在哪個容易上，值通常為css選擇器//這里也可以不寫選擇器，也可以寫document.getElementById('demo')data:{keyWords:'Hello World',}})new Vue({el: '.demo', //el是element的簡稱，指定Vue實例應用在哪個容易上，值通常為css選擇器//這里也可以不寫選擇器，也可以寫document.getElementById('demo')data:{keyWords2:'Hello World~~~~~~',}})</script>
</body>這里兩個Vue實例都應用在demo上，但demo容器已經和第一個Vue綁定，第二個Vue中的內容無法生效，會提示找不到后一個Vue中定義的data。
雖然Vue實例和容器是一一對應的，但是一個Vue實例可以生成多個子實例，也就是組件，組件也相當于是這個Vue示例，每個組件可以分別存放數據。
差值語法{{}}
該語法用于在容器中使用Vue實例中的數據。
{{}}中可以使用符合javascript語法的javascript語句，且必須返回的是值。如果{{}}中的內容不返回值，則無法解析。比如if(){}、for(){}這類的不能解析。
Vue是數據驅動的，也就是設置數據，然后把DOM和數據綁定，當數據改變時，頁面也會相應地改變。
進程)
)