您好,登錄后才能下訂單哦!
一、vue是什么
Vue 是一套用于構(gòu)建用戶界面的 漸進(jìn)式框架 。
壓縮后僅有17kb
二、vue環(huán)境搭建
你直接下載并用 <script> 標(biāo)簽引入, Vue 會(huì)被注冊(cè)為一個(gè)全局變量。
但在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝。
這里推薦一下是用淘寶的cnpm,非常的快
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后進(jìn)行安裝
# 全局安裝 vue-cli npm install --g vue-cli # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目 vue init webpack my-project # 安裝依賴,走你 cd my-project npm run dev
三、第一個(gè)vue應(yīng)用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <div>{{title}}</div> <button @click="say()">單擊事件</button></br> <div>今年{{age}}</div> <input v-model="age"> </div> </body> </html> <script src="lib/vue.js"></script> <script src="js/hello.js"></script> var app = new Vue({ //通過(guò)構(gòu)造函數(shù)Vue就可以創(chuàng)建一個(gè)Vue的根實(shí)例,并啟動(dòng)Vue應(yīng)用 el: '#app', //指定頁(yè)面上一個(gè)已經(jīng)存在的DOM元素來(lái)掛載Vue實(shí)例 data: { //對(duì)象的數(shù)據(jù) title: 'hello vue', //通過(guò)插值語(yǔ)法{{}}綁定 age: 22 //通過(guò)v-model進(jìn)行雙向數(shù)據(jù)綁定 }, methods: { //對(duì)象的方法 say: function(){ console.log(this.title); } }, watch: { //監(jiān)聽(tīng)數(shù)據(jù)的變化 'age': function(newVal, oldVal){ console.log(newVal, oldVal); } } });
四、Vue生命周期
每個(gè)Vue 實(shí)例創(chuàng)建時(shí),都會(huì)經(jīng)歷一系列的初始化過(guò)程,同時(shí)也會(huì)調(diào)用相應(yīng)的生命周期鉤子,我們可以利用這些鉤子,在合適的時(shí)機(jī)執(zhí)行我們的業(yè)務(wù)邏輯。
大體上的生命周期就是:創(chuàng)建(created)---掛載(mounted)---銷毀(destroy)
Vue 的生命周期鉤子比較常用的有:
• created 實(shí)例創(chuàng)建完成后調(diào)用,此階段完成了數(shù)據(jù)的觀測(cè)等, 但尚未掛載, $el 還不可用。 需要初始化處理一些數(shù)據(jù)時(shí)會(huì)比較有用.
• mounted el 掛載到實(shí)例上后調(diào)用, 一般我們的第一個(gè)業(yè)務(wù)邏輯會(huì)在這里開(kāi)始。
• beforeDestroy 實(shí)例銷毀之前調(diào)用。 主要解綁一些使用addEventListener 監(jiān)聽(tīng)的事件等。
var app =new Vue({ el: '# app', data: { a: 2 } , created: function () { console.log(this.a); //2 }, mounted: function () { console.log(this.el); //<div id =”app”></div> } });
完整的一個(gè)生命周期圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。