vue之绑定数据+datamethodscomputedwatch的基础用法

Posted 2020-12-17 wjx-blog

一、初始化容器

每个vue对象，都对应着一个容器

<div id="vueFirst">
</div>

二、引用vlue.js

<script type="text/javascript" src="js/vue.js"></script>

三、添加vue对象

<script type="text/javascript">
    var vm=new Vue({
        el: "#vueFirst",
        data: {
            userName:"张三",
            age:18
        }
    })
</script>

四、绑定数据

<div id="vueFirst">
    <input type="text" v-model="userName"></input>
    <h3>{{userName}}</h3>
    <h3 v-text="userName"></h3>
    <h3 v-html="userName"></h3>
</div>

四、绑定事件

<div id="vueFirst">
    <h3 v-html="userName" @click="click1"></h3>
    <h3>{{info}}</h3>
</div>
<script type="text/javascript">
    var vm=new Vue({
        el: "#vueFirst",
        data: {
            userName:"<a href=‘‘>测试点击</a>"
        },
        methods:{
            click1(){
                alert("1");
            }
        }
    })
</script>

五、计算

计算里在的方法如：info方法，就相当于data里的一个对象，只不过这个对象是计算出来的。

<div id="vueFirst">
    <h3>{{info}}</h3>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el: "#vueFirst",
        data: {
            userName:"dfdf",
            age:18
        },
        computed:{
            info()
            {
                return this.userName+"|"+this.age;
            }

        }
    })
</script>

六、监控

下面的示例是，监控到userName变化，就把age做加100的处理。

第一种写法

<div id="vueFirst">
    <input type="text" v-model="userName"></input>
    <h3>{{userName}}</h3>

    <h3 v-text="age"></h3>
</div>


<script type="text/javascript">
    var vm=new Vue({
        el: "#vueFirst",
        data: {
            userName:"dfdf",
            age:18
        },
        watch:{
            userName:function(value)
            {
                this.age+=100;
            }
        }
    })

 第二种写法

<div id="vueFirst">
    <input type="text" v-model="userName"></input>
    <h3>{{userName}}</h3>

    <h3 v-text="age"></h3>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#vueFirst",
        data: {
            userName: "dfdf",
            age: 18
        }
    })

    vm.$watch(‘userName‘, function (value) {
        this.age += 100;
    });
</script>