當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue框架基础知识

發(fā)布時間：2024/1/1 vue 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue框架基础知识小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、初始Vue.js

1.是一套用于構(gòu)建用戶界面的漸進(jìn)式框架 -- 前端框架

2.自底向上逐層應(yīng)用

3.數(shù)據(jù)驅(qū)動型框架

4.構(gòu)建SPA應(yīng)用 -- 單頁應(yīng)用程序

5.MVVM結(jié)構(gòu)

6.作者：尤雨溪

7.上線時間：2014年2月

8.兼容性：IE8以上

9.版本：V2.x:2.6.14 -- 只維護(hù)不更新

V3.x：3.2.36 -- 維護(hù)更新

二、安裝

1.下載后使用<script>引入:①下載后引入

②使用CDN

2.使用NPM

3.使用vue-cli:vue的腳手架工具

三、基本語法

1.使用<script>引入vue后，Vue就被注冊成了全局變量

2.組件：一個預(yù)定義選項(xiàng)的vue實(shí)例（vue.js的實(shí)例就是組件）

3.vue應(yīng)用：一個根實(shí)例和多個vue實(shí)例組成

vue.js應(yīng)用都是由一個根組件和多個子組件組成

4.創(chuàng)建根實(shí)例

var vm = new Vue({// el:"#app", //掛載元素（vue的作用范圍） }).$mount("#app")

5.實(shí)例選項(xiàng)：

el：掛載元素（vue的作用范圍）注意：1.只能用在根實(shí)例2.不能掛載到html或body上 data：實(shí)例的數(shù)據(jù)對象 -- ?只有寫在data當(dāng)中的數(shù)據(jù)才能夠在HTML中直接訪問注意：根實(shí)例上為對象；子實(shí)例中是一個函數(shù)，返回數(shù)據(jù)對象 methods：實(shí)例的方法（自定義） -- 對象格式，對象的屬性名就是方法名，屬性值就是方法體 4.生命周期鉤子：本質(zhì)是一個函數(shù)，由組件在實(shí)例化過程中自動調(diào)用 beforeCreate(),created(),beforeMount(),mounted(), beforeUpdate(),updated(),beforeDestroy(),destroyed()

6.實(shí)例方法或?qū)傩?#xff1a;屬性和方法前有$

vm.$el:獲取根實(shí)例綁定的el屬性 vm.$mount():手動綁定el屬性$data:獲取實(shí)例的數(shù)據(jù)對象

模板語法

1.作用：將DOM和vue中數(shù)據(jù)雙向綁定

2.插值：①{{msg}}:將msg作為字符串插入，標(biāo)簽之間

②v-text：將數(shù)據(jù)作為字符串輸出

③v-html：將數(shù)據(jù)作為HTML內(nèi)容插入 -- xss攻擊

④v-bind：將數(shù)據(jù)作為屬性值插入

1.作為屬性值綁定：val就是data中的變量 <div v-bind:attr="val"></div> 2.作為屬性名綁定：attr和val都是data中的變量 <div v-bind:[attr]="val"></div> 3.簡寫 <div :attr="val"></div> 4.綁定多個屬性值：ids,attr,title都是data中的變量 <div v-bind="{id：ids,[attr]:'myclass',title"</div> 5.使用修飾符 <div :attr.prop="val"></div>

指令

1.是帶有v-開頭的特殊標(biāo)簽屬性 -- 值變，DOM變

2.v-once:只渲染元素和組件一次 -- 沒有參數(shù)

3.v-pre：跳過當(dāng)前元素及子元素的編譯 -- 沒有參數(shù)

4.v-model：用來在表單控件或組件上創(chuàng)建雙向綁定

1.綁定text的value屬性,input事件 <input type="text" v-model="msg"> 2.修飾符： .lazy：將input事件更改為change事件 .number：將獲取的input的值轉(zhuǎn)換為number類型(value獲取默認(rèn)為string) .trim：過濾輸入內(nèi)容的前后空格 <input type="text" v-model.lazy.trim="msg">

5.v-cloak:隱藏{{}}直到模板編譯完成

1.css中設(shè)置v-cloak樣式 [v-cloak]{display:none} 2.在{{}}標(biāo)簽上使用v-cloak指令 <div v-cloak>{{msg}}</div>

6.v-on:綁定事件監(jiān)聽器

7.v-slot:提供具名插槽或需要接受prop的插槽

條件渲染

1.v-show:通過表達(dá)式的值真假，來切換元素的display屬性

2.v-if:通過表達(dá)式的值真假，來渲染/不渲染內(nèi)容

3.v-else-if:v-if的else-if塊

4.v-else:`v-if塊

區(qū)別：v-show是用過display屬性實(shí)現(xiàn)；v-if是渲染或不渲染元素

列表渲染

1.v-for：基于一個數(shù)組渲染一個列表，參數(shù)可以是數(shù)組，對象，賦值，字符串，具有遍歷器屬性的值

2.注意：①當(dāng)為數(shù)值，遍歷的是數(shù)值對應(yīng)的次數(shù)

②對象和數(shù)組更新檢測（pop，sort，shift，unshift，reverse，splite）

過濾器

1.作用：實(shí)現(xiàn)文本格式化

2.創(chuàng)建：①Vue.filter()：創(chuàng)建全局過濾器 -- 所有組件可用，必須在組件實(shí)例化之前注冊

Vue.filter("過濾器名"，(val[,arg])=>{ ?//val是待過濾的值,arg是其他參數(shù)return v; ?//過濾之后的值 })Vue.filter("cap",val=>{ ?//val就是要過濾的值//判斷val是否是字符串return val.charAt(0).toUpperCase()+val.slice(1); ?//return的返回值就是過濾之后的值}); ?//注冊全局過濾器 -- 先注冊再使用/* Vue.filter("cap",val=>{ //val就是要過濾的值//判斷val是否是字符串return val.charAt(0).toUpperCase()+val.slice(1); //return的返回值就是過濾之后的值}); */

②filters：實(shí)例選項(xiàng)，創(chuàng)建局部過濾器 -- 當(dāng)前實(shí)例可用

filters:{過濾器名：function(val[,arg...]){return v} }filters:{cap(val,type){ //val：待過濾的值 type：就是參數(shù)if(type % 2)return val.toUpperCase();elsereturn val.toLowerCase();}}

3.調(diào)用

1.{{val | 過濾器名}} 2.{{val| 過濾器1 | 過濾器2...}} 3.{{val | 過濾器名(arg)}} -- arg作為過濾器的第二個參數(shù)，依次類推 4.<div v-bind:title="val" | 過濾器>

事件綁定

1.事件綁定：v-on

2.語法格式

<input type="button" value="計數(shù)器" @click="counts"><input type="button" value="計數(shù)器" @[c]="counts"><input type="button" value="計數(shù)器" @click="counts2(123,$event)"><a href="filter.html" @click.prevent="counts">過濾器</a><a href="filter.html" @click.prevent>過濾器</a><input type="text"@keydown.w="counts">

3.注意：①事件如果沒有傳參，默認(rèn)參數(shù)為event對象

②多個修飾符可直接使用.連接

③按鍵碼作為修飾符時，需要轉(zhuǎn)換為kebab-case

樣式處理

1.樣式綁定：v-bind

2.class綁定：①對象格式

<div :class="{active:true,active2:isActive,[className]:isTrue}"></div> active,active2是固定class名，className是動態(tài)class名規(guī)則：對象的屬性值為真時應(yīng)用class  <li v-for="name of names" :class="{'color-red':true}">{{name}}</li>  <h1 :class="{[colors]:isGreen}">Hello</h1>

②數(shù)組格式

<div :class="['active',class2,{class3:isTrue},true ? class4 : class5]"></div> 規(guī)則：將數(shù)組中的樣式全部應(yīng)用到元素上

3.style綁定：①對象格式

<div :style="{color:'red','font-size':'12px',fontWeight:'blod',[sname]:sval,background}"></div> 規(guī)則：對象的屬性名就是css屬性名對象屬性對應(yīng)的值就是css屬性值

②數(shù)組格式

組件基礎(chǔ)

1.定義：可復(fù)用的vue實(shí)例，并且都有一個名字

2.組件注冊：①全局注冊：應(yīng)用在注冊之后所有新創(chuàng)建的根實(shí)例及子組件中

Vue.component("component-name",{//options -- 選項(xiàng)對象})

②局部注冊：應(yīng)用在當(dāng)前組件中

components:{"component-name":{//options} } 注意：組件名命名最后按kabab-case方式命名，也可以使用大駝峰命名，但是DOM當(dāng)中只能用kabab-case方式調(diào)用

3.組件選項(xiàng)：①template:實(shí)例的模板

{//template:"<h1></h1>", //直接使用html字符串作為模板template："#tem", //匹配頁面中template id為tem中的innerHTML作為模板data:function(){return {}},components:{"component-name":{}} }注意：template只能有一個根元素

②data：必須是一個函數(shù)，返回一個數(shù)據(jù)對象

③components：用來注冊子組件

④props:用來接受父傳遞的屬性值

組件傳值

1.父傳子：props傳值

1.父 <child-component msg="hello" :msg2="val"></child-component> 2.子 props：["msg","msg2"] props:{msg:String,msg2:{type:Number, //限制類型default:1, //當(dāng)父沒有傳遞這個值時顯示默認(rèn)值required:true, //是否必填//驗(yàn)證這個值validator:fuction(v){return true/false} } } 注意：①父傳子默認(rèn)值為string，如果需要傳遞的值的靜態(tài)類型，則需要使用v-bind傳遞②單項(xiàng)數(shù)據(jù)流：子組件不能更改父傳遞的值

2.子傳父：父能夠監(jiān)聽子組件的自定義事件

//1.觸發(fā)自定義事件 vm.$emit("event-name",[,arge...]); //arg就是參數(shù) //2.監(jiān)聽自定義事件 <component v-on:event-name="doThis"></componenet> -- 組件可以直接監(jiān)聽 vm.$on("event-name",function([val...]){//val就是自定義事件中傳遞的arg參數(shù) }) vm.$once():只監(jiān)聽一次自定義事件 vm.$off():移除監(jiān)聽器函數(shù)

3.兄弟傳值：子傳父，父傳子

插槽

1.是一套內(nèi)容分發(fā)的API：將父寫在子組件之間的內(nèi)容分發(fā)到子的模板中

2.用法：

1.父級模板 <div id="app"><child-component>{{msg}}<tempalte v-slot:slot1>Hello</tempalte><tempalte #slot2="{user}">{{user}}</tempalte></child-component> </div> 2.子模板 <template id="child"><div><slot>Hi~</slot><slot name="slot1"></slot><slot name="slot2" :user="user"></slot></div> </template> 注意：msg是父實(shí)例中的數(shù)據(jù)！

二、路由

1.vue-router：官方路由，用于實(shí)現(xiàn)單頁應(yīng)用

2.安裝：1.通過<script>標(biāo)簽引入

2.通過包管理器安裝

3.注意：vue.js 2.×對應(yīng)的路由為v3.×

4.路由實(shí)現(xiàn)步驟：1.導(dǎo)入路由 -- 先導(dǎo)入vue再導(dǎo)入vue-router

2.掛載路由到根實(shí)例

new Vue({//掛載到根實(shí)例的router選項(xiàng)上router:new VueRouter({//路由的映射關(guān)系routes:[{path:"/",component:{},redirect:"/page1"}]} //router的構(gòu)建選項(xiàng)linkActiveClass:"active" //全局設(shè)置選中鏈接的默認(rèn)class) })

3.通過<router-link>實(shí)現(xiàn)路由導(dǎo)航

<router-link to="/path">導(dǎo)航1</router-link> 注意：router-link會被渲染成一個超鏈接超鏈接默認(rèn)選中樣式為"router-link-active"

4.設(shè)置渲染出口 -- 渲染的組件最終顯示的位置

<router-view></router-view>

一、環(huán)境搭建

1.cli工具：vue.js的腳手架工具

2.版本：vue-cli：老版本，主要基于vue.js v2.×+webpack構(gòu)建應(yīng)用

@vue/cli：新版本，主要基于vue.js v3.×+vite構(gòu)建應(yīng)用

3.用戶端：vue-cli+vant

4.安裝vue-cli：$ npm i vue-cli -g

5.問題：1.安裝完成后不能識別為一個命令

原因：沒有將vue-cli添加到環(huán)境變量 1.找到全局安裝包路徑：vue.cmd所在目錄 2.添加為環(huán)境變量 3.重啟終端或重啟電腦

2.安裝完成后不能執(zhí)行vue命令：powershell異常,cmd正常

原因：powershell執(zhí)行策略 1.查看當(dāng)前的執(zhí)行策略：get-executionPolicyRestricted:不允許執(zhí)行腳本 2.重新設(shè)置執(zhí)行策略：set-executionPolicy 選擇 'Y'RemoteSigned:允許執(zhí)行腳本

二、項(xiàng)目初始化

1.創(chuàng)建一個大項(xiàng)目目錄：tiktok

2.進(jìn)入目錄，執(zhí)行命令：$ vue init webpack web

... Vue build：通過方向鍵選擇 -- 選擇構(gòu)建版本 1.完整版：運(yùn)行時(Runtime)+編譯器(Complier) 2.編譯器：編譯模板

3.開啟項(xiàng)目：1.進(jìn)入項(xiàng)目目錄：$ cd web

2.執(zhí)行命令：$ npm run dev或npm start

4.開啟成功之后根據(jù)提示打開對應(yīng)的URL

5.目錄結(jié)構(gòu)：

build:webpack配置目錄--打包相關(guān) config:項(xiàng)目配置目錄 node_modules:包目錄 src:源文件目錄--assets:靜態(tài)資源目錄--base64壓縮--components:組件目錄--router:路由目錄--index.js:路由--App.vue:根組件--main.js:根組件實(shí)例化文件 static:靜態(tài)資源目錄--直接加載 .babelrc:babel配置文件 .postcssrc.js:轉(zhuǎn)換css的配置文件 -- 加特定廠商前綴 index.html:主頁 package.json package-lock.json

6..vue文件：單文件組件，共包含三部分

<template></template>：組件模板 <script> export default {//組件選項(xiàng) } </script>：JS代碼 <style></style>：CSS代碼 scoped:style添加這個屬性即表示樣式只能作用于當(dāng)前組件

三、搭建項(xiàng)目框架

vant框架

1.vant框架：是一個移動端組件庫，于2017年開源 -- 移動端UI框架

2.版本：vant2：vue.js v2.×

vant3：vue.js v3.×

3.安裝：

$npm i vant -s：vue3版本安裝最新的vant $npm i vant@latest-v2 -S：vue2版本安裝vant2

4.引入組件：自動按需引入組件

1.安裝babel-plugin-import插件：是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉(zhuǎn)換為按需引入的方式 $npm i babel-plugin-import -D 2..babelrc配置文件中添加配置 {"plugins": [["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]] } 3.在main.js中導(dǎo)入vant組件并安裝 import {Tabbar} from "vant" Vue.use(Tabbar);

編程式導(dǎo)航

1.通過router實(shí)例方法實(shí)現(xiàn)導(dǎo)航(跳轉(zhuǎn)頁面)

2.路由實(shí)例：指向router/index.js中創(chuàng)建的實(shí)例，有對應(yīng)的方法和屬性，在vue實(shí)例中通過this.$router訪問

3.路由對象：指向當(dāng)前激活的路由狀態(tài)信息，是一個對象，可以獲取相關(guān)屬性，在vue實(shí)例中通過this.$route訪問

4.router實(shí)例方法：

router.push()：給history添加新記錄--跳轉(zhuǎn)到新頁面 router.replace()：作用同push(),但是不會給history添加新記錄，而是替換當(dāng)前的history router.go(2)：前進(jìn)/后退n步

嵌套路由

1.給路由添加children選項(xiàng)，用來配置子路由

{path:"/main",component:Main,children:[{path:"msg", //子路由，不需要加/，加/表示根路由component:Msg}] }

2.在父路由組件中,依舊通過<router-view></router-view>作為渲染出口

Sass

1.安裝依賴包：npm i node-sass -D

npm i sass-loader -D

2.引入sass：在vue文件的<style>中添加：lang="scss"

3.問題解決：

1.安裝依賴報錯：排除以下問題 1.1.使用的國外鏡像，下載慢導(dǎo)致錯誤--使用cnpm或者將源設(shè)置為淘寶地址 1.2.更改用戶目錄下的.npmrc文件 -- npm get globalconfig查看npmrc文件位置 phantomjs_cdnurl=http://cnpmjs.org/downloads sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ registry=https://registry.npm.taobao.org 2.頁面中使用 <style lang="scss"> 如果編譯不成功，排除是否是版本問題：建議sass-loader安裝7.3.1的版本 npm install sass-loader@7.3.1 -D npm install node-sass@4.14.1 -D 注意：上面sass版本需要配合node14版本如果node版本過高，會報如下錯誤：Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93) 3.如果電腦沒有安裝python，則需要下載安裝python -V：查看是否有安裝python

登錄組件

1.樣式無法作用到組件上：給選擇器添加>>>

.parent>>>.child{}

2.調(diào)用接口，驗(yàn)證用戶是否已經(jīng)注冊

Axios使用

1.安裝Axios：npm i axios -S

2.綁定Axios到Vue：

main.js import Axios from "axios" Vue.prototype.$http = Axios

設(shè)置代理，訪問遠(yuǎn)程資源

1.配置config/index.js

proxyTable: {"/apis":{target:"http://localhost", //目標(biāo)資源地址changeOrigin:true, //是否跨域pathRewrite:{"^/apis":"" //是否重寫接口}}}

2.接口調(diào)用更改：

this.$http.get("http://localhost/users/isregister?tel="+this.tel) 改為： this.$http.get("/apis/users/isregister?tel="+this.tel)

assets圖片調(diào)用

1.靜態(tài)調(diào)用：可以直接調(diào)用，并且可以使用@

2.動態(tài)綁定：不能使用@，也不能使用相對路徑

3.動態(tài)綁定解決方案：1.將圖片保存到static目錄再加載

js: data{src:"../../static/logo.png"} html: <img :src="src" width="50%">

2.使用require加載：可以使用@

js: data{src:require("@/assets/logo.png")} html: <img :src="src" width="50%">

3.使用import加載：可以使用@

js: import logo from "@/assets/logo.png"data{src:logo} html: <img :src="src" width="50%">

驗(yàn)證用戶是否登錄

導(dǎo)航守衛(wèi)

1.監(jiān)聽路由訪問，通過判斷決定是否正常訪問路由或取消

2.分類：①全局守衛(wèi)

②路由獨(dú)享守衛(wèi)：針對單個路由

③組件內(nèi)的守衛(wèi)：只針對單個組件

3.格式：

//組件內(nèi)的守衛(wèi) beforeRouteEnter(to, from, next) { //to:接下來訪問的路由對象；from：從哪個路由對象過來；next:一個方法，表示下一步該如何執(zhí)行,一定要調(diào)用 // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用// 不！能！獲取組件實(shí)例 `this`// 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒被創(chuàng)建}beforeRouteEnter (to, from, next) {// ...to：接下來訪問的路由對象//from：從那個路由對象來}

4.使用next跳轉(zhuǎn)報錯：

解決方案：更改vue-router原型方法

router/index.js 在Vue.use(Router)之前添加如下代碼： const originalPush = Router.prototype.push Router.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject) return originalPush.call(this, location).catch(err => err) }

組件切換動畫

1.<transition>組件：給任何元素和組件添加進(jìn)入/離開過渡

2.使用動畫：1.基于CSS類名綁定

1.給<transition>組件一個name屬性，作為六個內(nèi)置class的前綴 2.根據(jù)需求定義CSS：v-enter,v-enter-to,v-enter-activev-leave,v-leave-to,v-leave-active

2.基于JavaScript鉤子綁定

v-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on:leave-cancelled="leaveCancelled"

上傳組件

1.組件設(shè)置：

<van-field label="選擇視頻"><template #input><van-uploader v-model="video" accept="video/*" maxCount="1" :after-read="afterRead" /></template> </van-field>

2.文件上傳：after-read是文件讀取后會執(zhí)行的函數(shù)，讀取的文件file為默認(rèn)的形參

afterRead(file){console.log(file);console.log(this.video);file.status = "uploading";file.message = "上傳中...";//將file格式化var formData = new FormData(); //表示表單鍵值對結(jié)構(gòu)的表示方式，數(shù)據(jù)編碼格式為multipart/form-dataformData.append("video",file.file);//調(diào)用接口上傳文件this.$http.post("/apis/uploads",formData).then(data=>{file.status = "success";file.message = "上傳成功~";console.log(data);})}

3.如果需要after-read需要傳遞其他參數(shù)，那么file就需要作為一個函數(shù)返回

<van-field label="選擇視頻"><template #input><van-uploader v-model="video" accept="video/*" maxCount="1" :after-read="afterRead('video')" /></template> </van-field>js中： afterRead(param){return file=>{console.log(param); //videoconsole.log(file); //讀取的文件對象} }

接口

用戶模塊

一、驗(yàn)證用戶是否已注冊

1.地址：http://localhost/users/isregister

2.請求方式：GET

3請求參數(shù)

編號參數(shù)名參數(shù)類型說明

tel

string

手機(jī)號，必填

4.返回參數(shù)：JSON格式

{errCode:0, //錯誤代碼errMsg:"", //錯誤信息 }

二、用戶注冊/登錄

1.地址：http://192.168.4.169/users/register -- 注冊

http://192.168.4.169/users/login -- 登錄

2.請求方式：POST

3.請求參數(shù)：

編號參數(shù)名參數(shù)類型說明

1	tel	string	手機(jī)號
2	pwd	string	密碼

4.返回的參數(shù)：JSon格式

{errCode:0,errMsg:"注冊成功"，result: }

三、文件上傳

1.地址：http://localhost/uploads -- 視頻上傳

2.請求方式POST

3.參數(shù)：

編號參數(shù)名參數(shù)類型說明

video

file

需要上傳的視頻

總結(jié)

以上是生活随笔為你收集整理的Vue框架基础知识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： PCM音频数据、DSD音频数据，spdi
下一篇： 2022年前端Vue常见面试题大全（三万