JavaScript之Vue.js【入門基礎(chǔ)】
本篇將簡(jiǎn)單介紹一下Vue.js,并在Node.js環(huán)境下搭建一個(gè)簡(jiǎn)單的Demo。
一、簡(jiǎn)介
我個(gè)人理解,Vue.js是一套前端視圖層的框架,它只關(guān)心視圖展示和數(shù)據(jù)綁定,它的一些語法與Angular 1非常相似,如果有Angular 1相關(guān)的使用經(jīng)驗(yàn),上手會(huì)非???。
相比較其他的React、Angular 2等MVVM框架,它更加的輕量,效率也更高,也能更好的與其他庫集成。
它擁有以下幾個(gè)出色的特性:
- 數(shù)據(jù)雙向綁定
- 指令
- 模板
- 組件
當(dāng)前最新的版本為2.1.4。后續(xù)也會(huì)在這個(gè)版本下演示Demo。
二、環(huán)境準(zhǔn)備
下載安裝Node.js環(huán)境,安裝成功后在命令行窗口依次執(zhí)行以下命令:
> npm install bower -g > npm install express-generator -g
安裝完成后進(jìn)入工程目錄(隨意新建一個(gè)目錄),依次執(zhí)行以下命令,創(chuàng)建一個(gè)名為vue-demo的項(xiàng)目:
> express vue-demo --view=ejs > cd vue-demo > npm install > bower init > bower install requirejs --save > bower install vue --save
所有命令執(zhí)行成功后,在項(xiàng)目根目錄手動(dòng)增加一個(gè)名為.bowerrc文件,內(nèi)容如下
{ "directory": "public/plugins/" }
為了后面顯示的demo頁面好看一點(diǎn),再引入bootstrap。這步不是必須的
> bower install bootstrap --save
最終的目錄結(jié)構(gòu)如下
三、Hello World
按照慣例,學(xué)習(xí)一個(gè)新的語言,都要先問候一下我們這個(gè)精彩的世界。修改 views/index.ejs 文件內(nèi)容
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Index</title> <!-- Bootstrap --> <link href="plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div id="app" class="container"> <input type="text" v-model="message" /> <p>{{message}}</p> </div> <!-- requirejs main --> <script src="plugins/requirejs/require.js" data-main="javascripts/index.js"></script> </body> </html>
在 public/javascrips 目錄里新建一個(gè)文件 index.js ,內(nèi)容如下
/// <reference path="../plugins/requirejs/require.js" /> require.config({ baseUrl: "plugins", paths: { jquery: "jquery/dist/jquery.min", bootstrap: "bootstrap/dist/js/bootstrap.min", vue: "vue/dist/vue.min" } }); require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) { var vm = new Vue({ el: "#app", data: { message: "Hello world!" } }); });
在命令行窗口的項(xiàng)目目錄下執(zhí)行命令 npm start ,訪問 http://localhost:3000/
修改文本框里的內(nèi)容,下方文字也會(huì)跟著變化
這是一個(gè)簡(jiǎn)單的雙向數(shù)據(jù)綁定的例子。通過Vue類型構(gòu)造了一個(gè)根實(shí)例,分別給 el 屬性賦值需要綁定的頁面元素ID,給 data 屬性賦值需要綁定的數(shù)據(jù)。在頁面里,通過給 input 元素添加指令 v-model ,綁定到數(shù)據(jù)的message屬性。在 p 元素里通過表達(dá)式 {{message}} 綁定message屬性。這樣頁面就能直接展示綁定的數(shù)據(jù)內(nèi)容,在改變 input 的內(nèi)容時(shí),也能同步改變下方文本內(nèi)容。
四、屬性、方法
通過Vue實(shí)例可以直接訪問綁定的數(shù)據(jù)的屬性。修改 index.js 文件內(nèi)容:
require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) { var d = { message: "Hello world!" }; var vm = new Vue({ el: "#app", data: d }); // 屬性代理 console.log('vm.message = ' + vm.message); console.log('vm.message === d.message? ' + (vm.message === d.message)); });
訪問頁面,查看瀏覽器控制臺(tái)顯示如下:
從上面的例子可以看到, vm 實(shí)例“代理”了綁定的數(shù)據(jù)對(duì)象,通過實(shí)例可以直接訪問數(shù)據(jù)對(duì)象里的屬性。
除了能“代理”數(shù)據(jù)對(duì)象, vm 實(shí)例也有一些內(nèi)置屬性和方法,這些屬性和方法都有 $ 前綴。再修改 index.js 內(nèi)容:
require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) { var d = { message: "Hello world!" }; var vm = new Vue({ el: "#app", data: d }); // 屬性代理 console.log('vm.message = ' + vm.message); console.log('vm.message === d.message? ' + (vm.message === d.message)); console.log('vm.$data = ' + JSON.stringify(vm.$data)); console.log('vm.$data === d? ' + (vm.$data === d)); console.log('vm.$el = ' + vm.$el); console.log('vm.$el === div.#app? ' + (vm.$el === document.getElementById('app'))); // 內(nèi)置方法 vm.$watch('message', function (oldVal, newVal) { console.log('oldVal is: ' + oldVal); console.log('newVal is: ' + newVal); }); });
刷新頁面,查看控制臺(tái):
- $data:Vue實(shí)例的數(shù)據(jù)對(duì)象。通過這個(gè)屬性可以訪問到原始數(shù)據(jù)對(duì)象。
- $el:Vue實(shí)例掛載的DOM元素對(duì)象。
修改頁面文本框的內(nèi)容,查看控制臺(tái):
$watch:Vue實(shí)例監(jiān)視屬性變化的內(nèi)置方法。當(dāng)被監(jiān)視的屬性改變時(shí),將會(huì)觸發(fā)這個(gè)方法。
五、生命周期鉤子
Vue也提供了在實(shí)例化時(shí)各個(gè)狀態(tài)變化過程中觸發(fā)的事件方法。修改 index.js 內(nèi)容:
require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) { var d = { message: "Hello world!" }; var vm = new Vue({ el: "#app", data: d, beforeCreate: function () { console.log('beforeCreate is triggered.') }, created: function () { console.log('created is triggered.') }, beforeMount: function () { console.log('beforeMount is triggered.') }, mounted: function () { console.log('mounted is triggered.') }, beforeUpdate: function () { console.log('beforeUpdate is triggered.') }, updated: function () { console.log('updated is triggered.') }, beforeDestroy: function () { console.log('beforeDestroy is triggered.') }, destroyed: function () { console.log('destroyed is triggered.') } }); });
刷新頁面,查看控制臺(tái):
修改文本框內(nèi)容,查看控制臺(tái):
- beforeCreate:在實(shí)例初始化之后,數(shù)據(jù)觀測(cè)(data observer) 和 event/watcher 事件配置之前被調(diào)用。
- created:實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。這個(gè)時(shí)候數(shù)據(jù)觀測(cè)(data observer),屬性和方法的運(yùn)算,watch/event 事件回調(diào)已經(jīng)完成。
- beforeMount:在掛載開始之前被調(diào)用:相關(guān)的 render 函數(shù)首次被調(diào)用。
- mounted: el 被新創(chuàng)建的 vm.$el 替換,并掛載到實(shí)例上去之后調(diào)用該鉤子。
- beforeUpdate:數(shù)據(jù)更新時(shí)調(diào)用,發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。
- updated:由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁,在這之后會(huì)調(diào)用該鉤子。這個(gè)時(shí)候DOM已經(jīng)更新完成。
- beforeDestroy:實(shí)例銷毀之前調(diào)用。在這一步,實(shí)例仍然完全可用。
- destroyed:Vue 實(shí)例銷毀后調(diào)用。調(diào)用后,Vue 實(shí)例指示的所有東西都會(huì)解綁定,所有的事件監(jiān)聽器會(huì)被移除,所有的子實(shí)例也會(huì)被銷毀。
下面是完整的生命周期圖示:
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,同時(shí)也希望多多支持腳本之家!
- 詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之router-link
- 詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之router.push()
- VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表(1)
- Vue.js基礎(chǔ)知識(shí)匯總
- 詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子
- vue.js入門教程之基礎(chǔ)語法小結(jié)
- 最細(xì)致的vue.js基礎(chǔ)語法 值得收藏!
- Vue.js基礎(chǔ)指令實(shí)例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))
- Vue.js 2.0學(xué)習(xí)教程之從基礎(chǔ)到組件詳解
- vue雙花括號(hào)的使用方法 附練習(xí)題
相關(guān)文章
VUE+element開發(fā)后臺(tái)管理的搜索功能
這篇文章主要為大家詳細(xì)介紹了VUE+element開發(fā)后臺(tái)管理的搜索功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04使用md5在vue中的axios請(qǐng)求時(shí)加密API問題
這篇文章主要介紹了使用md5在vue中的axios請(qǐng)求時(shí)加密API問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問題
這篇文章主要介紹了解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue-admin-template框架搭建及應(yīng)用小結(jié)
?vue-admin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板(最少精簡(jiǎn)版),可作為模板進(jìn)行二次開發(fā),這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下2023-05-05vue使用vuedraggable實(shí)現(xiàn)嵌套多層拖拽排序功能
這篇文章主要為大家詳細(xì)介紹了vue使用vuedraggable實(shí)現(xiàn)嵌套多層拖拽排序功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04腳手架(vue-cli)創(chuàng)建Vue項(xiàng)目的超詳細(xì)過程記錄
用vue-cli腳手架可以快速的構(gòu)建出一個(gè)前端vue框架的項(xiàng)目結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于腳手架(vue-cli)創(chuàng)建Vue項(xiàng)目的超詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05詳解Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04