腳手架與混入

it發表於2021-06-28

腳手架簡介

  • 就是一個快速搭建專案的工具

腳手架安裝

  • 專案根目錄終端輸入 npm i -g @vue/cli

腳手架使用

  • 根目錄下終端輸入 vue create system
  • 之後進行選擇專案配置，等待片刻,出現success提示
  • cd XX -進入
  • npm run serve 執行專案
  • 開啟localhost:8080 建立成功

混入

  • 1.全域性混入
 1把公共的東西封裝起來,放到混入物件中,有需要的時候,直接使用
 2混入格式:
 3寫在main.js中，必須在例項化物件之前
 4vue.minxin({
 5資料
 6data(){
 7return{鍵:值}
 8}
 9})
10如果在混入中宣告瞭變數，元件中也有同名變數的時候，元件中的變數會覆蓋混入中的變數
11在混入中的鉤子函式,不會被new物件中的元件中的鉤子函式覆蓋
12        created(){
13
14        }
15如果混入中宣告瞭自定義方法,在元件中也有同名的方法,元件中的方法會覆蓋混入中的方法
16        methods:{
17            方法名(){
18
19            }
20        }
21        方法
22            系統方法(生命週期鉤子函式)
23            自定方法
24    })
25    new Vue({
26        render:h=>h(App)
27        ....
28    })
  • 2.區域性混入
1在哪個元件中使用，就在哪個元件中引用
2區域性混入是一個單獨的檔案
3        在src/目錄中建立一個目錄,儲存區域性混入的
4            src/
5                mixin/
6                    test.js
7                在元件中如果需要使用,需在在元件中使用引入:import test from "./mixin/test.js"
8                在當前元件中進行註冊混入
9                    mixins:[test,xxx]

常用修飾符

事件修飾符

1 .stop  阻止事件冒泡  @click.stop="方法"
2 .prevent 阻止預設事件  <a @click.stop.prevent="方法"><a> 
3 .once 阻止事件重複觸發

表單修飾符

1trim:自動過濾使用者輸入的首尾空白字元
2number:自動將使用者的輸入值轉為數值型別
3lazy  使用者每一次觸發都會馬上更新,使用了該修飾符可以讓使用者通過回車,或者滑鼠失焦觸發

watch監聽

  • watch的作用是可以監聽一個值的變化,並呼叫因變化需要執行的方法
11.普通監聽
2實時的監聽資料的變化
3watch監聽屬性中,把要監聽的資料,作為方法名進行監聽
4方法名(資料屬性)(新值,老值)
5語法格式:
6watch:{
7變數名(引數1新,引數2老){
8                }
9        }
 12.立即監聽
 2    如果我們需要在最初繫結值的時候也執行函式,則使用到immediate屬性 值設定為true
 3    語法格式:
 4        ,
 5        watch:{
 6            變數名:{
 7                //鉤子函式
 8                handler(新值,老值){
 9
10                }
11                //元件注入頁面的時候就立即監聽(執行上邊的鉤子函式)
12                immediate:true
13            }
14        }
 13.深度監聽
 2    當需要的監聽的值是一個物件.不能直接監聽到物件值的變化,普通的watch方法無法監聽到物件,只能監聽屬性的變數,我們如果需要監聽物件中值的變化,只能使用深度監聽deep屬性對物件進行深度監聽
 3
 4watch和computed 區別:
 5    1.watch中的函式不需要手動呼叫,computed內部的函式需要呼叫,呼叫的時候不需要()
 6    2.watch(屬性監聽),監聽屬性的變化,而computed(計算屬性),計算是統計計算得到的資料
 7使用環境:
 8    a  +
 9    b
10    {{計算方法}}
11    computed
12        當一個結果受到多個屬性影響的時候就使用我  c = a + b
13        return c
14        購物車總價
15    watch
16        當一個資料變化的時候,需要額外的操作
17        例如:搜素的時候
18            str:a  => b
19            根據str變化的值,完成其它的操作
20            監聽str = b
21            把監聽到的值作為請求條件
22            ba  baaa  bxxxx

ref和$refs

 1vue 運算元據
 2js  可以獲取元素  document.get.....
 3ref 就是一個標籤屬性 方便我們獲取該元素
 4
 5簡單的用法:就是獲取元素
 6<元素 ref="自定義的屬性值"></元素>
 7
 8有一個$refs的物件這個物件中儲存的所有的ref的值
 9$refs.ref屬性的屬性值
10如果在方法中需要使用this.$refs.ref屬性的屬性值
11console.log(this.$refs.ref屬性的屬性值)  <元素></元素>
12
13在父元件中使用子元件中的資料和方法
14
151.在父元件中使用的子元件標籤繫結一個ref屬性,並設定一個屬性值
16當前的屬性值就是當前的子元件
17使用的時候就可以使用 this.$refs.屬性值.子元件中的資料或方法
18以上方式也可以實現子傳父的過程

KeepAlive

 1App.vue
 2    <router-view/> 佔位 具體載入哪個元件取決是什麼路由
 3
 4    <keep-alive>
 5        佔位標籤
 6    <keep-alive>
 7    <keep-alive></keep-alive> 是vue中的內建元件,能在元件切換的時候,將狀態保留在記憶體中,防止重複的DOM渲染
 8    就是將資料快取起來
 9
10    如果使用以上的方式,是對所有的元件都進行快取處理
11
12如果需要對一個進行快取
13使用Route中的meta
14在路由的檔案中新增一個屬性
15router/index.js中新增meta屬性
16需要個哪個路由元件設定快取,就在哪裡加
17
181.需要加快取中的路由中新增meta屬性,設定一個物件,鍵和值 值為true
192.在<keep-alive >
20    $route 當前路由物件.meta.自定義屬性如果為真,就顯示,如果為加,就刪除 
21    <route-view v-if="$route">
22</keep-alive>

相關文章