當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue——快速入门

發布時間：2025/3/13 vue 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue——快速入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

1. 環境配置
2. NodeJS
3. 了解NPM，安裝一些常用的環境
4. Vue
- 4.1 第一個vue程序
- 4.2 雙向綁定
- 4.3 事件
5. 路由
6. axios 異步通信
7. Vue實際項目開發學習

1. 環境配置

開發工具：VSCode(推薦)、IDEA
VSCode下載地址：https://code.visualstudio.com/
還需要一個前端環境：NodeJS
NodeJS下載地址：http://nodejs.cn/download/

安裝完畢后驗證是否安裝正確：

（1）VSCode能正常打開即可！

（2）NodeJS需要判斷驗證

配置環境變量：安裝時一直next會自動配置環境變量
判斷版本 node -v 以及 npm -v

至此，環境配置完畢！

2. NodeJS

NodeJS 是一個在服務器端能夠運行JavaScript 的環境。

第一個node js程序

3. 了解NPM，安裝一些常用的環境

npm (node package manager)：前端版的 maven，前端所有的依賴在這里都有

其中它的 package.json 文件對應后端的pom.xml

（1） npm init -y ：初始化一個基本的配置文件

（2） npm install express -g ：安裝環境 npm install 包名 -g(全局)

（3） npm config set regisry https://registry.npm.taobao.org :設置鏡像到淘寶（cmd中執行）
npm config list :查看是否安裝成功

（4） npm install jquery : 安裝jquery依賴
npm install vue : 安裝vue依賴

（5） npm install --save-dev eslint : 代表只在開發環境有效，不會打包出去，eslint為開發時候的語法檢查工作

（6） npm install :當把node_modules里某些依賴刪除后，執行此命令，就會根據package-lock.json的依賴，自動下載上

（7） npm install -g webpack webpack-cli : 我們在后面的開發都是基于es6，但瀏覽器支持的是es5規范，所以需要webpack 打包，自動將es6代碼轉為es5語法(cmd中執行)
webpack -v : 查看是否安裝成功

（8） npm update 包名 : 自動更新某個包名
npm uninstall 包名 : 自動卸載某個包名

（9） npm install -g babel-cli : 安裝babel-cli(cmd中執行)
babel --version ：查看是否安裝成功

4. Vue

Vue是一種前端框架，核心只關注視圖層
官方文檔：https://cn.vuejs.org/v2/guide/
核心思想：MVVM (M模型數據 V視圖 VM雙向綁定)

MVVM是一種簡化用戶界面的事件驅動編程方式
MVVM 源自于經典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 層，負責轉換 Model 中的數據對象來讓數據變得更容易管理和使用，其作用如下：

該層向上與視圖層進行雙向數據綁定
向下與 Model 層通過接口請求進行數據交互

4.1 第一個vue程序

（1）創建一個文件夾，命名為vue-01

（2）點擊右鍵，選擇在終端打開，下載vue

（3）創建一個lib文件夾，將dist文件夾下的vue.js文件復制一份粘貼過去

（4）創建第一個vue文件，名為01-hellovue.html，選擇快捷鍵html:5，自動生成部分代碼

（5）01-hellovue.html 全部代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head> <body><div id="app">{{msg}}</div>  <script src="./lib/vue.js"></script> <script>//代碼部分//創建vue對象，var vue = new Vue({el:'#app', //綁定視圖層data:{ //定義要給前端的數據,頁面的所有數據都來自datamsg:'hello,vue'}})</script></body> </html>

（6）右鍵選擇在瀏覽器中打開

結果展示：

理解雙向綁定：只要數據發生變化，前端視圖顯示就會隨之發生變化

基本數據渲染指令（拓展部分）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head> <body><div id="app"> <h1 :title="msg">我是標題</h1></div> <script src="./lib/vue.js"></script> <script>var vue = new Vue({el:'#app', data:{ msg:'時間'+ new Date().toLocaleString() }}) </script></body> </html>

結果展示：

4.2 雙向綁定

