20190219-vue学习笔记4

----20190219-vue学习笔记4—

computed计算属性

直接做练习：

声明变量：

data(){
            return {
                surname1: '',//姓
                name1: '',//名
            }
        },

对文本框绑定变量：

请输入： 姓: <input type="text" v-model="surname1" > 名: <input type="text" v-model="name1" >

在文本输入姓和名，并将前后文本框的值组合在一起，现阶段有三种写法：
1、双向绑定：
直接将变量显示出来。

<lable >您的全名：{{surname1}}{{name1}}</lable>

2、调用函数：
在methods框架中，写一个方法，注意调用的时候，
格式是：{{function()}}，有带括号。

methods: {
            link_name: function () {
                return this.surname1 + this.name1;
            }
        },

<div>函数方法：{{link_name()}}</div>

3、计算属性：
在computed框架中，写函数，直接调用，注意调用的时候，
格式是：{{function}}，不带括号。

computed: {
            com_name_total: function () {
                return this.surname1 + this.name1;
            },
        }

<b>计算属性：{{com_name_total }}</b>

在computed 中的let命令

let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
限制条件：
1、作用域只局限于当前代码块；
2、同一作用域下不能定义相同的变量。

用computed获取系统时间函数

computed: {
            com_name_total: function () {
                let mydate = new Date();    //Wed Feb 20 2019 23:27:00 GMT+0800 (中国标准时间)
                let year=mydate.getFullYear();//获取年
                let month=mydate.getMonth()+1;//获取月   +1，加1月 +2 加两月
                let date=mydate.getDate();//获取日
                let hh=mydate.getHours();//获取小时
                let mm=mydate.getMinutes();//获取分
                let ss=mydate.getSeconds();//获取毫秒
                let mmm=mydate.getMilliseconds();//
                console.log('当前时间：'+year + '年'+month+'月'+date+'日 ' +hh+':'+mm+':'+ss +' '+mmm
                );
//                let myyear = mydate.getFullYear();
                let myyear1=year+100;
                console.log(myyear1);

                return this.surname1 + this.name1;
            },
        }

效果如下：

watch监听器/侦听器

在vue中，使用watch 来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
在上面的练习中，改进下程序，增加记录操作次数：

在script框架里，增加wacth｛｝，为了监听com_name_total方法的最后值的变化，并显示结果：
先声明变量

 data(){
  			fullname: 0, 
   },

 watch:{
            com_name_total:function () {   
                this.fullname= this.fullname+1;        
            }
        },

其中， com_name_total:function () 的写法里，隐藏最初的2个参数，
com_name_total:function (oldValue,newValue) { }，
把2个参数标上，看下效果：