vue2.0基礎(chǔ)知識(shí)有哪些
這篇文章給大家分享的是有關(guān)vue2.0基礎(chǔ)知識(shí)有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來(lái)，先為雨花等服務(wù)建站，雨花等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為雨花企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
什么是 Vue？
簡(jiǎn)要介紹一下vue，vue就是一個(gè)前端框架，特點(diǎn)是 數(shù)據(jù)雙向綁定，比如說(shuō)改變input輸入框里的內(nèi)容，就會(huì)自動(dòng)同步更新到頁(yè)面上綁定該輸入框的組件的值。
看一下官方對(duì)vue的介紹：
Vue.js，讀音 /vju?/，和view發(fā)音幾乎一樣，可見(jiàn)重心是在視圖（view）層上的。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
其和jQuery最大的不同點(diǎn)在于jQuery通過(guò)操作DOM來(lái)改變頁(yè)面的顯示，而Vue通過(guò)操作數(shù)據(jù)來(lái)實(shí)現(xiàn)頁(yè)面的更新與展示。下面便是Vue數(shù)據(jù)驅(qū)動(dòng)的概念模型：
Vue.js主要負(fù)責(zé)的是上圖綠色正方體ViewModel的部分，其在View層（即DOM層）與Model層（即JS邏輯層）之間通過(guò)ViewModel綁定了DOM Listeners與Data Bingings兩個(gè)相當(dāng)于監(jiān)聽(tīng)器的東西。
當(dāng)View層的視圖發(fā)生改變時(shí)，Vue會(huì)通過(guò)DOM Listeners來(lái)監(jiān)聽(tīng)并改變Model層的數(shù)據(jù)。相反，當(dāng)Model層的數(shù)據(jù)發(fā)生改變時(shí)，其也會(huì)通過(guò)Data Bingings來(lái)監(jiān)聽(tīng)并改變View層的展示。這樣便實(shí)現(xiàn)了一個(gè)雙向數(shù)據(jù)綁定的功能，也是Vue.js數(shù)據(jù)驅(qū)動(dòng)的原理所在。
首先我們來(lái)寫(xiě)一個(gè)hello word！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message:'Hello world!'
}
})
</script>
</html>看似很簡(jiǎn)單的實(shí)現(xiàn)一個(gè)字符串的渲染，其實(shí)vue在背后做了很多的操作，通過(guò)vue，現(xiàn)在數(shù)據(jù)和DOM已經(jīng)被綁定到了一塊，我們可以通過(guò)app.message來(lái)修改內(nèi)容，我們可以看到頁(yè)面的內(nèi)容也相應(yīng)進(jìn)行了更新。
構(gòu)造器
我們會(huì)發(fā)現(xiàn)每個(gè)頁(yè)面都會(huì)new一個(gè)Vue，因?yàn)槊總€(gè)vue.js應(yīng)用都是通過(guò)構(gòu)造函數(shù)Vue創(chuàng)建一個(gè)Vue的根實(shí)例也就是這里所說(shuō)的構(gòu)造器。在實(shí)例化Vue時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項(xiàng)。全部的選項(xiàng)可以在API 文檔中查看。
vue指令
在Vue項(xiàng)目的開(kāi)發(fā)中，我們使用的最多的應(yīng)該就屬Vue的指令了。通過(guò)Vue提供的常用指令，我們可以淋漓盡致地發(fā)揮Vue數(shù)據(jù)驅(qū)動(dòng)的強(qiáng)大功能。以下便是常用指令的簡(jiǎn)單介紹：
（1）v-text: 用于更新綁定元素中的內(nèi)容，類(lèi)似于jQuery的text()方法
（2）v-html: 用于更新綁定元素中的html內(nèi)容，類(lèi)似于jQuery的html()方法
（3）v-if: 用于根據(jù)表達(dá)式的值的真假條件渲染元素，如果上圖P3為false則不會(huì)渲染P標(biāo)簽
（4）v-show: 用于根據(jù)表達(dá)式的值的真假條件顯示隱藏元素，切換元素的 display CSS 屬性
（5）v-for: 用于遍歷數(shù)據(jù)渲染元素或模板，如圖中P6為[1,2,3]則會(huì)渲染3個(gè)P標(biāo)簽，內(nèi)容依次為1，2，3
（6）v-on: 用于在元素上綁定事件，圖中在P標(biāo)簽上綁定了showP3的點(diǎn)擊事件
關(guān)于更多的Vue指令可以查看Vue2.0文檔，地址：https://vuefe.cn/api/#指令
屬性與方法
在每個(gè) Vue 實(shí)例中都會(huì)代理其 data 對(duì)象里所有的屬性。
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 設(shè)置屬性也會(huì)影響到原始數(shù)據(jù)
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3除了 data 屬性,Vue實(shí)例暴露了一些有用的實(shí)例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區(qū)分。具體請(qǐng)查閱API文檔中的實(shí)例屬性一節(jié)。
MVC & MVVM
MVC是一種在后端開(kāi)發(fā)中廣泛采用的架構(gòu)模式，幾乎所有的知名后端框架都是傳統(tǒng) MVC 的實(shí)現(xiàn)，由于其中的 一些小差異，也可以被叫做 MV*
MVC模式的意思是，軟件可以分成三個(gè)部分。
視圖（View）：用戶(hù)界面。
控制器（Controller）：業(yè)務(wù)邏輯
模型（Model）：數(shù)據(jù)保存
各部分之間的通信方式如下：
View 傳送指令到 Controller
Controller 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)
Model 將新的數(shù)據(jù)發(fā)送到 View，用戶(hù)得到反饋所有通信都是單向的
MVVM，它采用雙向綁定（data-binding）：View的變動(dòng)，自動(dòng)反映在 ViewModel，反之亦然。Angular 和 Ember 都采用這種模式。
我們可以直接在一個(gè)html頁(yè)面里通過(guò)引入Vue.js來(lái)直接寫(xiě)Vue代碼，但是這樣的方式并不常用。因?yàn)槿绻覀兊捻?xiàng)目比較大，項(xiàng)目中會(huì)存在很多頁(yè)面，一旦每個(gè)頁(yè)面都引入一個(gè)Vue.js或者聲明一個(gè)Vue實(shí)例，這樣非常不利于后期的維護(hù)和代碼的公用，也會(huì)存在實(shí)例名沖突的情況，所以我們需要用到Vue提供的技術(shù)棧來(lái)構(gòu)建強(qiáng)大的前端項(xiàng)目。
1.vue-cli：Vue的腳手架工具，用于自動(dòng)生成Vue項(xiàng)目的目錄及文件。
2.vue-router： Vue提供的前端路由工具，利用其我們實(shí)現(xiàn)頁(yè)面的路由控制，局部刷新及按需加載，構(gòu)建單頁(yè)應(yīng)用，實(shí)現(xiàn)前后端分離。
3.vuex：Vue提供的狀態(tài)管理工具，用于同一管理我們項(xiàng)目中各種數(shù)據(jù)的交互和重用，存儲(chǔ)我們需要用到數(shù)據(jù)對(duì)象。
4.ES6：Javascript的新版本，ECMAScript6的簡(jiǎn)稱(chēng)。利用ES6我們可以簡(jiǎn)化我們的JS代碼，同時(shí)利用其提供的強(qiáng)大功能來(lái)快速實(shí)現(xiàn)JS邏輯。
5.NPM：node.js的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包、插件、工具、命令等，便于開(kāi)發(fā)和維護(hù)。
6.webpack：一款強(qiáng)大的文件打包工具，可以將我們的前端項(xiàng)目文件同一打包壓縮至js中，并且可以通過(guò)vue-loader等加載器實(shí)現(xiàn)語(yǔ)法轉(zhuǎn)化與加載。
7.Babel：一款將ES6代碼轉(zhuǎn)化為瀏覽器兼容的ES5代碼的插件
利用以上等技術(shù)，我們便可以開(kāi)始構(gòu)建我們的Vue項(xiàng)目了。
感謝各位的閱讀！關(guān)于“vue2.0基礎(chǔ)知識(shí)有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
分享文章：vue2.0基礎(chǔ)知識(shí)有哪些
路徑分享：http://www.rwnh.cn/article26/gopccg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、用戶(hù)體驗(yàn)、軟件開(kāi)發(fā)、網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 公司的外貿(mào)網(wǎng)站建設(shè)應(yīng)考慮什么因素 2022-12-26
- 外貿(mào)網(wǎng)站建設(shè)如何達(dá)到更好的效果？ 2022-12-12
- 成都外貿(mào)網(wǎng)站建設(shè)需要注意和做到的八個(gè)基本點(diǎn) 2022-06-02
- 外貿(mào)網(wǎng)站建設(shè)建議 輕松拓展海外市場(chǎng) 2015-02-08
- 成都外貿(mào)網(wǎng)站建設(shè)跟國(guó)內(nèi)網(wǎng)站相比有哪些區(qū)別？ 2022-05-27
- 外貿(mào)網(wǎng)站建設(shè)應(yīng)做好細(xì)節(jié)工作? 2015-08-04
- 外貿(mào)網(wǎng)站建設(shè)怎么做好？做對(duì)了以下幾點(diǎn)，網(wǎng)站瀏覽量翻倍 2016-03-29
- 專(zhuān)業(yè)的外貿(mào)網(wǎng)站建設(shè)是怎樣的？ 2022-12-04
- 做外貿(mào)網(wǎng)站建設(shè)需要收取哪些費(fèi)用？ 2022-11-19
- 外貿(mào)網(wǎng)站建設(shè)的一些經(jīng)驗(yàn)總結(jié) 2016-03-08
- 外貿(mào)網(wǎng)站建設(shè)，英文網(wǎng)站建設(shè)，外貿(mào)網(wǎng)站設(shè)計(jì)推廣 ，外貿(mào)SOHO建站 2022-05-25
- 成都外貿(mào)網(wǎng)站建設(shè)如何優(yōu)化提速 2022-07-01