1.什么是VUE?

????????Vue就是一套用于構建用戶界面的漸進式框架,與其他框架不同的是,Vue被設計為可以自底向上逐漸應用.Vue的核心庫只關注圖層,不僅容易上手,還便于與第三方庫或既有項目整合.

2.Vue的優點

• 體積小

• 高效率

• 雙向數據綁定,簡化Dom操作

? ? ? ? ? 通過MVVM思想實現數據的雙向綁定，讓開發者不用再操作dom對象, 把更多的精力投入到業務邏輯上

• 生態豐富,學習成本低

第一個Vue程序

1. 導入開發版本的Vue.js

2. 創建Vue實例對象,設置el屬性和data屬性

3. 使用簡潔的模板語法把數據渲染到頁面上

????????????????<div id="app">{{message}}<div/>
????????????????var app=new Vue({
????????????????el:"#app",
????????????????data:{
????????????????message:"Hello Vue!"
????????????????}
????????????????})

代碼解析:

????????{{變量}}模板語法,插值表達式獲取數據

????????new Vue();創建一個Vue對象(VM對象)

????????el:數據掛載的dom對象

????????Vue會管理el選項命中的元素及其內部的后代元素

????????可以使用其他的選擇器,但是建議使用ID選擇器

????????可以使用其他的閉合標簽,不能使用HTML和BODY

????????data:{message:"hello world"} model數據

????????Vue中用到的數據定義在data中

????????data中可以寫復雜類型的數據,如對象,數組

Vue指令

? ?1.v-html_v-text

????????<!-- 創建一個標簽 -->
?? ??? ?<!--?
?? ??? ??? ?{{ message }} 插入一個值,不影響標簽中的其他內容
?? ??? ??? ?v-html="message",v-text="message" 會覆蓋標簽中其他內容
?? ??? ??? ?
?? ??? ??? ?{{ message }},v-text="message" 不能解析內容中html標簽
?? ??? ??? ?v-html="message" 可以解析內容中html標簽
?? ??? ? -->
?? ??? ?<div id="app">
?? ??? ??? ?<p>{{ message }} aaaa</p>
?? ??? ??? ?<p v-html="message">aaaa</p>
?? ??? ??? ?<p v-text="message">aaaa</p>
?? ??? ?</div>

????????

? ? 2.v-on

????????作用是為元素綁定事件 事件名不需要寫on指令可以簡寫為@ 綁定的方法定義在methods屬性中,可以傳入自定義參數

? ?3.v-model

? ? ? ?作用是便捷的設置和獲取表單元素的值 綁定的數據會和表單元素值相關聯 綁定的數據表單元素的值 雙向數據綁定

? 4.v-show

????????作用是根據真假切換元素的顯示狀態 原理是修改元素的display，實現顯示隱藏 指令后面的內容，最終都會解析為布爾值 值為true元素顯示，值為false元素隱藏 數據改變之后，對應元素的顯示狀態會同步更新

? 5.v-if

????????作用是根據表達式的真假切換元素的顯示狀態 本質是通過操縱dom元素來切換 顯示狀態表達式的值為true，元素存在于dom中，為false，從dom中移除 頻繁的切換v-show，反之使用v-if，前者的切換消耗小

? 6.v-bind

????????作用是為元素綁定屬性 完整寫法是v-bind：屬性名 簡寫的話可以直接省略v-bind，只保留：屬性名

? 7.v-for

????????作用是根據數據生成列表結構 數組經常和v-for結合 使用語法是（item，index）in數據 item 和index 可以結合其他指令一起使用 數組長度的更新會同步到頁面上是響應式的 為循環綁定一個key值 :key=”值” 盡可能唯一

Vue 實例生命周期

????????每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數 據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時 在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添 加自己的代碼的機會。