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

vue

Vue入门教程

發布時間：2023/12/8 vue 45 豆豆

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

文章目錄

- 一、Vue介紹
- 二、安裝
- 三、vue基本用法
- 四、npm項目的開發

一、Vue介紹

簡介：Vue.js（ /vju?/）是一套構建用戶界面的漸進式框架, Vue只關注視圖層，采用自底向上增量開發的設計。
特點：響應式編程、組件化。
優勢:輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快。

注：這里是基于Vue2的教程，現在已經出了Vue3,但是還沒完全普及，并且Vue3基本兼容Vue2，所以可以先學Vue2，再去了解Vue3的更新，后面會更新這部分內容。

二、安裝

一般有三種方式：本地下載、CDN和NPM(推薦)。
1.本地下載地址：https://vuejs.org/js/vue.min.js，下載完直接引入即可。

2.CDN: https://unpkg.com/vue/dist/vue.js
可以放到項目里測試一下，就跟普通引入js一樣，非常簡單！

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>VueTest</title><script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script> </head> <body> <div id="cdn"><p>{{ message }}</p> </div><script>new Vue({el: '#cdn',data: {message: 'Vue Test(cdn)'}}) </script> </body> </html>

頁面展示結果如下：

3.NPM
一般在大型項目中，推薦使用NPM的方式，方便包管理，一個個在HTML文件中引入會很不方便。
(1)cmd執行下面命令安裝vue
注意選好當前的目錄，vue和項目會直接放在這個目錄下。

npm install cnpm -g cnpm install vue

(2)查看是否安裝成功

vue -V

(3)安裝vue腳手架，并創建項目vue-pro

cnpm install --global vue-cli vue init webpack vue-pro

此時會彈出一些驗證，直接回車即可，Author那里可以輸入你的名字。

(4)進入項目安裝運行

cd vue-pro cnpm install cnpm run dev

(5)登錄測試
進入網址http://localhost:8080/，頁面展示如下

三、vue基本用法

1.基本語法
var vm= new Vue({
…
})
其中常用成員有下面幾種
掛載點 el：實例id
data：數據
methods：方法
computed：計算
watch：監聽
filter:過濾器
delimiters：分隔符,可以改變插值表達式的符號，比如默認是{{ msg }}，設置了delimiters: [' ${', '}']，要寫成$ { msg }才有效

2.vue對象成員使用
放到項目里測試一下這個頁面

<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="utf-8"><title>VueTest</title><script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"><p>{{ msg }}</p><button v-on:click="onClick">測試</button><p>{{ a }}+{{ b }}={{ c }}</p> </div><script>new Vue({el: '#app',data: {msg: 'Vue Test',a : 1,b : 2},methods: {onClick () {this.a = 0;//alert("我被點擊了");}},computed: {c : function () {return this.a + this.b;}},watch: {a : function ( newVal , oldVal ) {alert("a從"+oldVal+"變成了"+ newVal);}}//,//delimiters: ['${', '}']}) </script></body> </html>

點擊測試，可以看到效果如下：

這里區別一些computed 和 watch 的使用場景：computed 的話是通過幾個數據的變化，來影響一個數據，而 watch，則是可以一個數據的變化，去影響多個數據

3.vue常用語法
下面介紹內容有：
條件語句if、循環語句for、
監聽事件v-on、綁定屬性v-bind、表單輸入綁定v-model。

放到項目里測試一下這個頁面

<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="utf-8"><title>VueTest</title><script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"><p v-if="score>=90">真棒!</p><p v-else-if="score>=60&&score<90">繼續加油!</p><p v-else>加把勁!</p><li v-for="item in colors">{{ item }}</li><button v-on:click="onClick">點擊事件</button><div v-bind:class="{'green': greenActive}"></div><input v-model="msg"><p>輸入了{{ msg }}</p> </div><script>new Vue({el: '#app',data: {score: 99,colors: ['紅紅的','黃黃的','綠的'],greenActive: false,msg: ' '},methods: {onClick () {//alert("我被點擊了");this.greenActive = true;}}}) </script> <style>.green {width: 100px;height: 20px;background: green;} </style> </body> </html>

可以看到點完按鈕和輸入框后，展示效果如下

4.組件使用
(1)全局組件
(2)局部組件
(3)Props屬性
運行下面代碼：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>VueTest</title><script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app">app:<somewhere></somewhere><everywhere></everywhere><prop-test v-for="item in colors" v-bind:color="item" ></prop-test> </div> <br/><br/><br/> <div id="app2">app2:<somewhere></somewhere><everywhere></everywhere><prop-test v-for="item in colors" v-bind:color="item" ></prop-test> </div><script>// 注冊全局組件Vue.component('everywhere', {template: '<h1>全局組件</h1>'})//propsTest注意這里prop-test命名成propsTest會報錯，官方推薦命名規范是全小寫，單詞間用-連接Vue.component('prop-test',{props:['color'],template:'<li>{{color}}</li>'})var vm = new Vue({el: '#app',data :{colors: ['紅紅的','黃黃的','綠的']},components:{'somewhere':{template:'<h1>局部組件</h1>'}}})var vm2 = new Vue({el: '#app2',data :{colors: ['紅紅的2','黃黃的2','綠的2']},}) </script> </body> </html>

