Vue.js 笔记01

概述

Vue.js是一个渐进式框架
Vue.js在设计上使用MVVM模式（Model-View-ViewModel）

Vue.js应用的创建

1.使用<script>标签引入Vue.js框架
2.在<script>标签内通过构造函数创建一个Vue的根实例，并启动Vue应用

<script src="xx/vue.js" /> <!-- 引入js框架 -->
<script>
    var vm = new Vue({
        el:'#app',//将该Vue实例vm挂载到id为app的元素上
        data:{
        }
    })
</script>

挂载成功后，便可以用vm.$app来访问该元素

Vue实例中的data选项可以用来声明应用内需要双向绑定的数据，同时Vue实例也代理了此处vm对象里的所有属性

<script>
    var vm = new Vue({
        el:'#app',//将该Vue实例vm挂载到id为app的元素上
        data:{
            a:2,
            b:3
        }
    })
</script>

生命周期（较常用的）

• created  实例创建完后调用，此阶段尚未挂载上元素，$el不可用
• mounted  el挂载到实例上之后调用
• beforeDestory  实例销毁前调用

<script>
    var vm = new Vue({
        el:'#app',//将该Vue实例vm挂载到id为app的元素上
        data:{
            a:2,
            b:3
        },
        created(){
            console.log(this.a) //输出2
        },
        mounted() {
            console.log(this.$el) //输出<div id='app'></div>
        }
    })
</script>

插值表达式 {{ }}

自动将我们双向绑定的数据实时显示出来，它会随着对应值的更新而更新

<div id="app">
    {{a}},{{b}}  <!-- 网页渲染出 2,3 -->
</div>
<script>
    var vm = new Vue({
        el:'#app',//将该Vue实例vm挂载到id为app的元素上
        data:{
            a:2,
            b:3
        }
    })
</script>

插值表达式输出会使得Vue将data中的属性当成一段文字输出，如果data中有需要渲染出html格式的变量，可以使用v-html属性对其进行渲染。

<div id="app">
    <span v-html="myLink"></span>
</div>
<script>
    var vm = new Vue({
        el:'#app',//将该Vue实例vm挂载到id为app的元素上
        data:{
            myLink = '<a href="#">这是一个链接</a>'
        }
    })
</script>

如果单纯想显示{{ }}这个符号，则可以使用v-pre跳过这个元素和它子元素的编译过程

<span v-pre>{{这里的内容不会被编译}}</span>

在{{ }}中，可以使用JavaScript表达式进行简单的运算、三元表达式等，要求变量值必须符合要求

<div id='app'>
    {{a/2}}
    {{isOK?'确定';'取消'}}
    {{text.split(',').reverse().join(',')}}
</div>

过滤器

Vue.js支持在{{ }}插值的尾部添加一个管道符” | ”对数据进行过滤，可用于格式化文本等，过滤规则是自定义的，通常给Vue实例添加选项filters来设置

<div id='app'>
    {{date|formatDate}}
</div>
<script>
    //小于10则在数值前补0
    var padDate = function(value){
        return value<10?'0'+value:value;
    }
    var vm = new Vue({
        el:'#app',
        data:{
            date:new Date(),
        },
        filters:{
            formatDate(value){ //这里的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() {
            var _this = this;
            this.timer = setInterval(function(){
                _this.date = new Date(); //修改数据date
            },1000);
        },
        beforeDestroy() {
            if(this.timer){
                clearInterval(this.timer);//在Vue实例销毁前，清除定时器
            }
        }
    })
</script>

过滤器还支持串联，也可以接收参数

    <!-- 串联 -->
    {{message|filterA|filterB}}
    <!-- 接收参数 -->
    {{message|filterA('arg1','arg2')}}

指令与事件

指令(Directives)是Vue.js模板中最常用的一项功能，它带有前缀v-，例如
v-if、v-html、v-pre等。指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上，以v-if为例：

<div id="app">
    <p v-if="show">显示这段文本</p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
            data:{
                show:true
            }
    })
</script>

在上面这个例子中，如果show的值为false，则<p>标签会被移除

v-bind用来动态更新HTML元素上的属性，比如id，class，如：

<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    var vm = new Vue({
        el:'#app',
            data:{
                url:'https://www.github.com',
                imgUrl:'http://xx.xx/img.png'
            }
    })
</script>

以上例子若当data中的url或imgUrl值发生改变时，被v-bind绑定的属性值也会随之改变

v-on用来绑定事件监听器，用于交互

<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
    var vm = new Vue({
        el:'#app',
            data:{
                show:true
            },
            methods:{
                handleClose(){
                    this.show = false
                }
            }
    })
</script>

v-on绑定属性的表达式可以是一个方法名，这些方法以函数的形式写在Vue实例的methods属性内，函数内的this指向的是当前Vue实例本身，因此可以直接使用this.xxx的形式来访问或修改数据
表达式除了用方法名，也可以直接是一个内联语句：

     <button v-on:click="show = false">点击隐藏</button>

Vue.js将methods里的方法也代理了，所以可以像访问Vue数据那样来调用方法：

            methods:{
                handleClose(){
                    this.close()
                },
                close(){
                    this.show = false
                }
            }

语法糖

语法糖是指，在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序的开发
Vue.js的v-bind和v-on指令都提供了语法糖，可以理解为缩写，例如v-bind可简写为" : "，v-on可简写为" @ ",如：

    <a v-bind="link">普通方法</a>
    <a :href="link">语法糖使用v-bind</a>
    <!-- 使用语法糖皆不影响原功能 -->
    <button v-on:click="handleClose">普通方法</button>
    <button @click="handleClose">语法糖使用v-on</button>