一、vue的兩種安裝方式

(1)直接在html中引入vue.js

(2)通過vue+nodeJS搭建

我們采用的是第二種方式

二、vue和nodeJS的關系

(1)nodeJS不是一個js框架，是一個基于Chrome V8引擎的javascript運行環(huán)境，所以會產生眾多基于node的js框架和庫，同時包括關于js模塊化的庫。另一個就是node可以創(chuàng)建本地服務器，從而可以使用js來編寫后臺程序。

(2)vue依賴node中的webpack打包工具，初始化vue項目，以及一些依賴包。

三、搭建vue項目

(1)安裝node

(2)初始化vue項目，初始化命令：vue init webpack my-project

需要注意的是：node的版本需要和npm版本相對應

(3)初始化項目后，進入到project目錄下使用命令npm run dev來啟動項目。這個命令的執(zhí)行是通過vue腳手架找到項目的根目錄下的package.json文件，scripts表示腳本部分，作用是把webpack的原生命令進行 代理。其中build即是打包命令。執(zhí)行了npm run dev則會啟動端口，在開發(fā)

(4)vue目錄結構，項目目錄：webroot->vue->project

在build下的webpack.base.conf.js中可配置文件引入路徑的別名，引入的公共文件路徑可在這里配置，移動文件時只需要修改這一個地方，如：@表示src目錄.

四、關于vue的幾大知識模塊

(1)vue路由

vue使用的是單頁面路由，即所有組件都是渲染在一個容器中，頁面跳轉時不需要重新加載頁面，只是重新渲染組件。在開發(fā)應用時，前端分配頁面地址，包括實際路徑地址、name、別名、重定向、組件名稱，實際訪問路徑可以是別名也可以是真實路徑

(2)vue雙向數(shù)據(jù)綁定，使用模板語言

(3)vue的生命周期

beforeCreate：this無法使用，data數(shù)據(jù)、method方法都是無法獲取的

created：可以操作vue實例中的數(shù)據(jù)和方法，但是無法操作dom結構

mounted：掛載完畢，dom節(jié)點渲染到頁面中，能操作dom結構

computed：計算屬性，vue經常會在模板中使用一些簡單的表達式來控制值，所以復雜的邏輯應使用計算屬性來進行控制?？煽焖儆嬎阋晥D中的屬性，并且計算會被緩存，在需要更新的時候更新。提升頁面性能。一般是當做屬性來使用

watch：偵聽屬性，用來監(jiān)聽data中的數(shù)據(jù)變化，還可以監(jiān)聽函數(shù)的中參數(shù)來獲取新值和舊值，和計算屬性有些類似，通常用這個屬性來響應數(shù)據(jù)的變化，監(jiān)聽ajax返回的結果。監(jiān)聽特定數(shù)據(jù)的變化并作出具體的業(yè)務邏輯。

(4)vue組件的開發(fā)和調用：注冊組件使用.vue文件，使用export default將組件暴露出去，在父組件中import進來，并聲明組件，在父組件中直接使用組件名稱作為標簽名即可使用子組件

(5)vue的權限控制：控制用戶登錄權限，控制用戶角色權限，在頁面加載前判斷是否已登錄，如果已登錄再判斷用戶是否有權限

總結

以上是生活随笔為你收集整理的vue 判断页面加载完成_vue项目搭建及总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。