Vue基礎2.0X筆記

---

- vue
- 前端
- vue-router

---

Vue基礎2.0X 詳細解毒

淘寶鏡像安裝

$ npm install cnpm -g --registry = https：//registry.npm.taobao.org
//npm有的它都有加速安裝，只要在原有命令加上c就能夠了

安裝CDN學習版本：

<script src="https://cdn.jsdelivr.net/npm/...;></script>

使用包管理器全局安裝

$ npm install vue
$ cnpm install vue

安裝vue-cli

npm install -g @vue/cli
cnpm install -g @vue/cli

建立項目(建立而且進入)

vue create <project-name> && cd <project-name>

剛開始上手之間選擇第一項default（默認）就👌了而後靜靜地等待生產目錄

建立好後使用👇啓動項目

vue serve

目錄結構

下一步刪除掉多餘咱們不須要的東西保持乾淨的結構

<template>
  <div class="home">
    <h1>This is an homne page</h1>
  </div>
</template>

<script>
export default {
  name:"home",
  data() {
    return {
      
    }
  },
}
</script>

頁面顯示以下

咱們點擊Home 或者About的時候This is an homne page 會進行一個改變這裏涉及到一個知識點router

打開咱們的主文件App.vue能夠看見

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
</div>
<router-view/>

<router-link> 組件支持用戶在具備路由功能的應用中 (點擊) 導航。 經過 to屬性指定目標地址，默認渲染成帶有正確連接的 <a> 標籤，能夠經過配置 tag屬性生成別的標籤.。另外，當目標路由成功激活時，連接元素自動設置一個表示激活的 CSS 類名

傳送門

<router-view> 組件是一個 functional 組件，渲染路徑匹配到的視圖組件。<router-view> 渲染的組件還能夠內嵌本身的 <router-view>，根據嵌套路徑，渲染嵌套組件。

擴展內容

<transition>過分特效能夠爲<router-view>添加過渡效果 傳送門

<keep-alive> 用做緩存當用你不想從新刷新頁面獲取內容時可使用它包裹這router-view標籤

列表渲染 傳送門

咱們使用了模版語法把data🀄️的字符串傳送到了html中在網頁上正常顯示出來

咱們還使用了列表渲染使用v-for成功的把arr中的數值傳送了上去

v-model 傳送門

雙向綁定，v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

v-for/v-if/<tempalate> 的綜合使用

當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。當你想爲僅有的一些項渲染節點時，這種優先級的機制會十分有用，

⚠️警告：永遠不要把 v-if 和 v-for 同時用在同一個元素上。