Vue简明介绍配置对象的配置选项

目录
  • 一、methods
  • 二、computer计算属性
  • 三、watch
  • 四、filter

一、methods

一般事件调用的函数都会在methods函数里面属性进行定义，在methods属性进行定义的函数，我们也可以称之为方法，一般作为事件的回调函数进行使用。这个被调用几次就能被执行几次。

我们可以通过实例代码来更好的理解我们这个实例：

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果价格：<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
数量：<input type="text" v-model="count" @change="sum()">斤</br>
总计：<input type="text" v-model="total" >元</br>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    data:{
     price:0,
     count:1,
     total:0,
    },
    methods:{
sum(){
    this.total = this.price*this.count;
}
    }
})
    </script>
</body>
</html>

运行结果：

我们可以看到，当数量和价格改变的时候，我们就要重新计算一下总计的钱，这个时候就要对价格和数量的改变进行监听，这样才能计算出总得价格；因为在methods里面属性已经定义了sum的计算方法，总和的计算公式，在change和keyup两个事假触发被调用的时候。数据就会被发生改变，从而代码执行sum里面的计算方法。

二、computer计算属性

为什么会有这个计算属性呢？因为在vue中，为了将逻辑进行简化，当某一个值过于依赖其他的属性值的时候，vue会提供计算属性来供代码使用。这个计算属性适用于执行复杂的表达式，应为这些复杂的表达式往往很长且繁琐的重复使用。

可以直接写计算属性可以调用计算属性，跟别的属性的使用方法一样。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果价格：<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
数量：<input type="text" v-model="count" @change="sum()">斤</br>
总计：<input type="text" v-model="total" >元</br>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var app = new Vue({
    el:'#app',
    data:{
     price:0,
     count:1,
    },
    computed:{
total:function(){
    return this.price*this.count
}
    }
})
    </script>
</body>
</html>

运行结果：

计算属性的函数的返回结果可以直接赋给到计算的属性名，计算属性只有依赖的数据发生变化的时候才能重新计算，依赖数据不改变的情况下，第一次计算的结果会缓存起来，下次直接使用。

三、watch

watch可以用来监听data对象属性或计算属性里的变化，是用来侦听数据的变化，当数据变化的时候，可以处理一些事务。

watch的值是一个对象，对象的属性是要侦听的属性，是要需要观察表达式，它的值是一个回调的值、方法名或者对象。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果价格：<input type="text" v-model.munber="price" >元/斤</br>
数量：<input type="number " v-model="count" >斤</br>
总计：<input type="text" v-model="total" >元</br>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var app = new Vue({
    el:'#app',
    data:{
     price:0,
     count:1,
     total:0,
    },
watch:{
    "price":function(newVal,oldVal){
        return this.data=newVal*this.count;
    },
    "count":function(newVal,oldVal){
        return this.total = this.price*newVal;
    }
}
})
    </script>
</body>
</html>

运行结果：

这个侦听的过程是：当调用watch，里面对象的每一个属性，当一个被侦听的属性的值发生变化的时候，触发这个属性的回调函数就会被执行。

当总计依赖于价格和数量，当价格和数量发生变化的时候，总计也发生变化·。侦听价格何和数量，变化就求和。侦听和计算属性的区别：计算属性会保存结果，但是侦听不会。

四、filter

这个filter称为vue里面的过滤器，可以在输出结果之前对数据进行过滤，可以被用于一些常用的文本格式化。过滤器：一种模板内用于数据处理的便捷方法，适用于字符串、数值、数字等设置显示格式。

过滤器语法写法：vue.filter('过滤器名'，function（参数）{函数体})，过滤器只在差值和v-bind表达式中进行调用，被添加在表达式的尾部，使用“|”分开。简单的通过代码来解释：

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<h1>{{sum|f_int}}</h1>
<h1>{{sum|f_int|f_$('$')}}</h1>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        Vue.filter('f_int',function(msg){
            return Math.round(msg);
        })
        Vue.filter('f_$',function(msg,arg1){
            return arg1+msg;
        })
var app = new Vue({
    el:'#app',
    data:{
sum:86
    },
})
    </script>
</body>
</html>

运行结果：

