打赏

VUE 数据绑定

1、数据双向绑定

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="name" placeholder="你的名字" />
            <h1>你好，{{name}}</h1>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    name: ''
                }
            });
        </script>
    </body>

</html>

2、生命周期

vued钩子与jquery的ready函数类似，比较常用的有：

（1）created：实例创建完成后调用，需要初始化处理一些数据时比较有用。

（2）mounted：el挂载到实例后调用，一般第一个业务逻辑在这里开始

（3）beforeDestory：实例销毁前调用，用来解绑监听事件。

钩子也是作为选项写入vue实例内，钩子的this指向调用它的vue实例。

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="name" placeholder="你的名字" />
            <h1>你好，{{name}}</h1>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    name: '',
                    a:2
                },
                created:function(){
                    //2
                    console.log(this.a)
                },
                mounted:function(){
                    //<div id="app"></div>
                    console.log(this.$el)
                }
            });
        </script>
    </body>

</html>

3、插值表达式{{}}

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div id="app">
            {{date}}
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    date: new Date(),
                    a:2
                },
                created:function(){
                    //2
                    console.log(this.a)
                },
                mounted:function(){
                    var _this = this;
                    //修改date
                    _this.timer = setInterval(function(){
                        _this.date=new Date();
                    },1000);
                },
                beforeDestroy:function(){
                    if(this.timer){
                        //实例销毁前，清除定时器
                        clearInterval(this.timer);
                    }
                }
            });
        </script>
    </body>

</html>

浏览器实时显示当前时间。

4、v-html 输出html

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div id="app">
            <span v-html='link'></span>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    link: '<a href="#">这是一个连接</a>'
                }
            });
        </script>
    </body>

</html>

解析后的html标签结构：

5、过滤器

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div id="app">
            {{date | formatDate}}
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            var padDate=function(value){
                return value<10?'0'+value:value;
            }
            new Vue({
                el: '#app',
                data: {
                    date:new Date()
                }                ,
                filters:{
                    //value是需要过滤的数据
                    formatDate:function(value){
                        var date = new Date();
                        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;
                    //修改date
                    _this.timer = setInterval(function(){
                        _this.date=new Date();
                    },1000);
                },
                beforeDestroy:function(){
                    if(this.timer){
                        //实例销毁前，清除定时器
                        clearInterval(this.timer);
                    }
                }
            });
        </script>
    </body>

</html>

 过滤器处理简单的文本转换，若需要实现复杂的数据使用计算属性。

posted @ 2017-12-15 10:39  孟繁贵  阅读(248)  评论(0)  编辑  收藏  举报
TOP