01Vue数据双向绑定

时间 2019-11-16

标签 01vue vue 数据双向绑定繁體版

原文原文链接

Vue做为前端MV*架构，Vue.js (读音 /vjuː/，相似于 view) 是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。javascript

Vue 的核心库只关注视图层，它不只易于上手，还便于与第三方库或既有项目整合。html

另外一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也彻底可以为复杂的单页应用程序提供驱动。前端

常见的几种数据绑定形式：vue

1　使用{{expression}}，这种方法比较简单。可是若是网速比较慢，可能给用户看到{{expression}}的体验java

　　，固然也能够和Angular同样加入一个v-cloak，使其在加载完后在进行显示。这种表达式还有另外两种扩展：git

{{*expression}}一次性绑定，后面即便expression中内容有变化，显示也不会发生改变。
{{{expression}}}将expression中的内容转义成html，同时起到了js注入的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>
    
</head>
<body>
    <input type="text" v-model="username" />
    <p>绑定：输入是啥，输出就是啥</p>
    {{username}}
    <hr>
    <p>一次性绑定，初始化绑定，以后即使是修改了，也不会发生变化了</p>
    {{*username}}
    <hr>
    <p>会将绑定内容转义成html</p>
    {{{username}}}
</body>
<script type="text/javascript">
    new Vue({
        el:"body",
            data:{
            username:'buffer'
        }
    })    
    </script>
</html>

2.使用标签github

　　主要标签有v-model:进行双向数据绑定,注意这个通常是控制在input标签上，若是放到其余标签可能没有效果。express

v-text:对应上面的{{expression}}
v-once：对应上面的{{*expression}}
v-html：对应上面的{{{expression}}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script type="text/javascript" 
src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>
    
</head>
<body>
    <input type="text" v-model="username" />
    <p>绑定：输入是啥，输出就是啥</p>
    <p v-text="username"></p>
    <hr>
    <p>一次性绑定，初始化绑定，以后即使是修改了，也不会发生变化了</p>
    <p v-once="username"></p>
    <hr>
    <p>会将绑定内容转义成html</p>
    <p v-html="username"></p>
    <p>使用v-model进行数据绑定</p>
    <p v-model="username"></p>
</body>
<script type="text/javascript">
    new Vue({
        el:"body",
            data:{
            username:'buffer'
        }
    })    
    </script>
</html>

这里可能须要注意computed这个vue属性，通常状况expression表达式会出现vue.data中的字段，可是架构

compute也能够出现字段，例如：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" 
src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>

</head>
<body>
    <div id="box">
        <p>a=>{{b}}</p>
        <!-- <p>b=>{{b}}</p> -->
        <input type="text" v-model="a" />
    </div>
</body>
<script type="text/javascript">
    // window.onload=function(){
        var vm=new Vue({
            data:{
                a:10
            },
            computed:{
                b:{
                    get:function(){
                        alert("调用了get方法"+this.a);
                        return parseInt(this.a)+2;
                    }
                }
            }
        }).$mount("#box")
    // }
</script>
</html>

运行这个例子的时候发现，页面在加载{{b}}是会去调用b:get 方法,咱们在vue定义的数据，vue底层都回去生成一个set和get方法

这个相似面向对象语言中的bean对象。打开控制输出一下vue对象，能够找到以下图的定义。

asddsadasd