初写vue的构造器和属性与方法

Vue 实例

1、构造器

什么是构造器

Vue.extend返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue的实例构造器

【案例】

<div id="app"></div>
<script>
    // 创建构造器
    var aa = Vue.extend({
        template: '<p>{{firstName}} {{lastName}} 学习 {{alias}}</p>',
        data: function () {
            return {
            firstName: '我正在',
            lastName: '努力',
            alias: 'Vue'
            }
        }
    })
    // 创建 aa 实例，并挂载到一个元素上。$mount()方法手动挂在
    new aa().$mount('#app')
</script>
打印结果为：我正在 努力 学习 Vue

2、属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性

属性

【案例】

<div id="example">{{a}}</div>
<script>
    var data = { a: 1 }
    var vm = new Vue({
        el: '#example',
        data:data
    })
    vm.a === data.a // -> true
    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3    
</script>

注意上面的案例证明 只有这些被代理的属性是响应的，也就是说值的任何改变都是触发视图的重新渲染。

$watch()方法

下面我们做一个小案例就可以了解$watch()方法

<div id="watch">
    firstName:<input type="text" name="li"  v-model="firstName">
    <br>
    lastName:<input type="text" name="fei"  v-model="lastName">
    <p>fullName: {{fullName}}</p>
</div>
<script>
//方法
    // $watch 是一个实例方法   说白了就是观察一个值得变化(实时监听)
    var vm = new Vue({
        el: '#watch',
        data: {
            firstName: 'a',
            lastName: 'fei',
            fullName: 'a fei'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })
    
</script>

上面方法的结果如下图

https://github.com/wujian1994...
https://wujian1994.github.io/...

如果对你有所帮助，那是我最大的荣幸。

对了，兄台，如果对你有帮助的话不妨点个收藏或者推荐再走。