Vue实例成员(方法)

时间 2019-12-19

标签 vue 实例成员方法繁體版

原文原文链接

Vue实例

el：建立实例

new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中能够出现多个实例对应多个挂载点
// 实例只操做挂载点内部内容

每一个 Vue 应用都是经过用 Vue 函数建立一个新的 Vue 实例开始的
一个 Vue 应用由一个经过 new Vue 建立的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

数据与方法

数据

当一个 Vue 实例被建立时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的全部的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
只有当实例被建立时 data 中存在的属性才是响应式的
若是你知道你会在晚些时候须要一个属性，可是一开始它为空或不存在，那么你仅须要设置一些初始值

实例方法

Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来html

vm.$el
vm.$data
vm.$watch(dataAttr, fn)

data：数据

<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据',
        }
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据能够经过Vue实例直接或间接访问-->

methods：方法

methods

methods用来装载能够调用的函数，你能够直接经过 Vue 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。vue

注意，不该该使用箭头函数来定义 methods 函数（例如 plus: () => this.a++）。理由是箭头函数绑定了父级做用域的上下文，因此 this 将不会按照指望指向 Vue 实例，this.a 将是 undefined。示例代码以下。缓存

若是你要经过对 DOM 的操做来触发这些函数，那么应该使用 v-on 对操做和事件进行绑定app

<style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">测试</p>
    <p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            pClick () {
                // 点击测试
            },
            pOver () {
                // 悬浮测试
            }
        }
    })
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

computed：计算

一、computed中定义的是方法属性，data中定义的也是属性，因此不须要重复定义(省略data中的)
二、方法属性的值来源于绑定的方法的返回值
三、方法属性必须在页面中渲染后，绑定的方法才会被启用(调用)
四、方法中出现的全部变量都会被监听，任何变量发生值更新都会调用一次绑定的方法，从新更新一下方法属性的值
五、方法属性值不能手动设置，必须经过绑定的方法进行设置异步

模板内的表达式很是便利，可是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板太重且难以维护,这时候应该使用计算属性函数

<body>
    <div id="app">
        <input type="text" v-model="v1">
        +
        <input type="text" v-model="v2">
        =
        <button>{{ res }}</button>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '',
            v2: '',
            // res: '结果',
        },
        computed: {
            res () {
                console.log('该方法被调用了');
                return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
            }
        }
    })
</script>
<script>
    console.log(1 + '2');
    console.log(1 - '2');
    console.log(+'2');
</script>

watch：监听

一、watch中给已有的属性设置监听方法
二、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
三、监听方法不须要返回值(返回值只有主动结束方法的做用)测试

虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。这就是为何 Vue 经过 watch 选项提供了一个更通用的方法，来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的this

<body>
    <div id="app">
        <p>
            姓名：<input type="text" v-model="full_name">
        </p>
        <p>
            姓：<span>{{ first_name }}</span>
        </p>
        <p>
            名：<span>{{ last_name }}</span>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: '',
        },
        watch: {
            full_name() {
                if (this.full_name.length === 2) {
                    k_v_arr = this.full_name.split('');
                    this.first_name = k_v_arr[0];
                    this.last_name = k_v_arr[1];
                }
            }
        }
    })
</script>

methodes,computed,watch三者区别

它们三者都是以函数为主体，可是它们之间却各有区别。spa

计算属行与方法

咱们能够将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是彻底相同的。然而，不一样的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。这就意味着只要 message 尚未发生改变，屡次访问 reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。插件

相比之下，每当触发从新渲染时，调用方法将总会再次执行函数。

计算属性与侦听属性

watch擅长处理的场景：一个数据影响多个数据
computed擅长处理的场景：一个数据受多个数据影响

delimiters：分隔符

用来修改插值表达式符号

delimiters: ['{[', ']}']

<body>
    <div id="app">
        <p>{{ num }}</p>
        <!--<p>{[ num ]}</p>-->
        <p>{ num ]}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 100
        },
        // 用来修改插值表达式符号
        // delimiters: ['{[', ']}'],
        delimiters: ['{', ']}'],
    })
</script>