一个Java后端的Vue自学笔记

JavaScript的强大不必多言。做为一名后端开发工程师，不会前端是不行的，这年头走哪都讲究个全栈么。Angular、React、Vue等js库的出现，彻底颠覆了后端开发对前端的认识。本人最近自学了一些Vue的皮毛，写下这篇博客不是为了哗众取宠，权当是为自己做一个Vue学习笔记。这篇博客主要记录了我学习Vue基础知识，完成一个TodoList小功能的开发过程。

首先进入Vue的官网下载Vue.js（Vue官网下载）开发版本，由于是学习基础知识，就不使用CDN了。保存vue.js之后，新建index.html文件：

  
  
  
      
      
      
  
  
  
    
{{msg}}
  
          
      
  
  

在这个index.html文件中，使用引入

上面这段代码中，fullName就是计算属性，它是通过firstName和lastName计算得来，而侦听器的作用是当fullName发生时，使count加1

我们可以使用v-if和v-show来控制元素的显示与否，二者的区别在于：当传入的显示值是false时，v-if会在页面上将控制的dom删除掉，而v-show会改变dom的css为display：none

  
    
hello world
  
    
你好，世界
  
    toggle  
  

使用v-for来循环展示list：

  
    
  
        
{{item}}
  
    
  
  
   

其中item表示循环中具体的每一项元素，index表示该元素的下标，这里我们需要为循环体指定一个key属性以提高渲染的效率，这里使用index作为key的值（实际上这不是一个好的选择）

现在，我们需要明白组件的概念。组件其实就是指页面上的某一部分。在Vue中，组件就是实例，实例就是组件。组件之间也是可以互相通信的。可以使用下面的代码定义一个全局组件：

最后，进行一个TodoList的功能的开发，附上代码：

  
  
  
          
          
          
  
  
  
  
            
  
                  
                提交  
            
  
            
  
                  
                 
            
  
              
        
  
          
          
  
  
  

在这段代码中，我们实现了TodoList非常简单的功能：在input框中输入内容，点击提交之后，就会以ul的形式展示出来，当点击ul中的li时，就会将其删除掉。

首先我们使用v-model指令将input框的值和vue实例v1中的inputValue进行了双向绑定，然后提供了提交按钮的click事件和方法。然后我们定义了名为'todo-item'的组件，在其中定义了其模板是一个li标签，并对其进行了v-for循环。在todo-item元素中，我们给了他一个属性content其值为item，也就是循环的list中的元素，而这个content元素是通过父组件传给他的，所以需要写成：content（我们可以认为id="root"的div为父组件，而todo-item为子组件），同样的，父组件通过index属性将循环中的index传给了子组件。而子组件想要接收content和index这两个属性，就需要在props中定义（props:['content','index']）而这就是父子组件之间的通信：父组件将值以属性的形式传给子组件。然后，子组件再其模板中将content元素以差值表达式的形式显示出来。这样我们就实现TodiList的添加功能。

而要实现TodoList的删除功能，我们首先需要明确，其实我们就是通过子组件的click时间，将自己的下标告诉父组件，然后在父组件中将list中的对应下标的一项删掉即可，而这就是父子组件之间的通信：子组件将值传给父组件。这里我们需要用到发布/订阅模式，在子组件的每一个li中，我们已经从父组件那里接收到了自己的index值，所以只需要定义一个handleClick方法，在这个方法中，我们使用发布模式（this.$emit('delete',this.index)），以delete为标记，将index值发布出去。而在父组件中，通过@delete的形式发起订阅，当监听到delete的发布之后，调用父组件自身的handleDelete方法，然后在该方法中将list中对应的元素删除即可。