## 一、普通html中引用 就是一個普通的html文件，通過 ```html <script src="vue.js" type="text/javascript" charset="utf-8"></script> ``` 引入vue； ## 二、單文件組件文件基本結構（.vue擴展名） ~~~xml <template> <div class="container"> </div> </template> <script type="text/ecmascript-6"> export default { data(){ return{ // 數據 }; }, components:{ // 組件注冊 }, beforeCreate(){ // 在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。 }, create(){ // 實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。 }, beforeMount(){ // 在掛載開始之前被調用：相關的 render 函數首次被調用。 }, mounted(){ // el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子。 }, beforeUpdate(){ // 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。 }, updated(){ // 由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。 // 當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環 }, beforeDestroy(){ // 實例銷毀之前調用。在這一步，實例仍然完全可用。 }, destroyed(){ // Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。 該鉤子在服務器端渲染期間不被調用。 }, computed:{ // 計算屬性 }, watch:{ // 數據監聽 }, methods:{ // 方法定義 } } </script> <style> // css 樣式 </style> ~~~