node版本管理工具 nvm - 簡書
Vue介紹
Vue.js(簡稱Vue) 是一套用于構(gòu)建用戶界面的漸進(jìn)式前端框架。（其實(shí)就是使用js開發(fā)的一個框架）
用戶界面就是將拿到手里的數(shù)據(jù)，通過某種辦法變成用戶可以看到的界面。vue關(guān)注的就是你將數(shù)據(jù)給我，如何將其變?yōu)榻缑妗?/span>
漸進(jìn)式：從輕量小巧的核心庫逐漸遞進(jìn)到用各式各樣的插件庫。
- 響應(yīng)式的數(shù)據(jù)綁定：當(dāng)數(shù)據(jù)發(fā)生改變，視圖可以自動更新，不用關(guān)心DOM操作，而專心數(shù)據(jù)操作。（高度封裝框架的特點(diǎn)是不需要關(guān)心dom操作，js jQuery很多都是對dom的一個操作，使用這個框架之后就不需要對dom操作了，視圖的框架需要我們?nèi)?，?shù)據(jù)也需要我們?nèi)ゾS護(hù)，之前js jquery大頭就是對dom的操作，綁定了id，拿到這個id對應(yīng)的資源，修改class和css，包括屬性，內(nèi)容，innerhtml等等，這些操作都是dom操作）
- 可組合的視圖組件:把視圖按照功能切分成若干基本單元，可維護(hù)，可重用，可測試等特點(diǎn)。（很強(qiáng)大的組件功能，一個一個組件嵌套，視圖可以封裝可以復(fù)用）
- 響應(yīng)式，雙向數(shù)據(jù)綁定，即MVVM。是指數(shù)據(jù)層（Model）-視圖層（View）-數(shù)據(jù)視圖 （ViewModel 它其實(shí)是控制器，是做數(shù)據(jù)和視圖之間的一個橋梁，數(shù)據(jù)更新和數(shù)據(jù)的交換，數(shù)據(jù)層和視圖層之間的一個橋梁）的響應(yīng)式框架。
目前是vue2到vue2的一個過渡階段，而且vue2是一個相當(dāng)經(jīng)典的版本。四年間經(jīng)歷了70多次版本的更新，所以在實(shí)際開發(fā)當(dāng)中vue2依然使用的很多。vue3依然是未來的趨勢。
vue-cli是vue腳手架，是專門用來做工程化開發(fā)的。vue-router是用于實(shí)現(xiàn)前端路由的。當(dāng)然還有vuex，當(dāng)我們的應(yīng)用足夠復(fù)雜的時候，可以借助它幫我們保管數(shù)據(jù)。
還會講一個有趣從組件庫叫element-ui。最后進(jìn)階到vue3。
components 它要引入的組件
- data是定義html里面要使用的變量，也就是定義html里面要使用的變量，它就是去定義變量的，定義好變量之后在html里面去使用，變量發(fā)生了變化html會去重新渲染，這就是定義數(shù)據(jù)的。
- computed是去做計(jì)算的
- watch 當(dāng)去監(jiān)聽user的數(shù)據(jù)，這個數(shù)據(jù)要在return里面是要有的，監(jiān)聽它，如果發(fā)生了變化，要去執(zhí)行什么，這個就是監(jiān)聽
- methods是去定義一些方法，去使用
- mounted是生命周期，掛載完成生命周期的一個階段
上面就是選項(xiàng)方式的api，用到哪塊就去使用哪塊。這不是一個固定的寫法。
它在js定義的時候有一個setup，但是幾個功能定義是大差不差的，比如watch，變量的定義，方法的定義。
vue的特點(diǎn)
第一個板塊推薦活動，可以將綠色框里面這部分內(nèi)容變?yōu)橐粋€文件。.vue里面寫的是綠色框里面這部分功能對應(yīng)的html結(jié)構(gòu)，css樣式以及js的交互。
在vue里面一個.vue就是一個組件，如果以后別人也想使用綠色框里面的這些功能。結(jié)構(gòu)樣式交互都想用，只需要將.vue文件引入進(jìn)去就會看到所有的功能都能夠拿到。
如果有一天想要修改新聞的布局，那么就來到news.vue里面改下html結(jié)構(gòu)就可以了。就是改了其中一個vue里面的css絕對不會影響其他的vue里面的css，因?yàn)榉庋b到這個組件里面了。
這就是組件化編碼和模式。一個.vue就是一個組件。
現(xiàn)在手里面有些人的數(shù)據(jù)，是一個數(shù)組。然后頁面里面也有一個容器。寫點(diǎn)代碼將每個人的信息塞到這個容器里面。
先不考慮用vue去寫，而是使用js去實(shí)現(xiàn)。
命令式編碼就是上面的每一個環(huán)節(jié)，每一步都少不了。少了任何一步都相當(dāng)于少了一個命令。
命令式的編碼就是寫一步動一下。與之對立的概念就是聲明式。
你有多少個人就有多少個li，所以說你得遍歷。所以寫了vue里面的一個指令叫做v-for。
如果有一天數(shù)據(jù)發(fā)生變化。就不太好玩了。其實(shí)原來的數(shù)據(jù)是沒有變的，只是新添加了一些數(shù)據(jù)，最好的方式就是將數(shù)據(jù)原封不動的放在這，只需要將趙6擺在這就行了。相當(dāng)于原來的數(shù)據(jù)復(fù)用了。
dd
vue現(xiàn)將這三個人變?yōu)槿齻€虛擬dom，隨后將這三個虛擬dom變?yōu)轫撁娴恼鎸?shí)dom。虛擬dom就是內(nèi)存里面的一個數(shù)據(jù)，最后vue將其轉(zhuǎn)化為頁面的真實(shí)dom。
如果有些數(shù)據(jù)是不變的，那么虛擬dom對你是沒有什么幫助的。但是以后數(shù)據(jù)是有變化。那么這些就可以幫助到你了。
vue會將新的虛擬dom和舊的虛擬dom進(jìn)行比較。里面有非常優(yōu)秀的dim算法。它一對比發(fā)現(xiàn)新的虛擬dom的123和舊的dom里面的123那是一樣的。標(biāo)簽里面的名字，屬性，內(nèi)容都一樣。原來的就直接復(fù)用了，只有趙6是后來放進(jìn)來的。
引入Vue.js
參考文檔: https://v3.cn.vuejs.org/guide/installation.html
- 在HTML中以CDN包的形式導(dǎo)入
- 下載JS文件保存到本地再導(dǎo)入
- 使用npm安裝
- 使用官方VueCli腳手架構(gòu)建項(xiàng)目（不建議新手直接使用）
簡單vue示例如下：
最后需要掛載才能夠?qū)崿F(xiàn)最后的效果，也就是哪個html里面哪個區(qū)域去使用這個vue，那么就掛載到哪個區(qū)域，正常情況下是掛載到整個body的區(qū)域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<!--引入并且使用變量-->
{{ message }}
</div>
<script type="text/javascript">
//vue響應(yīng)式數(shù)據(jù)設(shè)置的對象，所有的變量設(shè)置以及方法等全部都寫在這個變量當(dāng)中
const HelloVueApp = {
//所有的變量設(shè)置在data()中
data(){
return{
message: "Hello vue!"
}
}
}
//創(chuàng)建vue實(shí)例，基于響應(yīng)式數(shù)據(jù)，掛載到html當(dāng)中，html當(dāng)中的某塊區(qū)域都能夠使用到vue里面所有的數(shù)據(jù)和方法，包括vue的特性能力都可以使用到。并且vue對象里面數(shù)據(jù)發(fā)生變化的時候，它都會自動響應(yīng)，也就是引用html的視圖會自動響應(yīng)也就是更新。
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>當(dāng)vue里面數(shù)據(jù)發(fā)生變化，那么視圖也就會發(fā)生變化，自動響應(yīng)更新。
聲明式渲染
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)（其實(shí)就是將vue里面的數(shù)據(jù)渲染到html里面的模板，掛載到哪，哪就是模板，看你這個vue實(shí)例掛載到哪）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<!--引入并且使用變量-->
counter:{{ count }}
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
count: 0
}
},
mounted(){
//js計(jì)時器寫法，每隔1s執(zhí)行一次
setInterval(() => {
this.count++
}, 1000);
}
}
//掛載到html當(dāng)中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>在vue中，有很多生命周期鉤子，mounted就表示當(dāng)vue實(shí)例掛載到了dom系統(tǒng)后，觸發(fā)的鉤子?？梢岳斫鉃轫撁嫔芍笞詣訄?zhí)行的操作。
當(dāng)在data當(dāng)中聲明了變量，那么在其他地方要去使用那么就需要去加this。
上面可以看到是響應(yīng)式的，在vue數(shù)據(jù)發(fā)生了變化，那么視圖就會發(fā)生變化。上面html里面count就是一個視圖。
模板語法
Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層組件實(shí)例的數(shù)據(jù)。 所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。（其實(shí)就是將vue里面的模板語法，最終渲染為一個html）文章來源：http://www.zghlxwxcb.cn/news/detail-502993.html
<span>Message: {{ msg }}</span>? ?數(shù)據(jù)綁定就是使用變量的時候使用的是兩個花括號{{msg}}將被替代對應(yīng)組件實(shí)例中msg屬性的值。無論何時，綁定的組件實(shí)例上msg屬性發(fā)生改變， 插值處內(nèi)容都會更新。文章來源地址http://www.zghlxwxcb.cn/news/detail-502993.html
到了這里，關(guān)于認(rèn)識 Vue.js的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
