vue相關

1、構建的vue-cli用到的技術有哪些?

1.vue.js:vue-cli工程的核心,主要特色是雙向數據綁定和組件系統。

2.vue-router:官方推薦的路由框架。

3.vuex:專爲vue.js應用項目開發的狀態管理器,維護vue組件間共同的一些變量和方法。

4.axios:用於發起http請求,基於Promise設計。

5.vux等:一個專爲vue設計的移動端UI組件庫。

6.webpack:模塊加載和工程打包工具。

2、vue-cli經常使用的npm指令有哪些?

npm install       ---下載資源依賴包
複製代碼

npm run dev       ---啓動開發環境
複製代碼

npm run build    
---打包 (自帶webpack,生成dist文件夾)
複製代碼

3、vue常見的指令有哪些?

v-text/v-html: 替換該指令的元素內容,text是純文本輸出,html是格式的輸出。

v-if: 根據表達式的值的真假條件渲染元素,在切換時元素被銷燬並重建。控制DOM節點存在與否,一次顯示或隱藏v-if更合理

v-show: 控制元素的顯示方式,display.block和none來回切換。常常切換用v-show

v-for: 循環指令,基於一個數組或者對象渲染列表,vue2.0以上必須配合key值使用。

v-on: 用於監聽指定元素的DOM事件,好比點擊事件,綁定事件監聽器,簡寫爲'@'。

v-once: 只能渲染一次。

v-cloak: 爲了解決插值表達式的閃爍問題

v-bind: 動態綁定一個或多個特性,簡寫':'。

v-model: 實現表單輸入和應用狀態之間的雙向綁定。

語法糖(一種簡潔的寫法):原理經過v-bind綁定的input屬性,監聽input事件觸發,獲取input的值再去修改data中數據。
複製代碼

4、vue-cli目錄解析

1.build文件夾:

存放webpack相關配置和腳本。開發過程當中會偶爾使用到webpack.base.conf.js,用於配置less、sass等css預編譯庫,或者配置UI庫。

2.config文件夾:

存放配置文件,用於區分開發環境、線上環境的不一樣。經常使用到config.js配置開發環境端口號、是否開啓熱加載、設置生產環境的靜態資源相對路徑、npm run build命令打包生成靜態資源的名稱和路徑。

3.dist文件夾:默認npm run build命令打包生成的靜態資源文件,用於生產部署。

4.node_modules文件夾:存放npm命令下載的開發環境和生產環境的依賴包。

5.src文件夾:存放項目源代碼及須要用到的資源文件。

5.1 src下的assets:存放項目中的靜態資源文件,如images、css、fonts

5.2 src下的componets:存放vue開發中的公共組件,如header.vue、footer.vue

5.3 src下的router:vue路由的配置文件

5.4 src下的util:存放vue一些公共的js方法

5.5 src下的vuex:存放vuex爲vue專門開發的狀態管理器

5.6 src下的app.vue:使用標籤< route-view> </ route-view >渲染整個項目的.vue組件

5.7 src下的main.js:vue-cli的入口文件

6.index.html:設置項目的一些meta頭信息和掛載vue節點 < div id="app"> </ div>

7.package.json:用於node_modules資源部和啓動、npm命令管理。

5、什麼是vue生命週期

生命週期是vue實例從建立到銷燬，也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程。在這個過程當中也會運行一些叫作生命週期鉤子的函數。

6、偵聽器watch基本使用

使用場景:

在依賴data數據的時候,若是獲取新數據的時候有異步操做,使用偵聽器。

當依賴的數據沒有改變的時候,不會觸發偵聽器。

data: {
    message:'hello vue'
},
watch: {
    message (new, old) {
        console.log(new, old)
        setTimeout(() => {
            this.str ='123'
        },2000)
    }
}
複製代碼