木心

毕竟几人真得鹿，不知终日梦为鱼

导航

vue学习-day05 -- 案例：名字合并(监听data数据的改变)

1.案例：名字合并(监听data数据的改变)

　　使用keyup事件监听data数据的改变

<!DOCTYPE html>
<html>
<head>
    <title>案例：名字合并</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="firstname" @keyup="getFullName">+
        <input type="text" v-model="lastname" @keyup="getFullName">=
        <input type="text" v-model="fullname">
    </div>

    <script type="text/javascript">  
        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                fullname: ''
            },
            methods: {
                getFullName() {
                    this.fullname = this.firstname + "--" + this.lastname;
                }
            }
        });
    </script>
</body>
</html>

 

　　使用watch监听data数据的改变

<!DOCTYPE html>
<html>
<head>
    <title>案例：名字合并</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname">
    </div>

    <script type="text/javascript">  
        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                fullname: ''
            },
            methods: {    
            },
            watch: {//监听data中指定数据的变化，然后触发对应的function处理函数
                //firstname可以加引号，也可以不加。当中间有-时必须加
                firstname: function(newVal, oldVal) {
                    // this.fullname = this.firstname + "--" + this.lastname;
                    this.fullname = newVal + "--" + this.lastname;
                },
                lastname: function(newVal, oldVal) {
                    this.fullname = this.firstname + "--" + newVal;
                }
            }
        });
    </script>
</body>
</html>

 

2.watch-监视路由地址的改变

<!DOCTYPE html>
<html>
<head>
    <title> watch监听路由的改变 </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
    <!-- 安装 vue-router 路由模块 -->
    <script type="text/javascript" src="vue-router.js"></script>
</head>
<body>
    
    <div id="app">
        <p>
        <router-link to="/com1">Go to com1</router-link>
        <router-link to="/com2">Go to com2</router-link>
        </p>
        <!-- 路由出口, 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <script type="text/javascript">  
        // 组件的模板对象
        var com1 = {
            template: "<h2>这是组件1</h2>"
        };
        var com2 = {
            template: "<h2>这是组件2</h2>"
        };

        // 创建一个路由对象
        var routerObj = new VueRouter({
            routes: [  // 路由匹配规则
                {path: '/com1', component: com1},
                {path: '/com2', component: com2}
            ]
        });

        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {    
            },
            router: routerObj,
            watch: {
                '$route.path': function(newVal, oldVal) {
                    //alert(newVal + "------------" + oldVal);
                    if(newVal === '/com1'){
                        alert("进入到组件com1");
                    }else if(newVal === '/com2'){
                        alert("进入到组件com2");
                    }
                }
            }
        });
    </script>
</body>
</html>

 

3.computed-计算属性的使用和3个特点

<!DOCTYPE html>
<html>
<head>
    <title>案例：名字合并</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname">
    </div>

    <script type="text/javascript">  
        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
            },
            methods: {    
            },
            watch: {
            },
            //在computed中，可以定义一下属性，这些属性叫做计算属性；计算属性本质就是一个方法；
            computed: {
                //使用计算属性时，直接当做data属性来使用。
                //计算属性的结果会被缓存，下次使用该计算属性时，从缓存中取。
                //只要计算属性依赖的data数据发生了变化，该计算属性就会重新计算，并更新缓存。
                //注意：计算属性必须要有return结果，该结果就是计算属性的值。
                fullname: function() {
                    return this.firstname + "----" +this.lastname;
                }
            }
        });
    </script>
</body>
</html>

 

posted on 2019-07-20 23:03  wenbin_ouyang  阅读(329)  评论(0)  编辑  收藏  举报