VUE学习笔记（六）

1. watch 监听数据变化

    var login = {
        template: '<h1>登录组件</h1>'
    }
    var register = {
        template: '<h1>注册组件</h1>'
    }
    var router = new VueRouter({
        routes: [
            { path: '/login', component: login },
            { path: '/register', component: register }
        ]
    })
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {},
        router,
        watch: {
            '$route.path': function(newVal, oldVal) {
                console.log(`新地址:${newVal}      老地址${oldVal}`)
            }
        }
    })

    <div id="app">
        <router-link to='/login'>登录</router-link>
        <router-link to='/register'>注册</router-link>
        <router-view></router-view>
    </div>

 

 2. computed计算属性

    var vm = new Vue({
        el: '#app',
        data: {
            firstname: '',
            lastname: ''
        },
        methods: {},
        computed: {
            // 计算属性 本质就是一个方法，不过在使用时，把它们的名称直接当作属性来使用，不会当作方法去调用
            // 只要 计算属性function内部所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值
            /* 计算属性的求值结果，会被 缓存 起来，方便下次直接使用；如果 计算属性方法中的数据都没有发生变化，则不会
             重新对计算属性求值*/
            fullname() {
                console.log('ok')
                return this.firstname + '-' + this.lastname
            }
        }
    })

 

    <div id="app">
        <input type="text" v-model='firstname'>+
        <input type="text" v-model='lastname'>=
        <input type="text" v-model='fullname'>
        <p>{{ fullname }}</p>
        <p>{{ fullname }}</p>
        <p>{{ fullname }}</p>
        <p>{{ fullname }}</p>
    </div>

 

 

 3. watch、computed和methods的区别

    3.1 computed 属性的结果会被 缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

    3.2 methods 方法表示一个具体的操作，主要书写业务逻辑；

    3.3 watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 compputed 和 methods 的结合体；

4. 路由的两种传参方式：query 和 params

   4.1 如果在 <router-link> 标签的 to 属性后面传参 '/login?id=12345'，则可以通过调用 $route.query.id 拿到传递的参数。

    var login = {
        template: '<h1>登录组件——{{ $route.query.id}}</h1>',
        created() {
            console.log(this.$route.query.id)
        }
    }
    var register = {
        template: '<h1>注册组件</h1>'
    }
    var router = new VueRouter({
        routes: [
            { path: '/login', component: login },
            { path: '/register', component: register },
        ],
        linkActiveClass: 'myActive'
    })
    var vm = new Vue({
        el: '#app',
        methods: {},
        router
    })

    <div id="app">
        <router-link to='/login?id=asfasd'>登录</router-link>
        <router-link to='/register'>注册</router-link>
        <router-view></router-view>
    </div>

 

   4.2 在路由中的path定义为 ' /login/:id' ，然后再在<router-link> 标签的 to 属性后面传参 ‘/login/1234’，则可以通过 $route.params.id 拿到传递的参数。

    var login = {
        template: '<h1>登录组件——{{ $route.params.id}}</h1>',
        created() {
            console.log(this.$route)
        }
    }
    var register = {
        template: '<h1>注册组件</h1>'
    }
    var router = new VueRouter({
        routes: [
            { path: '/login/:id', component: login },
            { path: '/register', component: register },
        ],
        linkActiveClass: 'myActive'
    })
    var vm = new Vue({
        el: '#app',
        methods: {},
        router
    })

    <div id="app">
        <router-link to='/login/12312sdf'>登录</router-link>
        <router-link to='/register'>注册</router-link>
        <router-view></router-view>
    </div>