可看到結果如下：

(5)AJAX使用
使用下面代碼，post請求中的http://localhost:8080/test是我本地的代碼，返回的數據是“fucking good”

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>VueTest</title><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body> <div id="app">{{ info }} </div> <script type = "text/javascript">new Vue({el: '#app',data () {return {info: null}},mounted () {axios.post('http://localhost:8080/test').then(response => (this.info = response)).catch(function (error) { // 請求失敗處理console.log(error);});}}) </script> </body> </html>

結果如下：

四、npm項目的開發

1.導入idea
(1)首先在settings-plugins中搜索vue.js插件，沒安裝的可以安裝一下，高版本idea自帶。
(2)導入項目
①File->Open打開項目位置
②Run->Edit Configurations->左上角±>npm，然后按下圖配置

(3)啟動

可以看到結果如下

(4)測試
進入上圖中的網址http://localhost:8081，頁面正常展示

2.項目目錄功能詳解
(1)build：構建腳本目錄
1）build.js ==> 生產環境構建腳本；
2）check-versions.js ==> 檢查npm，node.js版本；
3）utils.js ==> 構建相關工具方法；
4）vue-loader.conf.js ==> 配置了css加載器以及編譯css以后自動添加前綴；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack開發環境配置；
7）webpack.prod.conf.js ==> webpack生產環境配置；
(2)config：項目配置
1）dev.env.js ==> 開發環境變量；
2）index.js ==> 項目配置文件；
3）prod.env.js ==> 生產環境變量；
(3)node_modules：npm 加載的項目依賴模塊
(4)src：這里是咱們要開發的目錄，基本上要作的事情都在這個目錄里。里面包含了幾個目錄及文件：
1）assets：資源目錄，放置一些圖片或者公共js、公共css。這里的資源會被webpack構建；
2）components：組件目錄，咱們寫的組件就放在這個目錄里面；
3）router：前端路由，咱們須要配置的路由路徑寫在index.js里面；
4）App.vue：根組件；
5）main.js：入口js文件；
(5)static：靜態資源目錄，如圖片、字體等。不會被webpack構建
(6)index.html：首頁入口文件，能夠添加一些 meta 信息等
(7)package.json：npm包配置文件，定義了項目的npm腳本，依賴包等信息
(8)README.md：項目的說明文檔，markdown 格式
.xxxx文件：這些是一些配置文件，包括語法配置，git配置等

3.簡單使用實例
(1)在代碼編寫的時候報了各種ESLint的錯，它的作用就是檢查代碼規范的，這里推薦配置一下.eslintrc.js，替換下rules這里.更新完記得重啟一下，修復下里面的格式問題。

// https://eslint.org/docs/user-guide/configuringmodule.exports = {root: true,parserOptions: {parser: 'babel-eslint'},env: {browser: true,},extends: [// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.'plugin:vue/essential',// https://github.com/standard/standard/blob/master/docs/RULES-en.md'standard'],// required to lint *.vue filesplugins: ['vue'],// add your custom rules hererules: {// allow async-await'generator-star-spacing': 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',/*0 或’off’：關閉規則。1 或’warn’：打開規則，并且作為一個警告，字體顏色為黃色（并不會導致檢查不通過）。2 或’error’：打開規則，并且作為一個錯誤，色體顏色為紅色(退出碼為1，檢查不通過)。*/// 以下為該項目自定義部分'indent': [2, 4], //縮進風格 - 開啟縮進4格'no-spaced-func': 2, //函數調用時函數名與()之間不能有空格 - 開啟'no-const-assign': 2, //禁止修改const聲明的變量 - 開啟'space-before-function-paren': [0, 'always'], //函數定義時括號前面要有空格 - 關閉'eol-last': 0, //文件以單一的換行符結束 - 關閉'camelcase': 0, //強制駝峰法命名 - 關閉'no-undef': 0, //不能有未定義的變量 - 關閉'no-alert': 0, //禁止使用alert confirm prompt - 關閉'arrow-parens': 0, //箭頭函數用小括號括起來 - 關閉'no-unused-vars':1} }

(2)在src/compnents下新建文件夾views并創建文件Test.vue，
并在router目錄下的index.js里面配置路由路徑。
!注意命名規范，首字母大寫,不然無法正常啟動
index.js：

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Test from '@/components/views/Test'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld}, {path: '/Test',name: 'Test',component: Test}] })

Test.vue：

<template><div class="Test">{{ msg }}</div> </template><script> export default {name: 'Test',data() {return {msg: 'Welcome to testVue Page'}} } </script><style scoped></style>

測試：http://localhost:8080/#/Test
結果如下：

TODO：父子組件

總結

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

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

上一篇：从多核到众核处理器
下一篇： 128-Vue中的事件修饰符-阻止冒泡事