Vue学习之数据绑定

2018-10-20 本文已影响0人 shandamengcheng

vue学习之数据绑定

一、vue实例

vue根实例的创建可以通过构造函数Vue，

new Vue({
  el:'#app'
})

在这里，必不可少的选项就是el, el用来指定一个页面中已经存在的DOM元素来挂载Vue实例。
比如：

<div id = "app">
</div>
<script>
new Vue({
   el:'#app',
   data:{
   }
})
</script>

这就是说，我们创建的Vue实例是作用在 id为 app的div标签里的。
vue实例中另一个选项是data,它用来声明应用内所有用到的双向绑定数据。当然，除了显示在data里声明数据，还可以制定一个已有的变量，默认是在他们之间创建双向绑定，一个变化，另一个也会变化。

var mydate = {
     a：1
}
new Vue({
 el:'#app',
 data:{
  date:mydate;
}
})

二、插值与表达式

vue通过插值的方式，从而自动的将我们设置的双向绑定的数据实时显示出来。最基本的文本插值方式是通过大括号，即 “ {{ }} ”。

<div id="app">
{{greeting}}
</div>
<script>
new Vue({
el:'#app',
data:{
    greeting:"Hello World";
}
})
</script>

结果是：Hello World
{{}}除了显示绑定的属性值，还可以在里面进行Javascript表达式的运算，比如三目运算，简单的运算等。

<div id="app">
{{number/10}}
{{isOk?'conform':'concel'}}
{{text.split(',').reverse().join(',')}}
</div>
<script>
new Vue({
el:'#app',
data:{
 number:100,
 isOK:false,
 text:'123,456'
}
})
</script>

结果显示为： 10、concel、456,123

注意：双大括号内，只能进行单个表达式运算，不支持语句和流控制

三、过滤器

在Vue中，支持在{{}}中加一个管道符 “ | ”来对数据进行过滤。过滤的规则是自定义的，可通过在Vue实例中添加 filters 选项来进行自定义。

<div id="app">
        {{date|formatDate}}
    </div>
    <script>
        var  setDate = function(value)
        {
            return value<10? '0'+value :value;
        };
        new Vue({
            el:'#app',
            data:{
                date:new Date()
            },
            filters:{
                formatDate:function(value)
                {
                var date = new Date(value);
                var year = date.getFullYear();
                var month = setDate(date.getMonth()+1);
                var day = setDate(date.getDate());
                var hours = setDate(date.getHours());
                var minutes = setDate(date.getMinutes());
                var seconds = setDate(date.getSeconds());
                return year + '-' + month + '-' + day + '-' + hours + ':' + minutes + ':' +seconds;
                }
            },
            mounted:function ()
            {
                var _this =this;
                var time = setInterval(function(){
                    _this.date = new Date()
                },1000);
            },
            beforeDestroy:function()
            {
                if(this.time)
                {
                    clearInterval();
                }
            }
        })
    </script>

我们这里对时间进行了处理，当month ,day ,hours ,minutes ,seconds小于10时，会在前面加一个0。过滤器也可以串联和接收参数。

{{message | filtersA | filtersB}}
{{message | filtersA('arg1','arg2'}},但是字符串arg1 , arg2会传给过滤器的第二，和第三个参数，因为第一个参数是要处理的数据。
filters主要用于处理文本过滤，更复杂的数据变换，要用到计算方法。

四、指令

指令是vue中常用的功能，其是以 v- 开头。常见的指令有v-if, v-else ,v-else-if, v-html ,v-bind ,v-on, v-pre.
下面对这几个简单的指令简要介绍，后面会有更详细的介绍：
v-if ,v-else ,v-else-if 这几个常用在一起，当有单个选择时，用 v-if，两个时要用到 v-if 和 v-else ，当有多个条件选择时，这三个都是会用到的。

<div id="app">                     //根据a的不同，显示不同的内容
        <template v-if="a===1">
            <div>Hello</div>
        </template>
        <template v-else-if="a===2">
            <div>I love Vue!</div>
        </template>
        <template v-else>
            <div>Me too!</div>
        </template>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                a:3
            }
        })
    </script>

v-bind的基本作用是动态更新HTML元素的属性，比如 id ,class等

<div id="app">
        <a v-bind:href="url">百度</a>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                url:"https://www.baidu.com"
            }
        })
    </script>

v-on用来绑定事件监听器。

<div id="app">
        <button v-on:click="buttonClick">Click Me</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            methods:{
           buttonClick:function()
           {
            alert("You clicked the button");
           }
            }
        })
    </script>

v-pre 用于显示{{}}标签

<div id="app">
        <span v-pre>{{url}}</span>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                url:"https://www.baidu.com"
            }
        })
    </script>

结果会是： {{ url }}

五、语法糖

语法糖是在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。

<a v-bind:href="url">百度</a>
<button v-on:click="buttonClick">Click Me</button>
可以改为：
<a :href="url">百度</a>
<button @click="buttonClick">Click Me</button>

Vue学习之数据绑定