第二篇：Vue实例成员

Posted 2021-03-10 cnhyk

Vue实例

1、el：实例

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

2、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实例直接或间接访问-->

3、methods：方法

<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为事件提供实现体-->

4、computed：计算

计算属性：定义方法属性，方法返回值是属性，不需要在其他地方重复定义，会监听方法中出现的所有变量。

1) 其实就是vue中的方法属性，方法名可以作为属性来使用，属性值为方法的返回值

2）在computed中声明的方法属性，不能在data中重复声明，比data中声明的属性要多出写逻辑的地方

3）方法属性，自带监听机制，在方法属性中出现的变量，都会被监听，一旦有任何被监听的变量值发生更新，方法属性都会被调用更新方法属性的值。

4）方法属性一定要在页面中渲染一次，方法属性采用意义，多次渲染，方法属性只会被调用一次

方法属性的应用场景：一个变量依赖于多个变量，且需要进行一定的逻辑运算

<div id="app">
    <input type="text" v-model="a">
    <input type="text" v-model="b">
    <div>
        {{ c }}
    </div>
</div>
 
<script>
    // 一个变量依赖于多个变量
    new Vue({
        el: "#app",
        data: {
            a: "",
            b: "",
        },
        computed: {
            c: function() {
                // this代表该vue实例
                return this.a + this.b;
            }
        }
    })
</script>

计算器案例：

<div id="app">
    <!-- type="number"表示只能写数字 -->
    <input type="number" v-model="num1" max="100" min="0">
    +
    <input type="number" v-model="num2" max="100" min="0">
    =
    <button>{{ sum }}</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            // sum: '',  // 重复声明
            num1: '',
            num2: '',
        },
        computed: {
            sum () {
                // num1和num2都在该方法属性中，所以有一个更新值，该方法都会被调用
                if (this.num1 && this.num2) {
                    return +this.num1 + +this.num2;  // +this.num1是将字符串快速转换澄数字
                }
                return '结果';
            }
        }
    })
</script>

5、watch：监听

监听：监听任何一个与方法同名的变量，监听变量值更新监听方法就会被回调。

1）watch中不定义属性，只是监听属性，所以方法的返回值没有任何意义，只是监听变量值是否发生更新

2）watch中的方法名，就是被监听的属性（方法名同被监听属性名）

3）被监听的变量值一旦发生更新，监听方法就会被调用

应用场景：

应用：一个变量通过逻辑影响着其他变量或是业务（图形）

i）k线图：股票数据变化，页面的k线图重新渲染（需要逻辑将数据转换为图形）

ii）拆分姓名：录入姓名，拆分为姓和名（需要逻辑将一个数据拆分为多个数据）

<div id="app">
    <input type="text" v-model="ab">
    <div>
        {{ a }}
        {{ b }}
    </div>
</div>
 
<script>
    // 多个变量依赖于一个变量
    new Vue({
        el: "#app",
        data: {
            ab: "",
            a: "",
            b: "",
        },
        watch: {
            ab: function() {
                // 逻辑根据需求而定
                this.a = this.ab[0];
                this.b = this.ab[1];
            }
        }
    })
</script>

6、delimiters：分隔符

用于改变插值表达式的符号

<div id='app'>
    ${ msg }
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        delimiters: ['${', '}']
    })
</script>