app.$el访问被绑定的元素
data可以绑定js对象实现双向绑定
Vue实例的生命周期
v-pre 不渲染
{{表达式}}
filters 过滤器
计算属性的getter和setter方法
用key属性鉴别独立性
总结

`app.$el`访问被绑定的元素

使用Vue实例的变量名称+ $el可以直接访问实例中被el属性绑定的HTML元素，方便快速定位Vue的元素。

data除了自己设置属性，也可以直接绑定一个对象，这时候依然是双向绑定

var myData = {a: 10};
var app = new Vue({
    el: "#app",
    data: myData
});

console.log("myData.a is " + myData.a);
console.log("Vue实例的a属性是：" + app.a);
console.log("改变Vue实例的a属性：");
app.a = 99;
console.log("myData.a 现在是 " + myData.a);

可以看到直接把对象的属性弄到了Vue实例中，改变Vue实例的属性，原来的属性跟着一起变化。

Vue实例的生命周期

Vue实例的生命周期就像jQuery在DOM加载完成的时候自动加载一样。

created：实例创建完成后调用，此时完成了数据观测，但是$el还不可用，数据还未挂载到实例中。常用于数据初始化。
mounted：el挂载到实例上的时候调用，一般业务逻辑就从此开始
beforeDestroy：实例销毁之前调用，主要解绑一些使用addEventListener添加的事件。

钩子直接使用名称，作为Vue实例的属性进行操作：

var myData = {a: 10,
        date: new Date()};


    var app = new Vue({
        el: "#app",
        data: myData,
        created: function () {
            console.log(this.a);
        },
        mounted: function () {
            var _this = this;
            this.timer = setInterval(function () {
                _this.date = new Date();
            }, 1000);
        }
    });

v-pre 不编译

加在元素上之后不进行该元素和其所有子元素的渲染，原样输出

在双花括号之间的表达式，只能是单个表达式，变量只能使用Vue实例的变量，不能使用语句和表达式。一些全局变量，只能使用Vue白名单之内的全局变量，先理解为JS自带的Math和Date等变量。

filters 过滤器

很像Django模板渲染的过滤器，用一个管道符号加上过滤器的标识符即可。实际上是将管道符前边的内容交给后边的过滤器进行处理，渲染成处理后的内容。过滤器是Vue实例中的filters属性，键值对为过滤器名称：匿名方法。

var myData = {
        a: 10,
        date: new Date()
    };

var app = new Vue({
        el: "#app",
        data: myData,
        created: function () {
            console.log(this.a);
            this.a = 30;
        },
        mounted: function () {
            var _this = this;
            this.timer = setInterval(function () {
                _this.date = new Date();
            }, 1000);
        },
        filters: {
            filterDate: function (value) {
                return value + " 过滤后的内容";
            }
        }
    }
);

过滤器实际上是以被过滤对象为参数的函数，过滤器还可以串联。还可以传入额外的参数。第一个参数默认是被过滤的对象。

<div id="app">
    {{date|filterDate|filter2("gugugug","saner")}}
</div>

<script src="vue.js"></script>
<script>
    var myData = {
        a: 10,
        date: new Date()
    };

    var app = new Vue({
            el: "#app",
            data: myData,
            created: function () {
                console.log(this.a);
                this.a = 30;
            },
            mounted: function () {
                var _this = this;
                this.timer = setInterval(function () {
                    _this.date = new Date();
                }, 1000);
            },
            filters: {
                filterDate: function (value) {
                    return value + " 过滤后的内容";
                },
                filter2: function (value,a,b) {
                    return value + a + b;
                }
            }
        }
    );
</script>

过滤器常用于处理简单的文本变换，如果要处理更加复杂的逻辑，一般使用计算属性。

计算属性的getter和setter方法

计算属性除了直接设置为一个匿名函数之外，还可以设置为get和set对应的对象，读取计算属性就是调用get方法，直接设置计算属性就会调用set方法。

var app = new Vue({
            el: "#app",
            data: {
                a:10
            },
            computed: {
                realA:{get:function () {
                        var b = parseInt(Math.random() * 10) + this.a;
                        return b;},
                    set:function (value) {
                        console.log("Set被触发了");
                    }
                },
                now:function () {
                    return Date.now();
                }
            }
        }
    );

如果直接显示a的值，发现每次都是随机的。如果直接设置a的值，就会在控制台打印出语句。get函数的return就是实际计算出的值，而set函数中的value参数就是要设置的值。计算属性牛逼的是可以依赖其他计算变量，以及依赖其他Vue实例的变量，这样在组件化的时候非常方便。计算属性和函数的区别是计算属性有缓存，依赖的内容没有变化，就不会重新计算，所以如果一个计算变量没有依赖，那么也不会更新，而函数只要调用就会更新。上边的now计算属性只要生成了，就一直不会自动变化。

Vue 04 操作DOM补遗