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）