【Vue.js基礎筆記】數據綁定，指令，事件
vue實例和數據綁定
1. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
通過構造函數 Vue 就可以創建一個 Vue 的根實例，並啟動 Vue 應用---入口
var app ＝new Vue({
el:‘‘,
data:{
}
})
2. 必不可少的一個選項就是 el 。 el 用於指定一個頁面中己存在的 DOM 元素來掛載 Vue實例,可以是標簽。也可以是css語法
3. 通過 Vue 實例的 data 選項，可以聲明應用內需要雙向綁定的數據。建議所有會用到的數據都預先在 data 內 聲明，這樣不至於將數據散落在業務邏輯中，難以維護。也可以指向一個已經有的變量
4. 掛載成功後，我們可以通過
app.$el
來訪問該元素。Vue 提供了很多常用的實例屬性與方法，都以
el,app.
---訪問data元素的屬性-- 直接app.屬性名，app.msg
生命周期鉤子
jquery---$(document).ready()
* created 實例創建完成後調用，此階段完成了數據的觀測等，但尚未掛載， $el 還不可用。需要初始化處理一些數據時會比較有用，後面章節將有介紹．----還未掛載
* mounted el 掛載到實例上後調用，一般我們的第一個業務邏輯會在這裏開始 。相當於 $(document).ready()---剛剛掛載
*beforeDestroy 實例銷毀之前調用。主要解綁一些使用 addEventListener 監聽的事件等。
文本插值和表達式
語法：使用雙大括號（ Mustache 語法）“｛｛｝｝”是最基本的文本插值方法，它會自動將我們雙向綁定的數據實時顯示出來，用法在｛｛｝｝中，除了簡單的綁定屬性值外，還可 以使用 JavaScript 表達式進行簡單的運算 、 三元運算等
---實例
Vue .js 只支持單個表達式，不支持語句和流控制。
{{ 6+6 *3}}---可以進行簡單的運算 <br>
{{ 6<3 ? msg :a}}---可以用三元運算符 <br>
{{if(6>3){}}-----註意：文本插值的形式，其中不能書寫表達式,支持單個表達式
過濾器
Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 對數據進行過濾，經常用於格式化文本，比如字母全部大寫、貨幣千位使用逗號分隔等。過濾的規則是自定義的， 通過給 Vue 實例添加選項 filters 來設置過濾器：{{ data | filter1 |filter2}}
{{date | formatDate(66,99)}} 中的第一個和第二個參數，分別對應過濾器的第二個和第三個參數
指令和事件
指令（ Directives ）是 Vue 模板中最常用的一項功能，它帶有前綴 v－，能幫我們快速完成DOM操作，循環渲染，顯示和隱藏。
本節目標 v-text , v-html , v-bind , v-on
v-text:—————-解析文本 和{{ }} 作用一樣
v-html:————— 解析html
v-bind—————–v-bind 的基本用途是動態更新 HTML 元素上的屬性，比如 id 、class 等,本節只介紹基本章節，後面章節會更加深入詳細講述
v-on——————它用來綁定事件監聽器
v-on具體介紹
在普通元素上， v-on 可以監聽原生的 DOM 事件，除了 click 外，還有dblclick、 keyup, mousemove 等。表達式可以是一個方法名，這些方法都寫在 Vue 實例的 methods 屬性內，並且是函數的形式，函數內的 this 指向的是當前 Vue 實例本身，因此可以直接使用 this.xxx 的形式來訪問或修改數據
vue中用到的所有方法都定義在methods中
兩個按鈕，點擊同時加數字？？？？思考
語法糖
語法糖是指在不影響功能的情況下 ， 添加某種簡潔方法實現同樣的效果 ， 從而更加方便程
序開發。
v-bind ——> : (冒號)
v-on ——> @
【Vue.js基礎筆記】數據綁定，指令，事件