到此这篇关于Vue简明介绍配置对象的配置选项的文章就介绍到这了,更多相关Vue配置对象内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中的rem如何配置

    目录 vue中rem的配置 1.在js中统一计算进行配置 2.借助px2rem 插件 vue-cil 3.0 px自动转换为rem适配移动端 1.下载postcss-pxtorem.lib-flexible 2.配置main.js 3.根路径配置postcss.config.js vue中rem的配置 开发移动端,我们常常会因为把握不好尺度而觉得十分难受,因此可以用到rem+flex进行,那么vue中我们该如何如何配置呢? 1.在js中统一计算进行配置 新建src/utils/rem.js 代码

  • Vue子组件内的props对象参数配置方法

    Vue子组件内的props对象参数配置方法

    目录 一.简单数据类型 1.布尔类型 Boolean 正确写法 : 2.数字类型 Number 正确写法 : 3.字符串类型 String 正确写法 : 二.复杂数据类型 1.数组 Array 错误写法 : Eslint 语法报错 : 正确的常规写法 : 或是用 箭头函数 : 2.对象 Object 错误写法 : 正确的常规写法 : 3.函数 Function 正确写法 : 这篇文章主要介绍了Vue子组件内的props对象里的default参数是如何定义 Array.Object.或Functi

  • Vue简明介绍配置对象的配置选项

    Vue简明介绍配置对象的配置选项

    目录 一.methods 二.computer计算属性 三.watch 四.filter 一.methods 一般事件调用的函数都会在methods函数里面属性进行定义,在methods属性进行定义的函数,我们也可以称之为方法,一般作为事件的回调函数进行使用.这个被调用几次就能被执行几次. 我们可以通过实例代码来更好的理解我们这个实例: 实例代码: <!DOCTYPE html> <html lang="en"> <head> <title&g

  • jqPlot Option配置对象详解

    这里主要介绍jqPlot中核心部分--Option配置对象.同时,也会对jqplot的各个渲染器做个简单介绍. 这里主要是参考jqPlot官方网站关于Option的介绍并结自己简单实践和理解来对Option的相关属性进行解释,如有不合适或错误的地方请指正. 复制代码 代码如下: options = { seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", &qu

  • Activiti流程引擎对象及配置原理解析

    流程引擎对象和其配置对象都是activiti的核心对象 一.activiti的简单使用流程 activiti在工作时,一般有以下几个步骤: 创建一个流程引擎配置对象ProcessEngineConfiguration对流程引擎进行配置 通过流程引擎配置对象来获取流程引擎对象ProcessEngine 通过流程引擎对象来部署流程图 启动流程 二.流程引擎配置对象ProcessEngineConfiguration的介绍 activiti用ProcessEngineConfiguration对象来配

  • .NET 6全新配置对象ConfigurationManager介绍

    .NET 6全新配置对象ConfigurationManager介绍

    介绍 本节为大家带来.NET 6新增的ConfigurationManager,很多人好奇为啥要讲这个,读取加载配置信息都随手就来了,我们往下看一下. 翻译:这添加了 ASP.NET Core 的新 WebApplcation 和 WebApplicationBuilder已经使用的类型,允许从配置(例如appsettings.json和DOTNET_/ASPNETCORE_环境变量)中读取,同时仍然能够添加新的配置源,而无需显式重建配置.每次通过IConfigurationBuilder界面添

  • vue router的基本使用和配置教程

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 1.在main.js文件中引入相关模块

  • vue之proxyTable代理超全面配置流程

    vue之proxyTable代理超全面配置流程

    目录 前言 介绍 配置分离 1. config.dev.js 2. proxyTableHandler.js 效果如下 前言 用了vue有一年多了,从最初的摸着石头过河到现在已经能熟练的使用vue开发项目,学到了许多,特别是vue的代理配置让我眼前一亮,甚是喜欢,故将自己对proxyTable代理配置整理出来,供致力于的开源的同辈浏览,望大家手下留情,哈哈_. 介绍 vue的proxyTable是用于开发阶段配置跨域的工具,可以同时配置多个后台服务器跨越请求接口,其真正依赖的npm包是http-

  • 基于Vue实例对象的数据选项

    基于Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data data是Vue实例的数据对象.Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化 [注意]不应该对data属性使用箭头函数 <div id="app"> {{ message }} </div> <script&

  • 在vue项目中使用sass的配置方法

    在vue项目中使用sass的配置方法

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /

  • vue项目中运用webpack动态配置打包多种环境域名的方法

    在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p

随机推荐