整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
今天的JavaScript世界中，有一股風(fēng)頭如熱鋒在飛，那就是Angular.js，它在前端開(kāi)發(fā)界以強(qiáng)大、靈活和愉悅的體驗(yàn)吸引了前端開(kāi)發(fā)者出現(xiàn)一 рай堂。今天，讓我們一起看看Angular.js的爆款之謎，并探討一下為何這個(gè)寵兒在JavaScript中擁有這么高的相信空間。
一、初識(shí)Angular.js
Angular.js是一個(gè)開(kāi)源的JavaScript框架，由Google開(kāi)發(fā)。它主要用于構(gòu)建用戶界面，幫助開(kāi)發(fā)者以聲明式方法構(gòu)建動(dòng)態(tài)的用戶界面。Angular.js的設(shè)計(jì)靈活，可以為活躍的WEB應(yīng)用程序添加交互性。
二、Angular.js的特點(diǎn)
三、angular的理念
Angular.js的核心理念是持續(xù)的創(chuàng)新。Google以技術(shù)升級(jí)和創(chuàng)新為ний錄發(fā)達(dá)了這一公司的文化愿景。Angular.js的設(shè)計(jì)追求簡(jiǎn)練，只提供了必需的功能和直觀的更新流程，讓開(kāi)發(fā)者透過(guò)Angular的誘之不得。
四、Angular.js的開(kāi)發(fā)優(yōu)勢(shì)
：了解AngularJS
AngularJS是一款非常優(yōu)秀的前端高級(jí) JS 框架，由 Misko Hevery 等人創(chuàng)建 2009 年被 Google 收購(gòu)，用于其多款產(chǎn)品 有一個(gè)全職的開(kāi)發(fā)團(tuán)隊(duì)繼續(xù)開(kāi)發(fā)和維護(hù)這個(gè)庫(kù) 有了這一類框架就可以輕松構(gòu)建 SPA 應(yīng)用程序 single page web application 通過(guò)指令擴(kuò)展了 HTML，通過(guò)表達(dá)式綁定數(shù)據(jù)到 HTML。
二：AngularJS的優(yōu)勢(shì)
更少的代碼，實(shí)現(xiàn)更強(qiáng)勁的功能
.帶領(lǐng)前端進(jìn)入MVC時(shí)代
mvc模式：Model（模型）是應(yīng)用程序的核心，指的是程序在數(shù)據(jù)庫(kù)中存儲(chǔ)數(shù)據(jù)。
View（視圖）是應(yīng)用的界面，將數(shù)據(jù)庫(kù)里的數(shù)據(jù)展現(xiàn)出來(lái)，展現(xiàn)給程序的使用者。
Controller（控制器）處理用戶的交互行為，程序使用者更改數(shù)據(jù)，由控制器接受并發(fā)送給模型。
三：AngularJS的特性
MVC
.模塊化
自動(dòng)化雙向數(shù)據(jù)綁定 使用{{ }}對(duì)動(dòng)態(tài)數(shù)據(jù)綁定，綁定到元素的innerHTML
指令系統(tǒng) ng-
表單驗(yàn)證
HTML組件化
.Angular 在構(gòu)建 增加、查詢、修改、刪除的頁(yè)面應(yīng)用時(shí)能發(fā)揮最大優(yōu)勢(shì)。
四：AngularJS語(yǔ)法特點(diǎn)
Angular 最大程度的減少了頁(yè)面上的 DOM 操作；
讓 JavaScript 中專注業(yè)務(wù)邏輯的代碼；
通過(guò)簡(jiǎn)單的指令結(jié)合頁(yè)面結(jié)構(gòu)與邏輯數(shù)據(jù)；
通過(guò)自定義指令實(shí)現(xiàn)組件化編程；
代碼結(jié)構(gòu)更合理；
維護(hù)成本更低；
Angular 解放了傳統(tǒng) JavaScript 中頻繁的 DOM 操作
五：AngularJS的用法
1.編寫(xiě)第一個(gè)Angular應(yīng)用
當(dāng)網(wǎng)頁(yè)加載完畢，AngularJS 自動(dòng)開(kāi)始執(zhí)行； HTML 頁(yè)面中 ng-xxx 的屬性稱之為指令（Directive）； ng-app 指令告訴 AngularJS，<html> 元素是 AngularJS 應(yīng)用程序管理的邊界； {{ }} 雙花括號(hào)里面的叫做數(shù)據(jù)綁定表達(dá)式，可以是任何有效的JavaScript值、變量或語(yǔ)句。而在頁(yè)面上顯示的是表達(dá)式計(jì)算后的結(jié)果值。 | 管道符號(hào)可以給表達(dá)式添加過(guò)濾器，如 | number:2， |currency
<html ng-app>
<head></head>
<body>
{{"現(xiàn)在開(kāi)始學(xué)習(xí)Angular"}}
</body>
</html>
2.Module.controller() 控制器
第二行代碼創(chuàng)建了一個(gè)名為userCtrl的控制器，以及一個(gè)控制器函數(shù) 控制器函數(shù)接受一個(gè)名為$scope的參數(shù)
var app = angular.module(“myApp”, []); //myApp模塊名 app是模塊實(shí)例
app.controller(“userCtrl” ,function($scope){ //userCtrl是控制器的名字
$scope.name= “李雷和韓梅梅”; //$scope用來(lái)保存數(shù)據(jù)，定義方法
});
由于篇幅會(huì)很長(zhǎng)，又考慮到條友們可能會(huì)沒(méi)有耐心看很長(zhǎng)的篇章，所以本期就寫(xiě)到這里，感興趣的同學(xué)可以關(guān)注小編，小編會(huì)繼續(xù)發(fā)送文章的！
為了感謝觀看，小編準(zhǔn)備了禮物給大家，關(guān)注小編后私信回復(fù)“資料”即可領(lǐng)取哦！
單獨(dú)來(lái)講，Vue.js被定義成一個(gè)用來(lái)開(kāi)發(fā)Web界面的前端庫(kù)，是個(gè)非常輕量級(jí)的工具。Vue.js本身具有響應(yīng)式編程和組件化的特點(diǎn)。
所謂響應(yīng)式編程,即為保持狀態(tài)和視圖的同步，這個(gè)在大多數(shù)前端MV*（MVC/MVVM/MVW）框架，不管是早期的backbone.js還是現(xiàn)在AngularJS都對(duì)這一特性進(jìn)行了實(shí)現(xiàn)（也稱之為數(shù)據(jù)綁定），但這幾者的實(shí)現(xiàn)方式和使用方式都不相同。相比而言，Vue.js使用起來(lái)更為簡(jiǎn)單，也無(wú)需引入太多的新概念，聲明實(shí)例new Vue({ data : data })后自然對(duì)data里面的數(shù)據(jù)進(jìn)行了視圖上的綁定。修改data的數(shù)據(jù)，視圖中對(duì)應(yīng)數(shù)據(jù)也會(huì)隨之更改。
Vue.js的組件化理念和ReactJS異曲同工——“一切都是組件”，可以將任意封裝好的代碼注冊(cè)成標(biāo)簽，例如：Vue.component('example', Example)，可以在模板中以的形式調(diào)用。如果組件抽象得合理，這在很大程度上能減少重復(fù)開(kāi)發(fā)，而且配合Vue.js的周邊工具vue-loader，我們可以將一個(gè)組件的CSS、HTML和js都寫(xiě)在一個(gè)文件里，做到模塊化的開(kāi)發(fā)。
除此之外，Vue.js也可以和一些周邊工具配合起來(lái)，例如vue-router和vue-resource，支持了路由和異步請(qǐng)求，這樣就滿足了開(kāi)發(fā)單頁(yè)面應(yīng)用的基本條件。
相比較Angularjs和ReactJS，Vue.js一直以輕量級(jí)，易上手被稱道。MVVM的開(kāi)發(fā)模式也使前端從原先的DOM操作中解放出來(lái)，我們不再需要在維護(hù)視圖和數(shù)據(jù)的統(tǒng)一上花大量的時(shí)間，只需要關(guān)注于data的變化，代碼變得更加容易維護(hù)。雖然社區(qū)和插件并沒(méi)有一些老牌的開(kāi)源項(xiàng)目那么豐富，但滿足日常的開(kāi)發(fā)是沒(méi)有問(wèn)題的。Vue.js 2.0也已經(jīng)發(fā)布了beta版本，渲染層基于一個(gè)輕量級(jí)的 virtual-DOM 實(shí)現(xiàn)，在大多數(shù)場(chǎng)景下初始化渲染速度和內(nèi)存消耗都提升了 2~4 倍。而阿里也開(kāi)源了weex（可以理解成ReactJS-Native和ReacJS的關(guān)系），這也意味著Vue.js在移動(dòng)端有了更多的可能性。
不過(guò)，對(duì)于為什么要選擇使用一個(gè)框架，都需要建立在一定的項(xiàng)目基礎(chǔ)上。如果脫離實(shí)際項(xiàng)目情況我們來(lái)談某個(gè)框架的優(yōu)劣，以及是否采用這種框架，我覺(jué)得是不夠嚴(yán)謹(jǐn)?shù)摹?/span>
作為新興的前端框架，Vue.js也拋棄了對(duì)IE8的支持，在移動(dòng)端支持到Android 4.2+和iOS 7+。所以如果你在一家比較傳統(tǒng)，還需要支持IE6的公司的話，你或許就可以考慮其他的解決方案了（或者說(shuō)服你的老板）。另外，在傳統(tǒng)的前后端混合（通過(guò)后端模板引擎渲染）的項(xiàng)目中，Vue.js也會(huì)受到一定的限制，Vue實(shí)例只能和后端模板文件混合在一起，獲取的數(shù)據(jù)也需要依賴于后端的渲染，這在處理一些JSON對(duì)象和數(shù)組的時(shí)候會(huì)有些麻煩。
理想狀態(tài)下，我們能直接在前后端分離的新項(xiàng)目中使用Vue.js最合適。這能最大程度上發(fā)揮Vue.js的優(yōu)勢(shì)和特性，熟悉后能極大的提升我們的開(kāi)發(fā)效率以及代碼的復(fù)用率。尤其是移動(dòng)瀏覽器上，Vue.js壓縮后只有18KB，而且沒(méi)有其他的依賴。
現(xiàn)在來(lái)看一下我們第一個(gè)Vue.js項(xiàng)目，按照傳統(tǒng)，我們來(lái)寫(xiě)一個(gè)Hello World。
首先，引入Vue.js的方式有很多，你可以采用直接使用CDN，例如：
<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>也可以通過(guò)NPM進(jìn)行安裝：
npm install vue // 最新穩(wěn)定版本正確引入Vue.js之后，我們?cè)贖TML文件中的內(nèi)容為：
<div id="app">
<h1>{{message}}</h1>
</div>應(yīng)用的js如下：
var vm = new Vue({
el : '#app',
data: {
message : 'Hello world, I am Vue.js'
}
});輸出結(jié)果為：
這種形式類似于前端模板引擎，我們把js中message值替換了HTML模板中{{message}}這部分。
不過(guò)，如果僅僅是這樣的例子，我相信你也不會(huì)有什么興趣去使用Vue.js。根據(jù)上文對(duì)Vue.js的說(shuō)明，我們繼續(xù)寫(xiě)兩個(gè)有關(guān)于它特性的例子。
第一個(gè)特性是數(shù)據(jù)綁定，我們可以在運(yùn)行上述例子的瀏覽器控制臺(tái)（console）環(huán)境中輸入vm.message = 'Hello Vue.js'，輸出結(jié)果就變?yōu)榱薍ello Vue.js。也就說(shuō)明vm.message和視圖中的{{message}}是綁定的，我們無(wú)需手動(dòng)去獲取<h1>標(biāo)簽來(lái)修改里面的innerHTML。
同樣，我們也可以綁定用戶輸入的數(shù)據(jù)，視圖會(huì)隨著用戶的輸入而變化，例如：
<div id="app">
<h1>Your input is {{ message }}</h1>
<input type=”text” v-model=”message”>
</div>vm.message的值會(huì)隨著用戶在input中輸入的值的變化而變化，而無(wú)需我們手動(dòng)去獲取DOM元素的值再同步到j(luò)s中。
第二個(gè)特性是組件化，簡(jiǎn)單來(lái)說(shuō)我們可以自己定義HTML標(biāo)簽，并在模板中使用它，例如：
<div id="app">
<message content='Hello World'></message>
</div>
<script type="text/javascript">
var Message = Vue.extend({
props : ['content'],
template : '<h1>{{content}}</h1>'
})
Vue.component('message', Message);
var vm = new Vue({
el : '#app',
});
</script>我們?cè)跒g覽器里最終看到的HTML結(jié)果為：
可以看到自定義的標(biāo)簽<message>被替換成了<h1>Hello World</h1>，當(dāng)然，實(shí)際中的組件化遠(yuǎn)比示例復(fù)雜，我們會(huì)給組件添加參數(shù)及方法，使之能更好地被復(fù)用。
如果說(shuō)這幾個(gè)例子引起了你對(duì)Vue.js的興趣的話，那接下來(lái)就將它真實(shí)地運(yùn)用到生產(chǎn)環(huán)境中吧。
本文節(jié)選自《Vue.js 前端開(kāi)發(fā) 快速入門與專業(yè)應(yīng)用》
內(nèi)容簡(jiǎn)介
本書(shū)主要介紹Vue.js的使用方法和在實(shí)際項(xiàng)目中的運(yùn)用，它既可以在一個(gè)頁(yè)面中單獨(dú)使用，也可以將整站都構(gòu)建成單頁(yè)面應(yīng)用。為了便于理解，本書(shū)會(huì)從傳統(tǒng)的開(kāi)發(fā)角度切入，先從數(shù)據(jù)渲染、事件綁定等方面介紹在Vue.js中的使用方法，然后漸進(jìn)到Vue.js自身的特性，例如數(shù)據(jù)綁定、過(guò)濾器、指令以及最重要的組件部分。除了框架用法外，本書(shū)還介紹了和Vue.js相關(guān)的重要插件和構(gòu)建工具，這些工具有助于幫助用戶構(gòu)建一個(gè)完整的單頁(yè)面應(yīng)用，而不僅僅是停留在個(gè)人DEMO階段的試驗(yàn)品。而對(duì)于復(fù)雜項(xiàng)目，Vue.js也提供了對(duì)應(yīng)的狀態(tài)管理工具Vuex，降低項(xiàng)目的開(kāi)發(fā)和維護(hù)成本。鑒于完稿前，Vue.js 2.0已正式發(fā)布完畢，本書(shū)也在相關(guān)用法上對(duì)比了1.0和2.0的區(qū)別，并補(bǔ)充了render函數(shù)和服務(wù)端渲染等特性。
本書(shū)適用于尚未接觸過(guò)MVVM類前端框架的開(kāi)發(fā)者，或者初步接觸Vue.js的開(kāi)發(fā)者，以及實(shí)際應(yīng)用Vue.js開(kāi)發(fā)項(xiàng)目的開(kāi)發(fā)者。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
