视频教程

由于思否不支持视频外链 视频请移步

你能学到什么

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

methods选项

methods是我们VUE中的事件处理器，你可以把方法写在这里面，并且在构造器内部通过this.方法名调用，之前的学习中我们已经使用过这个方法，但是这里强调一下，千万不可以用箭头函数，毕竟这里我们的this是需要指向VUE实例的。在VUE构造器的外部我们也可以通过实例来调用方法。这里给大家举个例子。

    
        
        
                
    
        
     +{
   {num}}
     -           
         
    
        

computed选项

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

    
        
        
                
    
        
     
Original message: "{
   { message }}"
        
     
Computed reversed message: "{
   { reversedMessage }}"
    
    
        

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

    
        
        
                
    
        
     
{
   {firstName}}
        
     
{
   {lastName}}
        
     
{
   {fullName}}
    
    
        

vm.fullName = 'John Doe' 大家可以在外部直接修改fullName或者在控制台修改 都可以触发fullName的set事件来修改 firstName和lastName

watch选项

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

    
        
        
                
    
        
     
{
   {Name}}
        
     
{
   {ChangeName}}
    
    
        

filters选项

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

    
        
        
                
    
        
                 
     
                
                      {
   { message | capitalize }}