码迷,mamicode.com
首页 > 其他好文 > 详细

vue之绑定数据+data、methods、computed、watch的基础用法

时间:2020-07-19 16:02:10      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:username   变化   strong   mod   fir   first   ext   his   com   

一、初始化容器

每个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>

 

vue之绑定数据+data、methods、computed、watch的基础用法

标签:username   变化   strong   mod   fir   first   ext   his   com   

原文地址:https://www.cnblogs.com/wjx-blog/p/13339230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!