Vue實(shí)例和數(shù)據(jù)綁定
通過Vue可以創(chuàng)造出一個(gè)Vue的實(shí)例
var app = new Vue({
el:'',
data:{
}
})
-
el是必須的，用于指定一個(gè)已經(jīng)存在的DOM元素來掛載Vue實(shí)例担猛。 - 通過
data選項(xiàng)，可以聲明應(yīng)用內(nèi)需要的雙向綁定的數(shù)據(jù)涨椒。 - 掛載成功后，可以通過
app.$el
來訪問該元素。同時(shí)Vue也提供了很多實(shí)例的屬性和方法累舷。
如果訪問data的屬性，可以直接
app.msg
生命周期鉤子
-
createdVue實(shí)例創(chuàng)建完成后調(diào)用夹孔，完成對(duì)數(shù)據(jù)的觀測(cè)工作被盈，但是尚未掛載，$el并不可用搭伤『Σ叮可用于對(duì)數(shù)據(jù)的初始化工作。 -
mounted掛載到實(shí)例上后馬上調(diào)用闷畸，一般用于處理第一個(gè)業(yè)務(wù)邏輯。 -
beforeDestroy實(shí)例銷毀前調(diào)用吞滞，一般用于addEventListener監(jiān)聽事件佑菩。
文本插值與表達(dá)式
語法:使用雙大括號(hào)( Mustache 語法)“{{}}”是最基本的文本插值方法盾沫，它會(huì)自動(dòng)將我們雙向綁定的數(shù)據(jù)實(shí)時(shí)顯示出來，
用法：{{-----}}除了可以綁定屬性外殿漠，還可以使用JS的表達(dá)式進(jìn)行一些簡(jiǎn)單的運(yùn)算赴精、三元運(yùn)算
Tips：Vue只支持單個(gè)的表達(dá)式，不支持語句和控制流绞幌。
{{1+2*3}}進(jìn)行簡(jiǎn)單運(yùn)算
{{6<7?msg:a}}進(jìn)行三元運(yùn)算
{{var a = 6}}也是多行表達(dá)式
var a ;a = 6;
過濾器
Vue.支持在{{---}}插值的尾部添加一小管道符 “ | ” 對(duì)數(shù)據(jù)進(jìn)行過濾蕾哟，經(jīng)常用于格式化文本，比如字母全部大寫莲蜘、貨幣千位使用逗號(hào)分隔等谭确。
過濾的規(guī)則是自定義的， 通過給 Vue 實(shí)例添加選項(xiàng) filters 來設(shè)置
過濾器：{{ data | filter1 |filter2}}
{{date | formatDate(66,99)}}
中的第一個(gè)和第二個(gè)參數(shù)票渠，分別對(duì)應(yīng)過濾器的第二個(gè)和
第三個(gè)參數(shù)逐哈。第一個(gè)參數(shù)是data
指令和事件
指令（ Directives ）是 Vue 模板中最常用的一項(xiàng)功能，它帶有前綴 v－问顷，能幫我們快速完成DOM操作昂秃。循環(huán)渲染。
v--text:—————-解析文本 和{{ }} 作用一樣
v--html:————— 解析html
v--bind:—————–v--bind 的基本用途是動(dòng)態(tài)更新 HTML 元素上的屬性杜窄，比如 id 肠骆、class 等。
v--on:——————它用來綁定事件監(jiān)聽器
語法糖
語法糖是指在不影響功能的情況下 塞耕， 添加某種簡(jiǎn)潔方法實(shí)現(xiàn)同樣的效果 蚀腿， 從而更加方便程
序開發(fā)。
v-bind——> : (冒號(hào))
v-on ——> @
一些題目
-
代碼實(shí)戰(zhàn)：
要求：
渲染文本到頁(yè)面
渲染HTML到頁(yè)面
動(dòng)態(tài)綁定屬性（任意屬性均可）
綁定一個(gè)事件
必須使用到過濾器
上述要求必須使用到荷科，v-text,v-html,v-bind,v-on,過濾器唯咬，內(nèi)容不限，場(chǎng)景不限畏浆，旨在對(duì)本節(jié)課的指令事件進(jìn)行練習(xí).
代碼：https://github.com/shlroland/vue.js-2rd-demo/blob/master/index.html
-
請(qǐng)用代碼寫出一個(gè)包含el和data選項(xiàng)的vue實(shí)例,并掛載到頁(yè)面中id為app的div上胆胰。
<div id="app">
{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '我是msg',
}
})
</script>
-
第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子？
beforeCreate//觸發(fā)
created//實(shí)例完成后調(diào)用
beforeMount//觸發(fā)
mounted//掛載到實(shí)例上調(diào)用
