初识Vue

1. MVVM模式

Vue采用MVVM(Model-View-ViewModel)模式实现，MVVM模式由MVC演变而来当View层变化时，会自动更新到ViewModel层，反之亦然，View层与ViewModel层通过双向绑定建立连接。

MVVM模型

2. Vue实例

<!-- 一个简单的Vue实例 -->
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue-test</title>
    </head>
    
    <body>
        <div id="app">
            <input type="text" v-model="name" placeholder="Your name">
            <h1>Hello, {{name}}</h1>
        </div>
        <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',  //用于指定一个页面中已经存在的DOM元素，这里使用页面的总id
                data: {
                    name: '',
                }
            })
        </script>
    </body>
</html>

3. 生命周期钩子

生命周期钩子是Vue中的一类函数：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

一个典型的Vue实例生命周期如下图所示：

Vue实例生命周期

这其中的beforeCreate，created等即为Vue中的生命周期钩子。常用的钩子函数有：

created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时比较有用；
mounted el挂载到实例上之后调用，一般我们的第一个业务逻辑会从这里开始；
beforeDestory 实例销毁之前调用。主要用于解绑一些使用addEventListener监听的事件等。

<!-- created与mounted的执行顺序 -->
<body>
    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',  
            data: {
                name: 'Taegan',
            },

            created: function() {
                console.log("created:" + this.name);
            },

            mounted: function() {
                console.log("mounted:" + this.name);
            }
        })
    </script>
</body>

执行结果

4. v-html与v-pre

v-html 用于输出HTML文本；
v-pre 用于显示{{}}标签；

5. 过滤器

Vue支持在{{}}插值的尾部添加一个管道符|对数据进行过滤，常用于格式化文本，如字母大小写、货币千位逗号分隔等。

过滤的规则时自定义的，通过给Vue实例添加选项filters来设置，如可以对时间进行格式化处理：

<!-- 实时显示当前时间，每秒更新，并以过滤器格式化时间格式 -->
<body>
    <div id="app">
        <!-- 添加过滤器 -->
        {{date | formatDate}}
    </div>
    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        //处理时间格式，在月份、日期、小时等时间，小于10时前面补0
        var padDate = function(value) {
                return value < 10 ? "0"+value : value;
        }

        new Vue({
            el:'#app',  
            data: {
                date: new Date(),
            },

            //添加过滤器
            filters: {
                formatDate: function(value) {
                    var date = new Date(value);
                    var year = date.getFullYear();
                    var month = padDate(date.getMonth() + 1);
                    var day = padDate(date.getDate());
                    var hours = padDate(date.getHours());
                    var minutes = padDate(date.getMinutes());
                    var seconds = padDate(date.getSeconds());

                    return year + "-" + month + "-" + day + " " + hours +
                    ":" + minutes + ":" + seconds;
                }
            },

            mounted: function() {
                var _this = this;   //声明一个变量指向Vue实例this，保证作用域一致
                this.timer = setInterval(function() {
                    _this.date = new Date();
                }, 1000);   //setInterval方法按照指定的周期调用函数
            },

            beforeDestory: function() {
                if (this.timer) {
                    clearInterval(this.timer);  //在Vue实例销毁前，清除定时器
                }
            },
        })
    </script>
</body>

过滤器也可以串联，也可以接受参数。

6. v-bind 与 v-on

v-bind 用于动态更新HTML元素上的属性：

<!-- v-bind基本用法 -->
<body>
    <div id="app">
        <a v-bind:href="url">绑定a标签href属性</a>
        <img v-bind:src="imgUrl">
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                url: "https://cn.vuejs.org/",
                imgUrl: "https://cn.vuejs.org/images/logo.png"
            }
        })
    </script>
</body>

v-on 用于绑定事件监听器，如点击事件v-on:click：

<!-- v-on基本用法 -->
<body>
    <div id="app">
        <p v-if="show">这是一段显隐的文本</p>
        <button v-on:click = "handleClose">{{message}}</button> 
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                show: true,
                message: "隐藏",
            },

            methods: {
                handleClose: function() {
                    this.show = !this.show;
                    if (this.show) {
                        this.message = "隐藏";
                    } else {
                        this.message = "显示";
                    }
                }
            }
        })
    </script>
</body>

v-bind的语法糖为:，v-on的语法糖为@；

参考

《Vue.js实战》