手挽手带你学VUE：三档 VUE构造期内经常使用属性

时间 2019-12-05

标签手挽手 vue 构造期内经常使用属性繁體版

原文原文链接

视频教程

因为掘金不支持视频连接视频请移步 www.henrongyi.top

你能学到什么

手挽手带你学VUE入门三档,VUE构造器内部的各类属性的使用，methods，computed，watch，filters这四个属性，在工做中会常常用到。还有不少混合属性例如mixin等，后期会有视频单独介绍，咱们如今先作到入门能够开发，不经常使用的用法后期会给你们补充，学完这一期，你已经能够开发一个小项目玩一下了。javascript

methods选项

methods是咱们VUE中的事件处理器，你能够把方法写在这里面，而且在构造器内部经过this.方法名调用，以前的学习中咱们已经使用过这个方法，可是这里强调一下，千万不能够用箭头函数，毕竟这里咱们的this是须要指向VUE实例的。在VUE构造器的外部咱们也能够经过实例来调用方法。这里给你们举个例子。
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> .active{ color:red } </style>
</head>
<body>
    <div id="app">
        <button v-on:click="add">+</button>{{num}}<button @click="minus">-</button>   
        <!-- 这里咱们经过click来调用了add和minus方法 -->
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script> var app = new Vue({ el:"#app", data:{ num:1 }, methods:{ add(){ this.num++ }, minus(){ this.num-- this.testMet()//这里咱们经过this来调用事件处理器内的方法 }, testMet(){ console.log("我被调用了") } } }) app.testMet()//这里咱们经过app实例来调用事件处理器内的方法 </script>
</body>
</html>

复制代码

computed选项

还记得咱们第一期讲的那个在差值表达式内写简单的JS表达式吗{{message.split('').reverse().join('')}}，
实际上这样处理数据是不优雅的，VUE为咱们提供了computed这个选项来处理数据，咱们称它为计算属性，当逻辑复杂的时候
咱们就应当使用 computed计算属性了。
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> .active{ color:red } </style>
</head>
<body>
    <div id="app">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script> var app = new Vue({ el: '#app', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 app 实例 return this.message.split('').reverse().join('') } } }) </script>
</body>
</html>
复制代码

这是一个计算属性的简单用例，实际上，计算属性内部存在get和set两个方法，咱们称他为 getter和setter，这里我给你们上代码讲解。css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> .active{ color:red } </style>
</head>
<body>
    <div id="app">
        <p>{{firstName}}</p>
        <p>{{lastName}}</p>
        <p>{{fullName}}</p>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script> var app = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', }, computed: { // 计算属性的 getter fullName:{ // getter 在使用数据的时候触发 get: function () { return this.firstName + ' ' + this.lastName }, // setter 在修改数据的时候触发 newValue 就是咱们修改完成之后的数据 set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } }) </script>
</body>
</html>
复制代码

vm.fullName = 'John Doe' 你们能够在外部直接修改fullName或者在控制台修改均可以触发fullName的set事件来修改 firstName和lastNamehtml

watch选项

Vue中咱们想要盯着一个数据，在它发生变化的时候就要作什么事，这时候咱们就要用到watch侦听器。
具体用法也是很简单的，咱们先来一个浅监听。每次改变都会触发监听的function 它接受两个参数 当前的val和改变前的
oldval，咱们能够根据这个作出判断
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> .active{ color:red } </style>
</head>
<body>
    <div id="app">
        <p>{{Name}}</p>
        <p>{{ChangeName}}</p>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script> var app = new Vue({ el: '#app', data: { Name: 'QM', ChangeName: 'Cool', Names: 'QMS', NameDeep: 'QMDeep', NameImm: 'QMImm', NameObj:{ QM: 'shuai' } }, watch:{ Name:function (val,oldval) { // 能够直接在这里写方法 console.log(val,oldval) }, Names:[ function (val,oldval) { // 多个方法可使用数组的形式 console.log(val,oldval) }, function (val,oldval) { // 多个方法可使用数组的形式 console.log(val,oldval) } ], // 深度 watcher NameDeep: { handler: function (val, oldVal) { /* ... */ }, deep: true }, // 该回调将会在侦听开始以后被当即调用 NameImm: { handler: function (val, oldVal) { /* ... */ }, immediate: true }, //Obj的形式 'NameObj.QM':function (val, oldVal){ /* ... */ } } }) </script>
</body>
</html>
复制代码

filters选项

Vue.js 容许你自定义过滤器，可被用于一些常见的文本格式化。过滤器能够用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> .active{ color:red } </style>
</head>
<body>
    <div id="app">
        <!-- 在 `v-bind` 中 -->
            <div v-bind:id="rawId | capitalize">
                <!-- 在双花括号中 -->
                {{ message | capitalize }}
            </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script> var app = new Vue({ el: '#app', data: { message: "test", rawId: "change" }, filters:{ 'capitalize':function(value){ if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>
</body>
</html>
复制代码