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(){

                    //

                    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(){

                    //

                    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>

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

VUE 数据绑定的更多相关文章

  1. Vue数据绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...

  2. 浅析vue数据绑定

    前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...

  3. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  4. 17: VUE数据绑定 与 Object.defineProperty

    VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...

  5. Vue数据绑定(一)

    Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...

  6. (三)vue数据绑定及相应的命令

    vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...

  7. 「每日一题」有人上次在dy面试，面试官问我：vue数据绑定的实现原理。你说我该如何回答？

    关注「松宝写代码」,精选好文,每日一题 ​时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...

  8. vue数据绑定原理

    一.定义 vue的数据双向绑定是基于Object.defineProperty方法,通过定义data属性的get和set函数来监听数据对象的变化,一旦变化,vue利用发布订阅模式,通知订阅者执行回调函 ...

  9. vue 数据绑定实现的核心 Object.defineProperty()

    vue深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...

  10. vue数据绑定数组，改变元素时不更新view问题

    关于这个问题,官网上说的很清楚官方文档  写个例子HTML<body> <div class="box"> <div v-for="aa i ...

随机推荐

  1. Single Number III(LintCode)

    Single Number III Given 2*n + 2 numbers, every numbers occurs twice except two, find them. Example G ...

  2. HDU 5862 Counting Intersections（离散化 + 树状数组）

    Counting Intersections Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  3. 浮生半日：探究Python字节码

    好吧!“人生苦短,请用Python”,作为python爱好者以及安全从业者,而且最近也碰到了一些这方面的问题,懂点python字节码还是很有必要的. Python是一门解释性语言,它的具体工作流程如下 ...

  4. 使用appframework前端框架中输入框圆角问题

    目前使用HTML5技术来开发手机跨平台app已经成为了曾经的web开发人员介入移动开发的一条捷径.与此对应也出现了很多新的技术来支撑这样的开发方式,例如国外的phonegap和国内的APPcan等.很 ...

  5. START法则

    用途:在做项目总结以及阶段性报告等的时候,可以很好的帮自己对整个工作过程进行梳理和总结,很好的表现出自己分析问题的清晰性.条理性和逻辑性. 定义:STAR法则是情境(situation).任务(tas ...

  6. cogs 2039. 树的统计

    2039. 树的统计 ★★   输入文件:counttree.in   输出文件:counttree.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 关于树的统计问题有 ...

  7. 【数论】【快速幂】【扩展欧几里得】【BSGS算法】bzoj2242 [SDOI2011]计算器

    说是BSGS……但是跟前面那题的扩展BSGS其实是一样的……因为模数虽然是质数,但是其可能可以整除a!!所以这两者其实是一样的…… 第一二种操作不赘述. #include<cstdio> ...

  8. 【数论】bzoj1968 [Ahoi2005]COMMON 约数研究

    对于i属于[1,n],i只能成为[1,n]中n/i个数的约数,易证. #include<stdio.h> int n,i; long long ans; int main() { scan ...

  9. bzoj 3540: [Usaco2014 Open]Fair Photography

    3540: [Usaco2014 Open]Fair Photography Description FJ's N cows (2 <= N <= 100,000) are standin ...

  10. [HDU4729]An Easy Problem for Elfness

    [HDU4729]An Easy Problem for Elfness 题目大意: 给你一棵\(n(n\le10^5)\)个点的树,树上每条边都有容量. \(m(m\le10^5)\)次询问,每次询 ...