第一個Vue程序2.1Vue程序的一般結(jié)構(gòu)Vue實例插值表達(dá)式一、Vue簡介Vue（讀音/Vju?/，類似于View）是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue.js是基于MVVM模型的雙向數(shù)據(jù)綁定的JavaScript庫。Vue的核心是MVVM中的ViewModel，負(fù)責(zé)連接View和Model。既可以監(jiān)聽視圖層數(shù)據(jù)的變化，也可以綁定模型層的數(shù)據(jù)到視圖。關(guān)鍵詞Model（數(shù)據(jù)模型）View（視圖）ViewModel（視圖模型）一、Vue簡介1、頁面使用：鏈接vue.js文件獨立版本：下載到本地目錄，然后使用<script>標(biāo)簽引入。<scriptsrc="./js/vue.js"></script>cdn方式引入：：</script>2、項目中使用：裝包NPM方法npminstallvue-gyarn方法yarnaddvue-g二、Vue程序的一般結(jié)構(gòu)第一步：新建一個html文件，導(dǎo)入Vue.js第二步：在頁面中定義一個用于顯示網(wǎng)頁內(nèi)容的DOM區(qū)域。（被Vue應(yīng)用實例作用的）或者使用cdn引入<divid="app"></div>二、Vue程序的一般結(jié)構(gòu)第三步：通過new關(guān)鍵字以及Vue({})構(gòu)造函數(shù)，創(chuàng)建Vue實例Vue構(gòu)造函數(shù)的參數(shù)為一個對象，包含很多成員，都是Vue實例的選項成員。<script>varvm=newVue({//選項成員})<script>實例化選項成員說明el掛載點data數(shù)據(jù)成員…………<script>varvm=newVue({el:'#app',//掛載點data:{//數(shù)據(jù)message:'HelloWorld'}})</script>實例化二、Vue程序的一般結(jié)構(gòu)第四步：使用Vue的語法，顯示數(shù)據(jù)到掛載點對應(yīng)的DIV中。<divid="app">

<!--將msg綁定到p元素--><p>{{message}}</p></div>插值語法：{{JavaScript表達(dá)式}}當(dāng)頁面渲染時，模板中的{{數(shù)據(jù)名}}會被替換為實際的數(shù)據(jù)二、Vue程序的一般結(jié)構(gòu)完整代碼三、Vue實例創(chuàng)建Vue實例時，需要用對象作為Vue構(gòu)造函數(shù)的參數(shù)，參數(shù)中列舉各個選項。如el、data、methods等。選項成員說明el掛載點data數(shù)據(jù)成員methods方法computed計算屬性…………三、Vue實例el:掛載點：決定Vue實例的作用范圍。必須有的成員。Vue實例的作用范圍是什么呢？是el對應(yīng)的DOM元素及后代元素是否可以使用其他的選擇器？可以是其他的選擇器，建議用ID選擇器三、Vue實例data：Vue中的數(shù)據(jù)存儲在這里。以鍵值對的方式，組合成一個對象。data對象中存儲的數(shù)據(jù)，是可以在插值表達(dá)式中直接被訪問的。data對象中可以存儲任何類型的數(shù)據(jù)。三、Vue實例插值表達(dá)式：{{}}這是Vue中特有的文本數(shù)據(jù)綁定的模板語法，可以把Vue實例中的數(shù)據(jù)，顯示到頁面視圖中。小結(jié)本節(jié)介紹了第一個Vue程序的結(jié)構(gòu)、vue實例的創(chuàng)建以及插值表達(dá)式的使用。Vue中的選項成員2.2方法計算屬性監(jiān)聽一、方法methodsVue實例常用選項成員：選項說明el掛載點，唯一根元素dataVue實例數(shù)據(jù)對象methodsVue實例中的方法computed計算屬性watch監(jiān)聽數(shù)據(jù)變化的成員一、方法methodsmethods屬性用來集中定義方法，其值為一個對象。可以定義多個javascript方法，方法定義之間用逗號分隔。通過Vue實例可以直接訪問這些方法。在定義的方法中，如果訪問data的數(shù)據(jù)，可以直接通過this.屬性名的形式來訪問。this指向Vue實例本身。定義在methods屬性中的方法可以作為頁面中的事件處理方法被調(diào)用。

methods定義方法

基本語法：

ES6方法化簡格式傳統(tǒng)js鍵值對格式一、方法methods事件綁定：在Vue中，v-on指令用來監(jiān)聽事件，即為元素綁定事件。語法格式：

v-on:事件名="方法調(diào)用或表達(dá)式"如果被調(diào)用方法沒有形參，那么調(diào)用方法的（）可以省略。<divid="app"><button

v-on:事件名="方法(實參)">點擊</button></div>這里是方法名或者語句表達(dá)式事件綁定指令v-on綁定的方法必須在vue實例methods成員定義。v-on:可以簡化為@案例：點擊按鈕，年齡增長點擊按鈕，頁面中年齡增加1。v-on綁定事件格式可以化簡為：@事件名<divid="app"><h1>姓名：{{name}}</h1><h2>年齡：{{age}}</h2><!--綁定單擊事件--><buttonv-on:click="age++">年齡增長</button></div>varvm=newVue({el:'#app',data:{name:"張三",age:18}});初始頁面結(jié)構(gòu)定義vm實例<divid="app"><h1>姓名：{{name}}</h1><h2>年齡：{{age}}</h2><!--綁定單擊事件--><button@click="age++">年齡增長</button></div>初始頁面結(jié)構(gòu)案例：點擊按鈕，頁面文字變化當(dāng)你點擊按鈕時，頁面上顯示的消息會更新。<divid="app">

<!--為button按鈕綁定click事件-->

<button@click="showInfo">請單擊</button>

<p>{{msg}}</p></div>varvm=newVue({el:'#app',data:{msg:'好好學(xué)習(xí)，天天向上'},methods:{

//定義事件處理方法showInfoshowInfo:function(){this.msg='Daydayup，goodgoodstudy!'}}})初始頁面結(jié)構(gòu)定義vm實例綜合案例：計數(shù)器點擊按鈕減一，減到0不再減了點擊按鈕加一，加到10不再加了二、計算屬性computedcomputer，即計算屬性，也是Vue的選項成員。computer用來集中定義計算屬性，其值為一個對象。當(dāng)有一些數(shù)據(jù)需要隨著其他數(shù)據(jù)變動而變動時，就需要用computed計算屬性來定義。計算屬性結(jié)果會被緩存起來，當(dāng)依賴的響應(yīng)式屬性發(fā)生變化時，才會重新計算，返回最終結(jié)果。語法格式：計算屬性表面形式是方法，必須有返回值。案例：用計算屬性顯示總金額點擊按鈕，數(shù)量增減，總金額跟著變化。總金額=單價*數(shù)量var

vm=newVue({el:'#app',data:{price:20,

num:0},computed:{

totalPrice:function(){//總價格returnthis.price*this.num

}}})<divid="app"><p>總價格：{{totalPrice}}</p><p>單價：{{price}}</p><p>數(shù)量：{{num}}</p><div><button@click="num<=0?0:num--">減少數(shù)量</button><button@click="num++">增加數(shù)量</button></div></div>計算屬性表面是方法,本質(zhì)是屬性！三、監(jiān)聽watch數(shù)據(jù)監(jiān)聽器（watch）：作用：用來監(jiān)測Vue實例中的數(shù)據(jù)變動。watch的值為一個對象，可以定義多個監(jiān)聽。監(jiān)聽是Vue.js提供的一種用來監(jiān)聽和響應(yīng)Vue實例中的數(shù)據(jù)變化的方式。對數(shù)據(jù)進(jìn)行監(jiān)聽，一旦數(shù)據(jù)發(fā)生變化，則觸發(fā)相應(yīng)函數(shù)的執(zhí)行，以達(dá)到改變其他數(shù)據(jù)的目的。語法格式：watch:{

//要監(jiān)視的數(shù)據(jù)變量名:回調(diào)函數(shù)

//newValue是變量的新值，oldValue是舊值

變量名：function(newValue,oldValue){

}}watch:{

變量名(newValue,oldValue){

}}案例：監(jiān)聽字符串變量的值的變化用watch監(jiān)聽變量msg的變化，控制臺中輸出消息。在瀏覽器的控制臺中查看運行效果：watch監(jiān)測的是數(shù)據(jù)變量的變化，watch的方法名必須與data中的變量名一致。watch選項補充：v-modelv-model指令是雙向數(shù)據(jù)綁定指令，用于將表單元素與Vue中的變量形成雙向綁定關(guān)系。這樣，你可以通過頁面，操作表單元素，就可以修改vue中的數(shù)據(jù)變量。雙向綁定后，可以把數(shù)據(jù)從視圖層傳遞到模型層。案例：應(yīng)用監(jiān)聽計算人民幣與美元換算。

應(yīng)用監(jiān)聽屬性實現(xiàn)人民幣和美元之間的匯率換算