參考鏈接：https://www.bilibili.com/video/BV1oj411D7jk/?spm_id_from=333.788.recommend_more_video.0&vd_source=3969f30b089463e19db0cc5e8fe4583a

1、響應(yīng)式數(shù)據(jù)與插值表達(dá)式理解
前端最基本的操作是：把數(shù)據(jù)呈現(xiàn)到頁面上，把更新的數(shù)據(jù)再更新到頁面上。
原生js的賦值操作如下:
<div id="box"></div>
<script>
let value = '這是內(nèi)容'
document.getElementById('box').textContent = value
value = '新內(nèi)容'
document.getElementById('box').textContent = value
</script>
以上DOM操作過于繁瑣，Vue通過內(nèi)置代碼的方式將DOM功能進(jìn)行了簡化。
所謂的響應(yīng)式數(shù)據(jù)指的是：Vue內(nèi)部對數(shù)據(jù)做操作，它就會自動地更新到視圖中，這樣就可以省去大量的DOM操作。
上面的內(nèi)容簡化后為：
<div id="box">{{ title }}</div>
<script>
?? ?const vm = new Vue({
?? ??? ?el: '#box',
?? ??? ?data(){
?? ??? ??? ?return {
?? ??? ??? ??? ?title: '這是標(biāo)題內(nèi)容'
?? ??? ??? ?}
?? ??? ?}
?? ?})
</script>
后續(xù)針對title的修改會直接體現(xiàn)在頁面上。

2、計算屬性computed
methods中的函數(shù)，假如每次計算時依賴的值不變，則結(jié)果也不會發(fā)生變化，此時就不要重復(fù)計算，這樣就存在優(yōu)化空間。于是就產(chǎn)生了computed。
計算屬性在定義時時一個函數(shù)，但是在使用時不能加括號，因為它是一個屬性。

3、偵聽器watch
在插值表達(dá)式和計算屬性中，改數(shù)據(jù)的時候就會自動觸發(fā)一個修改頁面內(nèi)容的操作。
監(jiān)聽器就是監(jiān)聽某個數(shù)據(jù)是否有變化，我們希望在數(shù)據(jù)變化的時候不僅僅是更新頁面，還希望做點別的。
偵聽器的意義：在插值表達(dá)式和計算屬性時修改一個響應(yīng)數(shù)據(jù)，它會做頁面的更新，這是Vue內(nèi)部自動實現(xiàn)的。如果也希望在過程中去參與一下，就可以通過監(jiān)聽器做一個處理。這是Vue在內(nèi)部給我們開放了一個可以參與響應(yīng)式的一個過程。
watch:{
?? ?title(newValue, oldValue){
?? ??? ?console.log(newValue, oldValue)
?? ?}
}

4、指令
（1）內(nèi)容指令
<p v-text="title">123</p>
<p v-html="htmlContent">123</p>
（2）渲染指令
<p v-for="item in 5">這是內(nèi)容</p>

當(dāng)在組件中使用v-for時，key是必須的。作用是為了高效地更新虛擬DOM。

<p v-if="true">標(biāo)簽內(nèi)容</p>
<p v-show="true">標(biāo)簽內(nèi)容</p>
（3）屬性指令
<p v-bind:title="title">這是內(nèi)容</p>
等價于<p :title="title">這是內(nèi)容</p>
（4）事件指令
<button v-on:click="output">按鈕</button>
等價于<button @click="output">按鈕</button>
（5）表單雙向綁定指令
<input type="text" v-model="inputValue">

5、Vue CLI說明
它時Vue基于Webpack打造的腳手架工具，腳手架內(nèi)置了很多模板和工具，可以讓我們快速進(jìn)行Vue的項目創(chuàng)建。
查看vue版本：vue --version
創(chuàng)建vue項目：vue create <project-name>

6、腳手架的項目結(jié)構(gòu)
（1）package.json
在scripts中有serve/build/lint的命令。

serve命令：可以幫我們打開本地的靜態(tài)資源服務(wù)器，幫我們把項目直接跑起來，方便我們在開發(fā)中去使用。啟動方式為:npm run serve，然后通過localhost:8080訪問頁面。

build命令：進(jìn)行代碼打包，在開發(fā)時項目中有很多文件，但是最終呈現(xiàn)給用戶的時候不會存在很多零碎的文件。打包命令:npm run build。打包完成后會出現(xiàn)dist目錄，其中都是壓縮過的html的代碼，后面項目上線時也需要dist文件即可。此時啟動打包后的服務(wù)的方法：先運(yùn)行npm install serve -g，然后在項目目錄下運(yùn)行serve dist，最后通過localhost:3000可以訪問頁面
（2）node_modules：
包含項目安裝的所有的包，這個代碼都是一些第三方的工具，不需要改動。
（3）public
這些是不參與編譯的資源
（4）src
里面是需要參與編譯的資源。
比如assets中的logo.png需要編譯成base64格式進(jìn)行展示。
App.vue：根組件。
main.js：Vue應(yīng)用的一個入口文件。

7、組件化開發(fā)
vue中包含結(jié)構(gòu)template、邏輯script、樣式style 三個部分。
每個vue都是單獨(dú)的實例，最終會在編譯環(huán)節(jié)進(jìn)行一下結(jié)構(gòu)生成，并替換掉之前寫的自定義的HTML標(biāo)簽。
el選項只能在根組件中使用，而內(nèi)部的子組件是不需要el選項的，因為這取決于標(biāo)簽的位置，而不是掛載在特定的標(biāo)簽上。

props父傳子通信：一個或多個屬性的配置
props:{
?? ?msg: String,
?? ?count: {
?? ??? ?type: [String, Number],
?? ??? ?default: 100,
?? ??? ?required: true
?? ?}
}

父組件綁定數(shù)據(jù)的方法
<HelloWorld?
?? ?msg="Welcome"
?? ?:count="parentCount"
/>

export default{
?? ?name: 'App',
?? ?components:{
?? ??? ?HelloWorld
?? ?},
?? ?data(){
?? ??? ?return{
?? ??? ??? ?parentCount: 1000
?? ??? ?}
?? ?}
}

插槽：父組件應(yīng)用子組件的內(nèi)容中也可以寫些信息，這樣設(shè)置時比通過prop的方式傳值更簡單，同時可以傳遞更加復(fù)雜的結(jié)構(gòu)比如HTML頁面。即組件有一部分區(qū)域是開放的，這樣自己可以隨便定一些東西進(jìn)去，而不再是完全由子組件內(nèi)部做實現(xiàn)，使用起來更自由一些。

8、單頁面應(yīng)用程序
常規(guī)網(wǎng)站都是由多個頁面組成的，每個頁面去構(gòu)建一些頁面相關(guān)的一個功能內(nèi)容。
而Vue只有一個html文件，也意味著它其實只有一個頁面。
如何在一個頁面中實現(xiàn)多頁面應(yīng)用的效果，其實就是檢測頁面URL的變化，當(dāng)URL變化后在頁面中渲染一些內(nèi)容就可以了，這就是單頁面應(yīng)用程序。文章來源地址http://www.zghlxwxcb.cn/news/detail-584965.html

到了這里，關(guān)于Vue第二篇：概念深度剖析的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！