腳手架簡介

• 就是一個快速搭建項目的工具

腳手架安裝

• 項目根目錄終端輸入 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>