Vue-js 零基礎國外案例 DEMO 全課程講解 2 我是---- 靜靜

時間 2019-12-04

標籤 vue 零基礎案例 demo 課程講解靜靜欄目 JavaScript 简体版

原文原文鏈接

Module Introduction 模塊介紹

conditionals & lists 條件語句與列表

Conditional Rendering with v-if 使用v-if進行條件渲染

<body>
    <div id="app">
      <p v-if="show">you can see me! 你能夠看到我 <span>hello</span></p>
      <p v-else>Now you see me! 如今你看到了我！</p>
      <p>Do you also see me 你也看見我了</p>
      <button @click="show = !show">switch 開關</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        show: true
      }
    });
  </script>
這裏若是單存的使用 v-if 咱們會發現單純的使用v-if 是整個節點的移除，當下面咱們給使用v-else 時候進行切換 --- 我是靜靜 
複製代碼

Using an Alternative v-if Syntax 使用替代v-if 的語法

<body>
    <div id="app">
      <p v-if="show">you can see me! 你能夠看到我 <span>hello</span></p>
      <p v-else>Now you see me! 如今你看到了我！</p>
      <template>
        <h1>heading 標題</h1>
        <p v-if="show">inside a template 在模板內</p>
      </template>
      <p>Do you also see me 你也看見我了</p>
      <button @click="show = !show">switch 開關</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        show: true
      }
    });
  </script>
上面咱們使用template 模板進行替換，也就是把之前的div變成了template 而後在裏面 寫了 v-if
複製代碼

Dont Detach it with v-show 不要用v-show分離它

<body>
    <div id="app">
      <p v-if="show">you can see me! 你能夠看到我 <span>hello</span></p>
      <p v-else>Now you see me! 如今你看到了我！</p>
      <template v-if="show">
        <h1>heading 標題</h1>
        <p>inside a template 在模板內</p>
      </template>
      <p v-show="show">Do you also see me 你也看見我了</p>
      <button @click="show = !show">switch 開關</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        show: true
      }
    });
  </script>
這裏我給你們標註了一下會看到這裏顯示了display：none 是把元素隱藏了，當咱們想要對一個DOM 進行頻繁操做的時候，這時候咱們就須要使用 v-show 由於使用v-if
進行的消耗資源會更加巨大。
複製代碼

Rendering Lists with v-for 使用v-for渲染列表

<body>
    <div id="app">
      <ul>
        <!-- 這裏使用v-for 以後 前面是 元素名 後面是 data數據名 而後在渲染的時候 須要給 元素名 -->
        <li v-for=" ingredient in ingredients">{{ ingredient }}</li>
        <hr />
        <!-- 這裏咱們 使用v-for 循環以後，在裏面添加一個括號 給一個索引 i 而後 拿到 索引下標 -->
        <li v-for="(ingredient,i) in ingredients">
          {{ ingredient }},({{ i }})
        </li>
      </ul>
      <hr />
      <template v-for="(ingredient,index) in ingredients">
        <h1>{{ ingredient }}</h1>
        <p>{{ index }}</p>
      </template>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        ingredients: ["meat", "fruit", "cookies"],
        person: [
          { name: "vue", age: 28, color: "red" },
          { name: "js", age: 18, color: "blue" }
        ]
      }
    });
  </script>
上面咱們 使用v-for循環 得到到data中的數據，而後咱們分別拿到 項目名與索引下標 從零開始的。
複製代碼

Looping through Objects 循環經過對象

<body>
    <div id="app">
      <ul>
        <!-- <li v-for="item in person">{{ item.name }}</li> -->
        <li v-for="item in person">
          <div v-for="(value,key,index) in item">
            {{ key }}----{{ value }} ---{{ index }}
          </div>
        </li>
      </ul>
      
        <span v-for="n in 10">{{ n }}</span>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        person: [
          { name: "vue", age: 18, color: "red" },
          { name: "js", age: 20, color: "blue" }
        ]
      }
    });
  </script>
這裏咱們開始遍歷一個 對象一我的的person數組對象，而後使用v-for 先拿到person 人的值，而後在進行遍歷 這個值分別拿到，而後能夠看到 value是 值，key 是前面的名稱，index是索引 
而後下面的span 就會 顯示數字 1到10
複製代碼

Keeping Track of Elements when using v-for 使用v-for時跟蹤元素

<body>
    <div id="app">
      <ul>
        <li v-for="(ingredient,index) in ingredients">
          {{ ingredient }}---{{ index }} 
        </li>
      </ul>
      <button @click="ingredients.push('spices')">addMe</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        ingredients: ["meat", "fruit", "cookine"],
        person: [
          { name: "vue", age: 18, color: "red" },
          { name: "js", age: 20, color: "blue" }
        ]
      }
    });
  </script>
這裏咱們使用v-for 循環拿到ingredients中的內容渲染到頁面上了，而後在 下面的按鈕中 button 添加了一個 ingredients.push 事件 而後 在裏面追加了元素複製代碼