v-model 雙向綁定
v-bind 綁定屬性(單向)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head> <body><div id="app"><input type="text" v-bind:value="serachMap.keyword"><input type="text" v-model="serachMap.keyword"> </div>  <script src="./lib/vue.js"></script> <script>//代碼部分//創建vue對象，var vue = new Vue({el:'#app', //綁定視圖層data:{ //定義要給前端的數據,頁面的所有數據都來自dataserachMap:{keyword:'zz'}}})</script></body> </html>

結果展示：

可以看出，在左邊輸入框修改數據，右邊不會隨之改變，但在右邊輸入框修改數據，左邊卻會隨之發生改變，這就是右邊輸入框設置的雙向綁定！
右邊輸入框的值改變，會使數據層發生改變，由于視圖層和數據層綁定，所以使得左邊輸入框也隨之動態修改。

4.3 事件

在el 和 data屬性基礎上再添加 methods屬性

v-on 綁定事件
v-on 一般簡寫為 @
v-bind 一般簡寫為：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head> <body><div id="app"><button v-on:click="search()">查詢</button><p>你要查詢的是：{{result.title}}</p><p> <a v-bind:href="result.site" target="_blank">{{result.title}} </a></p></div>  <script src="./lib/vue.js"></script> <script>//代碼部分//創建vue對象，var vue = new Vue({el:'#app', //綁定視圖層data:{ //定義要給前端的數據,頁面的所有數據都來自dataserachMap:{keyword:'zz'},//查詢結果result:{}},methods:{ //事件search(){console.log("search")this.result={"title":"zz","site":"https://blog.csdn.net/nzzynl95_"}}}})</script></body> </html>

結果展示：

5. 路由

通過路由實現單頁面跳轉
創建一個vue-router文件夾 == > 下載vue和vue-router ==> 創建一個lib文件夾，將vue.js和vue-router.js復制一份到此lib文件夾中 ==> 創建一個路由.html文件

路由.html文件：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"><h1>Hello,App!</h1><p><router-link to="/">首頁</router-link><router-link to="/student">學員管理</router-link><router-link to="/teacher">講師管理</router-link></p><router-view></router-view></div><script src="./lib/vue.js"></script><script src="./lib/vue-router.js"></script><script>//1、定義路由的組件const welcome = { template: '<div>歡迎</div>' }const student = { template: '<div>Student List</div>' }const teacher = { template: '<div>Teachet List</div>' }//2、定義路由const routes = [{ path: '/', redirect: '/welcome' },{ path: '/welcome', component: welcome },{ path: '/student', component: student },{ path: '/teacher', component: teacher }]// 3、創建 router實例const router = new VueRouter({routes: routes //})// 掛載路由new Vue({el: '#app',router})</script></body></html>

結果展示：

6. axios 異步通信

ajax技術是一種在無需重新加載整個網頁情況下，能更新部分網頁的技術，而axios是ajax技術的一種實現

vue推薦使用axios做通信！

創建一個axios文件夾 == > 下載vue和axios ==> 創建一個lib文件夾，將vue.js和axios.js復制一份到此lib文件夾中 ==> 創建一個 axios.html文件 ==>創建一個list.json文件夾

axios.html文件：

<div id="app"><button @click="getList()">測試</button></div><script src="./lib/vue.js"></script><script src="./lib/axios.js"></script><script>var vue = new Vue({el: '#app',data: {lists: []},methods: {// 前后端分離開發中，前端接收數據并渲染，后臺只用提供json數據getList() {// 可以在本地新建一個json數據文件，用來測試ajax請求axios.get('list.json').then(response => {console.log(response)// 后端接收的值交給前端的vue管理this.lists = response.data})}}})</script>

list.json文件：

[{'name1':'小白' },{'name2':'小灰' },{'name3':'小藍' } ]

結果展示：

7. Vue實際項目開發學習

將一個完整項目復制到當前nodejs文件夾下 ==> npm install 下載依賴 ==>npm run dev 啟動項目

整個項目目錄：

安裝完依賴，啟動成功后，自動跳轉到登錄頁面

輸入用戶名和密碼后，成功進入

以上就是 Vue第一天快速入門的學習，從下載安裝新軟件，到熟悉軟件，再到創建簡單的小程序！

總結

以上是生活随笔為你收集整理的Vue——快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： SSM整合——Spring+Spring
下一篇： Vue+flask前后端开发