vue.js笔记二

vue双向绑定 简单理解

 

<!--模板-->
<div id="test">
    <input type="text" v-model="msg"><br><!--指令-->
    <input type="text" v-model="msg"><!--指令-->
    <p>hello {{msg}}</p><!--大括号表达式-->
</div>


<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
        data: {
            msg: 'tomcat'
        }
    })
</script>

 

当在input输入框实时输入数据时，页面显示的数据也随着改变，这是View--->Dom Listeners --->Model的一个过程

从View到Model的这么一个过程，其实就是以前用Jquery时，给输入框架加上监听事件，Jquery获取监听事件进行一系列操作，把数据返回到后台。而现在VUE把这个监听给直接做好了，不需要我们手动的去绑定。

当后台数据显示到前台页面时，这是Model-->DataBinding-->View的过程，

以前用Jquery从后台获取数据，把数据设置到html页面，而现在VUE是直接拿到数据，只要给定一个参数，在页面上显示即可

这就是所谓的双向绑定，DataBinding，Dom Listeners 这么两个东西简化页面监听和设置数据的过程 ，具体原理后期再说。

来源：oschina

链接：https://my.oschina.net/u/4236225/blog/4296746