Vue基础第二章

1、数据绑定与数据声明

Vue中的数据绑定就是让与Vue实例绑定的DOM节点或script标签内的变量之间数据更新互相影响，即数据绑定后Vue实例的数据修改会使DOM节点的数据或者script标签内的变量的数据一起修改，反之亦然，实现数据绑定的方式为Vue中的v-model指令。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--v-model跟v-for一样是Vue的指令，v-model用于数据绑定，数据绑定可以是Vue实例与HTML标签间的数据绑定，也可以是Vue实例与script标签内的变量间的数据绑定-->
    <!--无论是HTML标签还是script标签内的变量，只要与Vue实例存在数据绑定，那么数据绑定双方中任意一方的数据改动都会使另一方的数据同时产生变化-->
    <!--此例中如Vue数据声明为显式声明则数据绑定双方为Vue实例与input标签，如Vue数据声明为隐式声明则数据绑定为input标签与Vue实例，Vue实例与变量myData，此时三者中任意一方修改数据，另外两方都会随之修改数据-->
    <input type='text' v-model="name" placeholder="你的名字">
    <h1>你好，{{ name }}</h1>
</div>
<script>
    var myData={
        name:'魅力宁波'
    }
    var app=new Vue({
        el:'#app',
        <!--在data属性中引用外部变量即为隐式声明数据，此时该变量与Vue实例间存在数据绑定-->
        <!-- data:myData -->
        <!--直接将数据写在data属性中即为显式声明数据-->
        data:{
            name:''
        }
    })
</script>
</body>
</html>

2、Vue实例生命周期

每个Vue实例都存在一个创建前、创建后、挂在前、挂载后、更新前、更新后、销毁前、销毁后的生命周期，每一个生命周期阶段都有对应的钩子属性用于在对应的生命周期阶段做一些操作，它们分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。在所有的生命周期钩子属性中最常用的为created、mounted和beforeDestroy

完整的生命周期实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<divid="app">
    {{data}}
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            data:"aaaaa",
            info:"nono"
        },
        <!--此时Vue实例未创建，输出分别为'undefined','undefined'-->
        beforeCreate:function(){
            console.log("创建前========")；
            console.log(this.data)；
            console.log(this.$el)；
        },
        <!--此时Vue实例已创建，输出分别为'nono','undefined'-->
        created:function(){
            console.log("已创建========")；
            console.log(this.info)；
            console.log(this.$el)；
        },
        <!--此时Vue实例未挂载至HTML标签，输出分别为'nono','<section id="app">{{ data }}</section>',此时$el中的数据还未渲染-->
        beforeMount:function(){
            console.log("mount之前========")；
            console.log(this.info)；
            console.log(this.$el)；
        },
        <!--此时Vue实例已挂载至HTML标签上，输出分别为'nono','<section id="app">aaaaa</section>',此时$el中的数据已渲染完毕-->
        mounted:function(){
            console.log("mounted========")；
            console.log(this.info)；
            console.log(this.$el)；
        },
        <!--在Vue实例的数据被修改前比如在控制台执行'app.data=bbbbb'更新数据前，执行该步操作-->
        beforeUpdate:function(){
            console.log("更新前========");

        },
        <!--在Vue实例的数据被修改之后执行该步操作-->
        updated:function(){
            console.log("更新完成========");
        },
        <!--在Vue实例被销毁前比如在控制台执行'app.$destroy()'销毁Vue实例前，执行该步操作，输出分别为'nono','<section id="app">aaaaa</section>'-->
        beforeDestroy:function(){
            console.log("销毁前========")；
            console.log(this.info)；
            console.log(this.$el)；
        },
        <!--在Vue实例被销毁后执行该步操作，输出分别为'nono','<section id="app">aaaaa</section>',此时在控制台输出console.log(this.info),输出为'undefined'-->
        destroyed:function(){
            console.log("已销毁========")；
            console.log(this.info)；
            console.log(this.$el)；
        }
    })
</script>
</body>
</html>

3、Vue插值

插值就是将数据放到你指定的位置去显示，Vue有{{}}双花括号的插值方式和v-html指令的插值方式，花括号的方式只单纯的显示数据，而v-html则在遇到HTML的字符串时会将其转化为HTML标签进行显示而不是纯文本，具体示例如下

{{}}插值方式示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<divid="app">
    <!--{{}}双花括号是Vue插值的一种方式，就是把Vue实例data属性中的数据放在花括号的位置显示-->
    {{ date }}
    <!--如果想将花括号显示出来可以用v-pre指令，此时date不会被替换为Vue实例中的数据-->
    <span v-pre>{{ date }}</span>
</div>
<script>
    var app=new Vue({
        el:"#app",
        <!--new Date()用于取当前的日期时间-->
        data:{
            data:new Date()
        },
        <!--在Vue实例挂载到HTML标签之后每隔一秒执行定时器更新data属性中的值，此处的this指向当前的Vue实例-->
        mounted:function(){
            var _this=this;
            this.timer=setInterval(function() {
                _this.date=new Date();
            },1000);
        },
        beforeDestroy:function() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        }
    })
