2.1過濾器
(目前3.0已不支持使用2.0可以繼續(xù)使用)
作用:常用于文本的格式化肚邢。可以用在:插值表達(dá)式和v-bind屬性綁定问窃。
過濾器應(yīng)該被添加在JavaScript表達(dá)式的尾部经宏,由管道符進行調(diào)用
示例:
注意點:
1.要定義到filters節(jié)點下,本質(zhì)是一個函數(shù)
2.在過濾器中帽揪,一定要有return值
3.在過濾器的形參中,就可以獲取到管道符前面待處理的那個值
2.2 私有過濾器和全局過濾器
定義到filters節(jié)點下的過濾器稱為私有過濾器因為它只能在當(dāng)前vm實例所控制的el區(qū)域內(nèi)使用
如果希望在多個vue實例之間共享過濾器辅斟,則可以按照如下格式定義全局過濾器:
偵聽器
watch偵聽器允許開發(fā)者去監(jiān)視數(shù)據(jù)的變化转晰,從而針對數(shù)據(jù)的變化做特定的操作
語法格式:
偵聽器的格式
1.方法格式偵聽器
? ? ? ? 缺點1:無法在剛進入頁面的時候,自動觸發(fā)
? ? ? ? 缺點2:如果偵聽的是一個對象士飒,如果對象中的屬性發(fā)生變化查邢,不會觸發(fā)偵聽器
2.對象格式偵聽器
? ? 好處1:可以通過immediate選項,讓偵聽器自動觸發(fā)
? ? 好處2:可以通過deep選項变汪,讓偵聽器深度監(jiān)聽對象中每個屬性的變化
深度偵聽
計算屬性
計算屬性是指通過一系列運算之后侠坎,最終得到的一個屬性
這個動態(tài)計算出來的屬性值可以被模板結(jié)構(gòu)或methods方法使用
所有的計算屬性都要定義到computed節(jié)點之下
計算屬性在定義的時候,要定義成“方法格式”
好處:
1.實現(xiàn)了代碼復(fù)用
2.只要計算屬性中依賴的數(shù)據(jù)源變化了裙盾,計算屬性就會自動重新求值
axios:是前端最火的实胸、專注于數(shù)據(jù)請求的庫
基本使用方式
1.發(fā)起get請求
解構(gòu)賦值的時候他嫡,使用:進行重命名
調(diào)用axios之后,使用async/await進行簡化
使用解構(gòu)賦值庐完,從axios封裝到大對象中钢属,把data屬性結(jié)構(gòu)出來
把結(jié)構(gòu)出來的data屬性,使用冒號進行重命名
vue-cil?
1.是什么:vuejs開發(fā)的標(biāo)準(zhǔn)工具
2.作用:簡化了程序員基于webpack創(chuàng)建工程的Vue項目的過程门躯。程序員可以專注撰寫應(yīng)用淆党,而不必去糾結(jié)webpack的配置
3.安裝和使用
(1)輸入命令npm i -g @vue/cli即可安裝到自己的電腦上?
(2)輸入vue-V檢測是否安裝成功
(3)基于vue-cli快速生成工程化項目:
找到要生成的項目文件夾下輸入命令vue create 項目名稱
回車后看到已下界面我們上下箭頭進行選擇
選擇好之后開始選擇要安裝的工具
前面帶*號的代表已選擇(按空格進行選擇)
選擇vue版本,這里選擇vue2
選擇css域處理器這里選擇less
把Babel讶凉、ESlint等插件的配置項染乌,放到自己獨立的配置文件中
是否把剛才設(shè)置的選擇創(chuàng)建為預(yù)設(shè)
創(chuàng)建完成!?
vue項目中src目錄的構(gòu)成:
assets文件夾:存放項目中用到的靜態(tài)資源文件懂讯,例如:css? 樣式表荷憋、圖片資源
components文件夾程序員封裝的、可復(fù)用的組件褐望,都要放到components目錄下
main.js是 是項目入口勒庄。整個項目運行,要先執(zhí)行main.js
App.vue是項目的根組件
4.vue項目的運行流程
在工程化的項目中瘫里,vue要做的事很單純:通過main.js把App.vue渲染到index.html的指定區(qū)域中
vue組件
1.什么是組件開發(fā)
指的是根據(jù)封裝的思想实蔽,把頁面上可重復(fù)用到UI結(jié)構(gòu)封裝為組件,從而方便項目的開發(fā)和維護
2.vue組件的三個組成部分
template:組件的模板結(jié)構(gòu)
script:組件的JavaScript行為
style:組件的樣式??
啟用less語法: