Vue框架基础知识
一、初始Vue.js
1.是一套用于構(gòu)建用戶界面的漸進式框架 -- 前端框架
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 -- 只維護不更新
V3.x:3.2.36 -- 維護更新
二、安裝
1.下載后使用<script>引入:①下載后引入
②使用CDN
2.使用NPM
3.使用vue-cli:vue的腳手架工具
三、基本語法
1.使用<script>引入vue后,Vue就被注冊成了全局變量
2.組件:一個預(yù)定義選項的vue實例(vue.js的實例就是組件)
3.vue應(yīng)用:一個根實例和多個vue實例組成
vue.js應(yīng)用都是由一個根組件和多個子組件組成
4.創(chuàng)建根實例
var vm = new Vue({// el:"#app", //掛載元素(vue的作用范圍) }).$mount("#app")5.實例選項:
el:掛載元素(vue的作用范圍) 注意:1.只能用在根實例2.不能掛載到html或body上 data:實例的數(shù)據(jù)對象 -- ?只有寫在data當(dāng)中的數(shù)據(jù)才能夠在HTML中直接訪問 注意:根實例上為對象;子實例中是一個函數(shù),返回數(shù)據(jù)對象 methods:實例的方法(自定義) -- 對象格式,對象的屬性名就是方法名,屬性值就是方法體 4.生命周期鉤子:本質(zhì)是一個函數(shù),由組件在實例化過程中自動調(diào)用 beforeCreate(),created(),beforeMount(),mounted(), beforeUpdate(),updated(),beforeDestroy(),destroyed()6.實例方法或?qū)傩?#xff1a;屬性和方法前有$
vm.$el:獲取根實例綁定的el屬性 vm.$mount():手動綁定el屬性$data:獲取實例的數(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:通過表達式的值真假,來切換元素的display屬性
2.v-if:通過表達式的值真假,來渲染/不渲染內(nèi)容
3.v-else-if:v-if的else-if塊
4.v-else:`v-if塊
區(qū)別:v-show是用過display屬性實現(xiàn);v-if是渲染或不渲染元素
列表渲染
1.v-for:基于一個數(shù)組渲染一個列表,參數(shù)可以是數(shù)組,對象,賦值,字符串,具有遍歷器屬性的值
<ul><li v-for="(val,key,index) in/of list" :key="val.id"></li> </ul>2.注意:①當(dāng)為數(shù)值,遍歷的是數(shù)值對應(yīng)的次數(shù)
②對象和數(shù)組更新檢測(pop,sort,shift,unshift,reverse,splite)
過濾器
1.作用:實現(xiàn)文本格式化
2.創(chuàng)建:①Vue.filter():創(chuàng)建全局過濾器 -- 所有組件可用,必須在組件實例化之前注冊
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:實例選項,創(chuàng)建局部過濾器 -- 當(dāng)前實例可用
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ù)器" v-on:click="counts"> --><!-- 綁定事件簡寫 --><input type="button" value="計數(shù)器" @click="counts"><!-- 綁定事件簡寫 (簡寫+動態(tài)) --><input type="button" value="計數(shù)器" @[c]="counts"><!-- 綁定事件傳參 --><input type="button" value="計數(shù)器" @click="counts2(123,$event)"><!-- 綁定事件(使用修飾符:阻止默認(rèn)行為+事件處理函數(shù)) --><a href="filter.html" @click.prevent="counts">過濾器</a><!-- 綁定事件(使用修飾符:阻止默認(rèn)行為+省略了事件處理函數(shù)) --><a href="filter.html" @click.prevent>過濾器</a><!-- 錯誤:不能直接在事件綁定中寫js代碼 --><!-- <input type="button" value="點擊" @click="alert(666)"> --><!-- 綁定事件(鍵盤事件+按鍵碼作為修飾符-event.key) --><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ù)組格式
<div :style="[{color:'red'},]"></div>組件基礎(chǔ)
1.定義:可復(fù)用的vue實例,并且都有一個名字
2.組件注冊:①全局注冊:應(yīng)用在注冊之后所有新創(chuàng)建的根實例及子組件中
Vue.component("component-name",{//options -- 選項對象})②局部注冊:應(yīng)用在當(dāng)前組件中
components:{"component-name":{//options} } 注意:組件名命名最后按kabab-case方式命名,也可以使用大駝峰命名,但是DOM當(dāng)中只能用kabab-case方式調(diào)用3.組件選項:①template:實例的模板
{//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, //是否必填//驗證這個值validator:fuction(v){return true/false} } } 注意:①父傳子默認(rèn)值為string,如果需要傳遞的值的靜態(tài)類型,則需要使用v-bind傳遞②單項數(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是父實例的數(shù)據(jù),是默認(rèn)插槽的分發(fā)內(nèi)容-->{{msg}}<!--下面指向slot為slot1的分發(fā)內(nèi)容--><tempalte v-slot:slot1>Hello</tempalte><!--獲取作用域插槽傳遞的數(shù)據(jù)并作為分發(fā)內(nèi)容+v-slot簡寫+解構(gòu)插槽prop--><tempalte #slot2="{user}">{{user}}</tempalte></child-component> </div> 2.子模板 <template id="child"><div><!--默認(rèn)插槽:有默認(rèn)值為Hi~,當(dāng)沒有傳遞分發(fā)內(nèi)容時顯示--><slot>Hi~</slot><!--具名插槽:指向template的v-slot屬性--><slot name="slot1"></slot><!--作用域插槽:將自身的user作為插槽的prop傳遞給父--><slot name="slot2" :user="user"></slot></div> </template> 注意:msg是父實例中的數(shù)據(jù)!二、路由
1.vue-router:官方路由,用于實現(xiàn)單頁應(yīng)用
2.安裝:1.通過<script>標(biāo)簽引入
2.通過包管理器安裝
3.注意:vue.js 2.×對應(yīng)的路由為v3.×
4.路由實現(xiàn)步驟:1.導(dǎo)入路由 -- 先導(dǎo)入vue再導(dǎo)入vue-router
2.掛載路由到根實例
new Vue({//掛載到根實例的router選項上router:new VueRouter({//路由的映射關(guān)系routes:[{path:"/",component:{},redirect:"/page1"}]} //router的構(gòu)建選項linkActiveClass:"active" //全局設(shè)置選中鏈接的默認(rèn)class) })3.通過<router-link>實現(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í)行腳本二、項目初始化
1.創(chuàng)建一個大項目目錄:tiktok
2.進入目錄,執(zhí)行命令:$ vue init webpack web
... Vue build:通過方向鍵選擇 -- 選擇構(gòu)建版本 1.完整版:運行時(Runtime)+編譯器(Complier) 2.編譯器:編譯模板3.開啟項目:1.進入項目目錄:$ cd web
2.執(zhí)行命令:$ npm run dev或npm start
4.開啟成功之后根據(jù)提示打開對應(yīng)的URL
5.目錄結(jié)構(gòu):
build:webpack配置目錄--打包相關(guān) config:項目配置目錄 node_modules:包目錄 src:源文件目錄--assets:靜態(tài)資源目錄--base64壓縮--components:組件目錄--router:路由目錄--index.js:路由--App.vue:根組件--main.js:根組件實例化文件 static:靜態(tài)資源目錄--直接加載 .babelrc:babel配置文件 .postcssrc.js:轉(zhuǎn)換css的配置文件 -- 加特定廠商前綴 index.html:主頁 package.json package-lock.json6..vue文件:單文件組件,共包含三部分
<template></template>:組件模板 <script> export default {//組件選項 } </script>:JS代碼 <style></style>:CSS代碼 scoped:style添加這個屬性即表示樣式只能作用于當(dā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版本安裝vant24.引入組件:自動按需引入組件
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實例方法實現(xiàn)導(dǎo)航(跳轉(zhuǎn)頁面)
2.路由實例:指向router/index.js中創(chuàng)建的實例,有對應(yīng)的方法和屬性,在vue實例中通過this.$router訪問
3.路由對象:指向當(dāng)前激活的路由狀態(tài)信息,是一個對象,可以獲取相關(guān)屬性,在vue實例中通過this.$route訪問
4.router實例方法:
router.push():給history添加新記錄--跳轉(zhuǎn)到新頁面 router.replace():作用同push(),但是不會給history添加新記錄,而是替換當(dāng)前的history router.go(2):前進/后退n步嵌套路由
1.給路由添加children選項,用來配置子路由
{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)用接口,驗證用戶是否已經(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)用,并且可以使用@
<img src="@/assets/logo.png" width="50%">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%">驗證用戶是否登錄
導(dǎo)航守衛(wèi)
1.監(jiān)聽路由訪問,通過判斷決定是否正常訪問路由或取消
2.分類:①全局守衛(wèi)
②路由獨享守衛(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)用// 不!能!獲取組件實例 `this`// 因為當(dāng)守衛(wèi)執(zhí)行前,組件實例還沒被創(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>組件:給任何元素和組件添加進入/離開過渡
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-active2.基于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); //讀取的文件對象} }接口
用戶模塊
一、驗證用戶是否已注冊
1.地址:http://localhost/users/isregister
2.請求方式:GET
3請求參數(shù)
| 1 | tel | string | 手機號,必填 |
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ù):
| 1 | tel | string | 手機號 |
| 2 | pwd | string | 密碼 |
4.返回的參數(shù):JSon格式
{errCode:0,errMsg:"注冊成功",result: }三、文件上傳
1.地址:http://localhost/uploads -- 視頻上傳
2.請求方式POST
3.參數(shù):
| 1 | video | file | 需要上傳的視頻 |
總結(jié)
- 上一篇: PCM音频数据、DSD音频数据,spdi
- 下一篇: 客制化字段新增