黑皮考町

假設我們有一筆資料如下想要以JSON的格式顯示在網頁上 var data = {      'name' : 'andy'      'age': 30 } 我們可以使用 JSON.stringify(data, null, 2) 來將資料轉成相對應的字串, 其中第三個參數設為 2 的目的是用來控制用來做縮排的空白數目, 再來, 使用 <pre> 標籤來顯示文字並保留縮排 <pre> {{JSON.stringify( data, null, 2)}} </pre>

前言 基本上在開發前端網頁時, 若是要豐富網頁的內容, 一定少不了使用一些圖示來增添美感,  為了能夠自由放大縮小圖片且不失真, 通常我們會使用SVG格式的圖片來美化UI 。  這類的圖我們可以自己做或是從font awesome下載 。  以下是介紹如何在Vue.js 的框架裡套用 font awesome 透過npm下載 npm install vue-awesome npm install vue-awesome 註冊到 main.js import 'vue-awesome/icons' import Icon from 'vue-awesome/components/Icon' Vue.component('icon',Icon) 使用(以按鈕為例) <b-button> <icon name='save'></icon> Save </b-button>

假設我們有一個購物網站, 需要在頁面上顯示購物車裡的商品數量 <p> {{goods.count}} </p> 而這筆資料會在使用者操做 Add 按鈕後,產生變化 要實作這個功能很簡單, 將按鈕綁定我們addCount()方法, 並在方法內修改goods.count就能達到我們目的　 <button @click="addCount()"> Add </button> ... export default      data() {   return {   goods: { count: 0 }   }   }      methods: {           addCount(){                this.goods.count ++;           }      } 基本上Vue會把定義在data()裡的屬性(property)轉換成getter/setter　 當setter被觸發時會告知組件相對應的watcher進行重新渲染 這也就是為什麼資料一旦更變, 頁面就會自動被更新的原因 但如果屬性是動態地被加上去的話,  <p> {{goods. cost }} </p> ... export default   data() {   return {   goods: { count: 0 }   }   }   methods: {   addCount(){...

在Vue的世界裡 我們如何把數據從組件A傳到組件B的 方法很簡單，如下 假設我有一個自訂義的組件  Header.vue, 我想在 App.vue 裡把數據 foodList傳給它 首先在 Header.vue 組件上, 我們使用必須開一個接口  foodList  去接收數據, 新增props屬性foodList <script>      export default{           props:{                 foodList :{                     type: Array,                     default: () => []                }           }      } </script> 接下來, 當我們在App.vue裡使用時Header.vue組件時 就可以順勢地把資料船過去 App.vue <template>      <MyHeader : foodList =' foodList '>   </MyHeader> </template> <script>      import MyHeader from './compone...

在組件b-nav-item裡使用v-for產生導航列表時 <b-nav-item v-for="item in navItems"> {{ item.title }} </b-nav-item > 遇到以下的錯誤訊息 (Emitted value instead of an instance of Error) <b-nav-item v-for="item in navItems">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. 原因是在 Vue 2.2 版之後, 當我們在組件(component)內使用v-for產生組件列表時, 必須明指定Key值, 讓Vue 用以區分每個元素, 藉以確保能正確的更新所有元素 解決方法:  使用v-bind來指定key值 <b-nav-item v-for="item in navItems" v-bind:key="item.titil"> Ref:　https://cn.vuejs.org/v2/guide/list.html