萌新VueDay1

萌新Vue入门笔记day1

这是我学习Vue入门第一天在此记录
监听

1.计算属性

计算属性：computed
实现两个text输入框输入，且该随之改变
以姓名举例
办法一：

<div id="test">
    姓：<input type="text" v-model='xing'><br/>
    名：<input typr="text" v-model='ming'>
    <p>自己的猜想：{{xing}} {{ming}}</p><br /><br />
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            xing:'李',
            ming:'明',
        }
    })
</script>

方法二：
就需要计算属性：computed

	<h3>利用computed，将两个关联起来（相当于字符串相加）：</h3> 
	//只有该办法可以在非input标签内使用
    <p>{{ qm }}</p>
    <input type="text" v-model="qm"><br />

<script type="text/javascript" src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            xing:'李',
            ming:'明',
        }
    }),
    computed:{
            qm(){
                return this.xing + ' '+ this.ming
            }          
        }
</script>

方法三（1）：
watch监视中的配置监视

	姓：<input type="text" v-model='xing'><br/>
    名：<input typr="text" v-model='ming'>
	<h3>利用watch监视姓和名，这属于配置监视方法</h3><br />
    <input type="text" v-model="qm1"><br /><br /><br />

<script type="text/javascript" src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            xing:'李',
            ming:'明',
            qm1:'李 明'
            //可以给初值，也可以不给
        }
    }),
    //watch监视
        //以上this代表Vue的实例对象，在这时就是定义的vm
        //watch的function里可以是一个变量，那么这个变量就是新值
        //这是配置监视，在此监视姓
    watch:{
    //function内可有一个参数或者两个参数
    //一个参数就是新值
    //两个参数时第一个为新值，而第二个为旧值
    //可以省略旧值
            xing:function(newvalue,oldvalue){
                this.qm1=newvalue+' '+this.ming
            },
            ming:function(value){
                this.qm1=this.xing+' '+value
            }
        }
</script>

方法三（2）：
采用的是实例对象的方法，也是利用watch，属于外部调用vue方法“Vue.$watch()”。需要在data中给它一个初值，不然没有办法第一时刻准确实现效果。

	姓：<input type="text" v-model='xing'><br/>
    名：<input typr="text" v-model='ming'>
	<h3>也是利用watch，属于外部调用vue方法“Vue.$watch()”。需要在data中给它一个初值，不然没有办法第一时刻准确实现效果</h3><br />
    <input type="text" v-model="qm2"><br /><br /><br />

<script type="text/javascript" src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            xing:'李',
            ming:'明',
            qm2:'李 明'
        }
    })
    vm.$watch('xing',function(value){
        this.qm2 = value+' '+this.ming
    })
    vm.$watch('ming',function(newvalue,oldvalue){
        this.qm2 = this.xing+' '+newvalue
    })
</script>

2.get、set用法

方法四：
就是在计算属性：computed内加入get、set的用法
不需要在data给予初值
可以通过set和get方法，实现双向修改（就是改哪个框都会改变）

	姓：<input type="text" v-model='xing'><br/>
    名：<input typr="text" v-model='ming'>
    <h3>双向，通过set和get方法，实现双向修改</h3><br />
    <input type="text" v-model="qm3">

<script type="text/javascript" src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            xing:'李',
            ming:'明'
        },
        computed:{
            qm3:{
                get(){
                    return this.xing + ' '+ this.ming
                },
                set(value){
                //用数组的办法获取姓和名
                //以空格隔开判断
                    let names = value.split(' ')
                    this.xing = names[0]
                    this.ming = names[1]
                }
            }
        }
    })

</script>