VUE初學筆記

img標籤圖片加載問題

錯誤的加載方式

<img src="{{data.imgurl}}" alt="圖片">

在頁面加載的過程中，img首先加載src中的{{data.imgurl}},解析出錯，加載不出來應有的圖片
在VUE1.X中可以成功

正確的加載方式

<img v-bind:src="data.imgurl" alt="圖片">

---

v-for指令問題

v-for的索引問題

<li v-for="item in items"></li>

<li v-for="(item,index) in items"></li>

1. vue1.0中使用$index來標記索引
2. vue2.0中(item,index) in items的index直接作爲索引

過濾器

局部過濾器

<p>{{data | formatDate}}</p>

new Vue({
            el: "#app",
            data: {
                title: "Hello Vue"
            },
            filters: {
            //局部過濾器
                formatDate: function (value) {
                    return "我是新值"+value；
                }
            },
            mounted: {
                this.cartView();
            },
            methods: {
                cartView: function () {
                    this.title = "Vue Hello";
                }
            }

        })

全局過濾器

<p>{{data | formatData(argument)}}</p>

Vue.filter("formatData", function (value, argument) {
            return "我是新的"+value+"還有一個小弟參數"+argument;
        })

過濾器的寫法

<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>————（1.0）

<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p> ————（2.0）