vue中计时器

在mounted中设置计时器setInterval，在beforeDestroy中解除计数器clearInterval；
var timer = setInterval(function(){ 修改数据 },500)；
clearInterval(timer);

   mounted(){
   var _this = this; //声明一个变量，指向vue实例，保证作用域一样；
   _this.name = '你好啊vue项目';   
   this.timer = setInterval(function(){
     _this.time = new Date().getFullYear() +'年'+ (new Date().getMonth()+1) +'月'+ new Date().getDate() +'日'+ new Date().getHours() +':'+ new Date().getMinutes() +':'+ new Date().getSeconds() ;
   },500);
 },
 beforeDestroy(){
   if(this.timer){
     clearInterval(this.timer)
   }
 },

三元运算

条件判断？是：否

<span>{{number === 10? number : '数字不是10'}}</span>

在vue里{{ }}支持表达式和绑定数值，如果想要连同大括号显示，使用v-pre,则标签里的内容就不会进行编译，直接输出

<span v-pre>{{这里的内容是不会被编译的}}</span>

输出结果：
{{这里的内容是不会被编译的}}

过滤器filter

用途：用于对数据进行格式化处理，这些处理规则是自定义的，在vue实例里添加filter选项；过滤器主要用于简单的数据转换，更复杂的数据转换使用计算属性；
{{数值 | 过滤器名字}}
filters:{过滤器名字1:function(value){数值转换;return 整理好的数值}}

<p>时间毫秒值{{ time | modify}}</p>
filters:{
    modify:function(value){    //value是过滤器接受的第一个参数，传值的话则是第二个第三个参数；
      return new Date().getTime()
    }
  },

v-on/v-bind

v-bind基本用途：更新HTML元素的属性,如img的src或者id，class等等，数据在data选项中声明
v-bind还可以绑定样式名称class和内联样式style

v-bind

1.v-bind更新元素属性；

 <a v-bind:href="bdurl">百度链接</a>

data () {
    return {
      bdurl:'http://baidu.com'
    }
  },

2.v-bind绑定class，需要依赖判断isA是否为true；当表达式冗长时优先想到计算属性
格式： :class="{'class类名':数值判断条件}"

<span :class="{'coo':isA}">{{prices}}</span>
//多个class，在条件成立时渲染
<span :class="{'coo':isA,'coo1':isB}">{{prices}}</span>

点击切换样式

<span :class="[isA ? 'coo' :'coo1']" @click='isA = !isA'>{{prices}}</span>

3.v-bind绑定内联样式style,和绑定class一样，为了代码维护，多用在data或者i算属性中

<p :style='styles'>北京时间:{{time}}</p>

data () {
    return {
      styles:{
        fontSize:45+'px',
        color:'#f00'
      },
      
    }
  },

应用多个样式对象时，使用数组；实际，应用样式数组并不是很多，因为都会写在一个对象里，更多的使用计算属性

<p :style='[styles,style1]'>北京时间:{{time}}</p>

v-on基本用途：绑定事件监听器，表达式可以是函数，也可以是表达式，此时函数中的this指向vue实例.所以不可以使用箭头函数..为了方便数据维护，最好使用函数
v-on绑定的事件除了click，还有dbclick/keyup/mousemove

<h1 v-on:click='dianji()'>{{ msg }}</h1>
methods:{
    dianji:function(){
      this.msg = '点击切换信息'
    }
  }

语法糖
在不影响功能的情况下，用更简单的方法实现。也可以说是缩写
v-on -------@;
v-bind------: ;

计算属性

模板中的数据或表达式过于冗长或者逻辑复杂时，需要使用计算属性.此时的数据不需要再data中声明
所有的计算属性都是以函数的形式，写在vue实例里的computed，最终返回数据结果
计算属性还可以依赖多个vue实例，只要最后返回数据
在函数的最后返回数据
eg;购物车里的商品价格总和

data () {
    return {
      bag1:[
        {
          name:'手机1',
          price:1800,
          num:2
        },
        {
          name:'手机2',
          price:3200,
          num:1
        },
        {
          name:'手机3',
          price:7900,
          num:2
        }
      ],
      bag2:[
        {
          name:'电脑1',
          price:18000,
          num:2
        },
        {
          name:'电脑2',
          price:32000,
          num:1
        },
        {
          name:'电脑3',
          price:79000,
          num:2
        }
      ]
    }
  }

computed:{
    prices:function(){
      var prices = 0;
      for(var i=0; i<this.bag1.length;i++){
        prices += this.bag1[i].price*this.bag1[i].num;       
      }
      for(var i=0; i<this.bag2.length;i++){
        prices += this.bag2[i].price*this.bag2[i].num;       
      }
      return prices;
    }
  }

上面使用的都是计算属性的默认使用方法，每个计算属性都有setter和getter。但是一般情况i下不会使用setter。getter用于读取数据，当手动修改计算属性的值时，就会触发setter函数。
计算属性两个实用的小技巧：1.计算属性可以依赖计算属性；2.计算属性还可以依赖其他vue实例的数据；在组件化开发中经常使用

var app1= new Vue({
   el:'#app1',
   data(){
      return {
          text:123456
     }
  }
})
//组件2依赖了组件1的数值，当组件1修改数据值，组件2会发生相应的变化
var app2= new Vue({
   el:'#app2',
   computed:{
        reversedText: function(){return  appl.text.split (',') . reverse() . join( ','）}
   }
})

调用methods方法和计算属性可能实现的效果时相同的，但是计算属性时依赖缓存的，一个计算属性所依赖的数据发生变化时，它才会重新取值。而methods（），只要重新重新渲染就会被调用。在处理大量数据时，使用计算属性还是比较好的，除非你不需要缓存

2019-05-16