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）