文章目錄

• • vue
  • 一、js基礎
  • 二、封裝緩存
  • 三、組件
  • • 1、組件創建、引入、掛載、使用
    • 2、組件間的傳值
    • • - 父組件主動獲取子組件的數據和方法（子組件給父組件傳值）：
      • - 子組件主動獲取父組件的數據和方法（父組件給子組件傳值）：
      • -非父子組件間的傳值
      • • 廣播方式
        • Vuex方式 -- 解決（不同頁面）組件間數據共享
  • 四、生命周期(鉤子)函數
  • 五、請求數據的三種方式
  • • • • 1、vue-resource
        • 2、Axios
        • 3、fetch-jsonp
        • 4、tips
  • 六、路由（自動掛載組件以及加載數據）
  • • • • 1、配置路由
        • 2、實際使用
        • • 1、配置
          • 2、 ‘/’ 路由出口（放在根組件）：
          • 3、router-link 路由出口（類似a標簽）：
          • 4、Js編程式路由（編程式導航）：由js代碼主動發起路由
          • 5、vue路由的hash模式（默認，有#）和history模式（無#）
          • 6、路由的嵌套
        • 3、路由傳參
        • 4、路由模塊化

vue

• 每一個組件都是一個頁面(html/template+js+css/scss)，實現組件的完整性——組件化

• main.js入口文件，在這里可以引入用到的node_modules包(模塊)以及插件，即用即導入——模塊化

• App.vue 根組件(根頁面)，

• meta viewport 移動端窗口（視口），可以使用百度界面的meta標簽的 viewport屬性

• 若在全局樣式有 html{font-size:62.5%} —— 將字體變為0.625倍，為了適合移動端，則此時的 1rem 就 相當于電腦的 1px ！

• 創建項目：
  
  第一次安裝腳手架：
  cnpm install -g vue-cli （安裝vue cli2腳手架）
  vue init webpack demo1 （vue init webpack-simple demo1）
  npm run dev
  npm run build
  OR
  cnpm install -g @vue/cli （安裝vue cli3腳手架）
  vue create demo1
  運行：npm run serve （運行速度比2快了許多）
  編譯：npm run build

• vue cli3 提供了GUI界面來創建（管理）項目：
  vue ui
  然后進入locallhost:8080

一、js基礎

二、封裝緩存

1、直接使用：

2、封裝后使用：

三、組件

組件掛載。頁面由組件組成。路由：動態掛載組件。創建組件，開頭大寫，組件=template+js+scss，所有內容要被根節點包含起來，組件必須包含根元素（一般是div）。自定義標簽名不能重復。

1、組件創建、引入、掛載、使用

2、組件間的傳值

組件間的傳值，可以是變量（地址），也可以是對象（函數–地址），還可以是整個組件（類–地址）！

- 父組件主動獲取子組件的數據和方法（子組件給父組件傳值）：

父組件主動獲取子組件的數據和方法：

- 子組件主動獲取父組件的數據和方法（父組件給子組件傳值）：

子組件主動獲取父組件的數據和方法:


父組件給子組件傳值：

例子： 無論是傳變量、函數還是組件，父組件傳值方式都是動態屬性綁定，子組件接收方式有兩種，一種props數組形式接收——props:[]，一種props對象形式接收，對象形式接收可以驗證父組件傳值的合法性！
父組件傳變量：

子組件props數組接收變量：

子組件props對象接收變量并驗證，驗證不通過則會出現警告：

-非父子組件間的傳值

廣播方式

例子：

Vuex方式 – 解決（不同頁面）組件間數據共享

Vuex是vue官方提供的狀態管理插件，解決（不同頁面）組件間同一狀態的數據共享問題和組件的數據持久化。
也可以通過localstorage（緩存）實現，也可以使用SessionStorage實現！
注:小項目中，能不用Vuex就不用。

1、數據共享

---

---

2、數據持久化
直觀體現：在控制臺的network中，多次請求數據時，如果用緩存則會多次請求，若用Vuex則可以達到一次請求，多次使用（并且動態改變、共享）。

---

四、生命周期(鉤子)函數

五、請求數據的三種方式

1、vue-resource

2、Axios

3、fetch-jsonp

4、tips

• Axios不支持jsonp請求。而fetch-jsonp可以支持，可以在vue、react中使用，fetch-jsonp用法和Axios很像。
• vue-resource是vue的官方插件，在man.js引入并使用后，全局組件都可以直接使用，這是一個被推薦的重要原因；而Axios則是在哪里需要在哪引入，Axios可以在vue、react中使用。
• 要用箭頭函數替代function，避免指向被改變。
• 安裝依賴包時一定要加 --save，這樣會在package.json中聲明版本，下次install才能被找到。
• vue-resource、Axios、fetch-jsonp都可以在git上找到源碼和安裝使用方法

六、路由（自動掛載組件以及加載數據）

1、配置路由

補充：第五步：設置路由出口（即在哪個作用域下渲染這些路由下的組件）

2、實際使用

1、配置

2、 ‘/’ 路由出口（放在根組件）：

3、router-link 路由出口（類似a標簽）：

4、Js編程式路由（編程式導航）：由js代碼主動發起路由

其實 點擊 router-link組件，內部調用的也是 router.push()方法

5、vue路由的hash模式（默認，有#）和history模式（無#）

6、路由的嵌套

3、路由傳參

get傳參

post傳參

4、路由模塊化

路由模塊化 —— 單獨開一個js文件放路由配置，然后export暴露，在main.js中引入并掛載

總結

以上是生活随笔為你收集整理的vue 入门notes的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。