最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

Vue第四节:定义一个vue实例的4个常用选项

Vuejs rockyxia 3331浏览

写在前面

上一节,我们讲过如何创建一个Vue实例,仅需4步走:

( 不厌其烦地复习一下 )

我们知道,定义一个Vue实例的参数有el(指定挂载的DOM元素),data(实例的数据),上一节讲过除了这两个之外,还可以定义其他参数。今天,我们就来学习在开发中,我们要怎么定义一个vue实例才能满足我们的需要?

下面,我们先用上一节的知识,先创建一个Vue实例:

<div id="app"></div>
<script>
  let vm = new Vue({
    //挂载元素
    el:'#app',
    //实例vm的数据
    data:{}
  });
</script>

很简单,轻松搞掂,接下来,就用这个实例来展开讲解。

我们就具体讲一下定义一个vue实例会用到的4个常用参数选项,不常用的选项,咱先不管它(后面有需要会补充)。因为学会这4个,就可以满足基本的开发需要了。

filters 过滤器

第一个要讲的是过滤器filters选项。为什么要有这个东西呢?举个例子,假设我们有一组数字,都是小数,如下:

let vm = new Vue({
  //挂载元素
  el:'#app',
  //实例vm的数据
  data:{
    num1:33.141,
    num2:46.212,
    num3:78.541
  }
});

num1,num2,num3都是Vue实例vm的小数,我们把它展示在视图上:

<div id="app">
  数字1:{{ num1 }}<br>
  数字2:{{ num2 }}<br>
  数字3:{{ num3 }}
</div>

利用上节讲到的双大括号{{ }}渲染出来,很简单。

(没难度)

突然,需求改了,我们不能把小数展示出来,需要把小数转换成整数再显示。

这个时候,我们需要把三个小数经过过滤处理后再展示,不能直接展示。这种情况就需要用到Vue的filters过滤器了。我们来看看怎么用:

let vm = new Vue({
  //挂载元素
  el:'#app',
  //实例vm的数据
  data:{
    num1:33.141,
    num2:46.212,
    num3:78.541
  },
  //过滤器
  filters:{
    toInt(value){
      return parseInt(value);
    }
  }
});

相信大家都注意到了,参数对象除了eldata属性之外,还多了一个filters属性,它的值也是一个对象,里面定义了一个叫toInt( )的方法,传入了一个value的参数,函数的作用就是把传入的参数value,简单地转成一个整出并return回去。

如果toInt( )函数的写法你看起来觉得陌生的话,这样写你会不会觉得熟悉很多:

//过滤器
filters:{
  toInt:function(value){
    return parseInt(value);
  }
}

这是ES5的语法,我们后面的教程都会用ES6的最新写法,如果你还不了解,建议先学习我们之前推出的《ES6系列原创教程》的知识:传送门

我们回到过滤器filters,接着讲:定义完filters属性后,我们怎么用呢?

<div id="app">
  数字1:{{ num1 | toInt}}<br>
  数字2:{{ num2 | toInt}}<br>
  数字3:{{ num3 | toInt}}
</div>

也很简单,如上面代码所示,通过管道符 | 把函数toInt 放在变量后面即可,num1,num2,num3会分别作为参数value传入toInt( value )方法进行运算,并返回一个整数。

我们运行后得到结果:

(成功过滤成整数)

computed 计算属性

有时候,我们拿到一些数据,需要经过处理计算后得到的结果,才是我们要展示的内容。

比如:我们有三个数,但是需要展示的是三个数字之和。这种情况,就适合用我们的计算属性computed。

let vm = new Vue({
  //挂载元素
  el:'#app',
  //实例vm的数据
  data:{
    num1:1,
    num2:3,
    num3:6
  },
  //计算属性
  computed:{
    sum(){
      return this.num1+this.num2+this.num3
    }
  }
});

计算属性computed的定义语法和过滤器filters类似,但是用法不一,如下:

<div id="app">
  总和:{{ sum }}
</div>

计算属性computed用法更简洁,仅需{{ sum }}就能读取到它的计算结果:1+3+6结果应该为10。

(显示三者之和)

需要注意的是,sum的值是依赖data中的数据num1,num2,num3的,一旦它们发生了变化,sum的值也会自动更新。

我们试一下,通过chrome控制台把num1的值从1变成2,再看看sum的结果会是多少?

(如我们所愿,总和从 10 变成了 11)

methods 方法

顾名思义,在methods中,我们可以定义一些方法,供组件使用。

比如,我们定义一个数据a,当用户点击按钮的时候,a的值加1。这种情况,我们可以利用methods来实现。

let vm = new Vue({
  //挂载元素
  el:'#app',
  //实例vm的数据
  data:{
    a:0
  },
  //方法
  methods:{
    plus(){
      return this.a++;
    }
  }
});

定义一个plus( )的方法在methods中,下面我们把plus( ) 绑定在按钮的点击事件上:

<div id="app">
  {{ a }}
  <button v-on:click="plus">加1</button>
</div>

在Vue中通过v-on:指令来绑定事件(指令后面章节会介绍),我们点击按钮,methods中的方法plus( )就会被调用,实现给a的值加1,并更新视图。

(点击多次,a的值实时更新)

watch 观察

watch选项是Vue提供的用于检测指定的数据发生改变的api。

上面点击按钮a的值加1的例子,不就是数据发生变化了吗?我们就用watch选项来监听数字a是否发生了变化,如果了监听到了变化,我们就在控制台输入以下a的最新值。

在上个例子的代码基础上,我们加上watch部分的代码:

let vm = new Vue({
  //挂载元素
  el:'#app',
  //实例vm的数据
  data:{
    a:0
  },
  //方法
  methods:{
    plus(){
      return this.a++;
    }
  },
  //观察
  watch:{
    a(){
      console.log(`有变化了,最新值:`);
      console.log(this.a);
    }
  }
});

最后一部分watch就是我们新加的代码,a( ) 表示我们要观察监听的就是数据a,我们看运行结果:

( gif图加载需要点时间 )

看到了,我们点击按钮的时候,a的值加1发生了变化,而此时watch监听到了它的变化,便在控制台输出了我们指定的内容。

本节小结

定义一个vue实例常用的4个选项:过滤器filters、计算属性computed、方法methods、观察watch

本系列教程来自 web前端教程 微信公众号。

转载请注明:Rockyxia Web技术博客 » Vue第四节:定义一个vue实例的4个常用选项
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)