一个Java后端的Vue自学笔记

ゝ一世哀愁。 2022-05-23 04:39 157阅读 0赞

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue入门</title>
        <script src="./vue.js"></script>
    </head>
    <body>
    
        <div id="root">{
       {msg}}</div>
    		
        <script>
            var my_vue = new Vue({
                el:"#root",
                data:{
                   msg:"hello world"
                }
            })
        </script>
    </body>
    </html>

在这个index.html文件中，使用引入<script>将刚才下载的vue.js嵌套进来。创建一个id="root"的div，称之为**挂载点**，然后在js代码中创建名为my\_vue的vue**实例**( var  my\_vue = new Vue(\{...\})  )，其中el表示接管的DOM对象，此时我们创建的my\_vue就和这个div进行了绑定。我们还在my\_vue中定义了data，其中msg的值为"hello world"，而在div中接收时，需要使用\{ \{msg\}\}（**插值表达式**）的形式进行接收。浏览器中的效果如图：

![70][]

我们还可以在my\_vue中定义模板**template**，在其中可以指定具体的html内容，此时挂载点中内容就是模板中的内容。

在data中还可以定义其他的数据，在挂载点中用**v-text**或**v-html**的形式进行显示：

二者的区别在于**v-text会进行转译，而v-html不会**

vue中可以使用@符号对元素**绑定事件**，例如@click，然后在vue实例中添加methods，在其中定义具体的方法：

<h1 @click="handleClick">{
       {msg}}</h1>
    ...
    var v1 = new Vue({
        el:"#root",
        data:{
            msg:"hello world"
        },
        methods:{
            handleClick:function(){
                this.msg = "你好，世界"
            }
        }
    })

此时，点击"hello world"之后，其内容就会变成"你好，世界"。这里，我们发现一个现象，**当msg的值改变之后，我们不需要直接操作dom，vue实例会监听到数据的改变，自动对dom进行更新，页面也自动发生了改变**。

我们可以使用 **：** 进行**属性的绑定**，将vue实例中的数据绑定到挂载点的属性值中。使用**v-model**指令进行**双向绑定**，即页面中的值发生改变时，会改变vue实例中的值：

...
    <input v-model="content"/>
    <div>{
       {content}}</div>
    ...
    var v1 = new Vue({
         el:"#root",
         data:{
              content:"this is content"
         }
    })

可以使用**computed**指令表示**计算属性**，使用**watch**指令表示**侦听器**：

<div id="root">
        <div>
            <input v-model="firstName"/>
            <input v-model="lastName"/>
            <div>{
       {fullName}}</div>
            <div>{
       {count}}</div>
        </div>
    </div>
    <script>
         var v1 = new Vue({
            el:"#root",
            data:{
                firstName:"",
                lastName:"",
                count:0
            },
            computed:{
                fullName:function(){
                    return this.firstName +" "+ this.lastName
                }
            },
            watch:{
                fullName:function(){
                    return this.count++
                }
            }
        })
    </script>

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

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

<div id="root">
        <div v-if="show">hello world</div>
        <div v-show="show">你好，世界</div>
        <button @click="handleClick">toggle</button>
    </div>
    <script>
        var v1 = new Vue({
            el:"#root",
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>

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

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

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
    		<meta charset="UTF-8">
    		<title>Vue入门-TodoList的删除功能-----</title>
    		<script src="./vue.js"></script>
    </head>
    <body>
    
    <div id="root">
                <div>
                	<input v-model="inputValue"/>
                    <button @click="handleSubmit">提交</button>
                </div>
                <ul>
                	
                   <todo-item v-for="(item,index) of list"
                   	:key="index"
                    :content="item"
                    :index="index"
                    @delete="handleDelete"  
                   ></todo-item>
                </ul>
            	
            </div>
    		
    		<script>
    			
    			Vue.component('todo-item',{
    				props:['content','index'],
    				template:'<li @click="handleClick">{
       {content}}</li>',
    				methods:{
    					handleClick:function(){
    						this.$emit('delete',this.index);	//发布   标志为delete
    					}	
    				}
    			})
    			
    			var v1 = new Vue({
    				el:"#root",
    				data:{
    					inputValue:"",
    					list:[]
    				},
    				methods:{
    					handleSubmit:function(){
    						if(this.inputValue.trim() == ""){
    							alert("请输入内容");
    							this.inputValue = "";
    							return ;
    						}
    						this.list.push(this.inputValue);
    						this.inputValue="";
    					},
    					handleDelete:function(index){
    						this.list.splice(index,1);
    					}
    				}
    			})
    			
    		</script>
    
    </body>
    </html>

在这段代码中，我们实现了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中对应的元素删除即可。

[Vue]: https://cn.vuejs.org/v2/guide/installation.html
[70]: /images/20220523/22715d17078f47aa9effd63852baa6e4.png