</script>
</body>
</html>

v-html插值示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--v-html指令用于将Vue实例data属性中的html字符串转换为HTML标签插入指定标签内部，这种插值方式容易遭到XSS攻击，所以需要将尖括号转义-->
    <span v-html="link"></span>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            link:'<a href="#">这是一个链接</a>'
        }
    })
</script>
</body>
</html>

4、表达式

{{}}除了可以用于插值还可以用于一些简单的表达式运算，比如简单的算术运算、三元运算、链式方法调用执行，不能支持语句和流程控制，并且在花括号中只能调用Vue白名单中的全局变量如Math、Date，不能调用用户自定义的全局变量。

表达式示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
     <!--这是算术运算-->
    {{ number / 10 }}
    <!--这是三元运算-->
    {{ isOK ？ '确定' : '取消' }}
    <!--这是链式方法调用-->
    {{ text.split(',').reverse().join(',') }}
    <!--这是赋值语句-->
    {{ var book='Vue.js实战' }}
    <!--这是流程控制，必须改用三元运算-->
    {{ if (ok) return msg }}
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            number:100,
            isOK:false,
            text:'123,456'
        }
    })
</script>
</body>
</html>

5、过滤器的定义与使用

过滤器在Vue示例的filters属性中定义，定义格式为过滤器名:过滤器函数，使用时在数据后用|符号接上过滤器名即可，示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
     <!--过滤器的使用方法为数据|过滤器名-->
     <!--过滤器可以串联使用如数据|过滤器A|过滤器B-->
     <!--过滤器还可以接收参数如数据|过滤器A('arg1','arg2'),由于数据本身是传给过滤器的第一个参数所以显式传递的其他参数分别为第二参数、第三参数以此类推-->
     {{ date|formatDate }}
</div>
<script>
    <!--此处用三元表达式给时间日期数据中小于10的数据前面加上0-->
    var padDate=function(value) {
        return value <10 ? '0'+value : value;
    };
    var app=new Vue({
        el:"#app",
        data:{
            date:new Date()
        },
        <!--filters属性用于定义过滤器-->
        filters:{
            <!--formatDate为过滤器名，通过过滤器名调用过滤器，value为传递过来的数据-->
            formatDate:function(value) {
                var date=new Date(value);
                var year=date.getFullYear();
                var month=padDate(date.getMonth()+1);
                var day=padDate(date.getDate());
                var hour=padDate(date.getHours());
                var minutes=padDate(date.getMinutes());
                var seconds=padDate(date.getSeconds());
                return year+'-'+month+'-'+day+' '+hour+':'+minutes+':'+seconds;
            }
        },
        mounted:function() {
            var _this=this;
            this.timer=setInterval(function() {
                _this.date=new Date();
            },1000);
        },
        beforeDestroy:function() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        }
    })
</script>
</body>
</html>

6、v-if、v-bind、v-on指令介绍

指令是Vue中非常重要与常用的组成部分，下面介绍三个比较重要指令v-if用于控制标签是否显示，v-bind用于动态修改标签属性，v-on用于事件绑定，示例如下

v-if 示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
     <!--当show的值为真时显示标签，为假时不显示-->
     <p v-if="show">显示这段文件</p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            show:true
        }
    })
</script>
</body>
</html>

v-bind 示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
     <!--动态修改a标签的href属性-->
     <a v-bind:href="url">链接</a>
     <!--动态修改img标签的src属性-->
     <img v-bind:src="imgUrl">
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            url:'https://www.cn.bing.com',
            imgUrl:'https://cn.bing.com/images/search?q=%e5%94%90%e8%89%ba%e6%98%95&FORM=ISTRTH&id=AB04349F1796ADEAAB2CF63728F5579A6A4BAEB5&cat=%E6%98%8E%E6%98%9F&lpversion='
        }
    })
</script>
</body>
</html>

v-on 示例1 方法名绑定事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
     <p v-if="show">显示这段文字</p>
     <!--button标签绑定click事件，触发click事件后执行函数handleClose-->
     <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            show:true
        },
        <!--methods属性用于定义事件函数，复杂的业务逻辑建议都在此定义-->
        methods:{
            handleClose:function() {
                this.show=false;
            }
        }
    })
</script>
</body>
</html>

v-on 示例2 内联语句绑定事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
     <p v-if="show">显示这段文字</p>
     <!--button标签绑定click事件，触发click事件后赋值语句show=false,此方式只适合业务逻辑简单的情况-->
     <button v-on:click="show=false">点击隐藏</button>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            show:true
        }
    })
</script>
</body>
</html>

7、语法糖

Vue中的语法糖就是指令的简写，最为常用的指令v-bind的语法糖为:，即用:表示v-bind指令，v-on指令的语法糖为@，同理表示用@代替v-on指令

8、Vue实例属性调用

Vue实例代理了data属性和methods属性，因此可以直接用Vue实例去调用data属性和methods属性中的数据和函数，比如之前的v-if指令实例中可以在控制台通过app.show=false的方式修改data属性的数据