第二章 Vue.js 基础语法

最新推荐文章于 2023-11-21 09:55:16 发布

小北呱

最新推荐文章于 2023-11-21 09:55:16 发布

阅读量344

点赞数

分类专栏： vue 文章标签： vue html javascript

本文链接：https://blog.csdn.net/weixin_43260996/article/details/117488008

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第二章 Vue.js 基础语法

2-1 第一个 Vue.js 案例_HelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    
    <!-- 在外层标签div中引入 id属性值 将来vuejs会通过该id，找到需要操作的元素 -->
    <!-- 以下Vue实例vm所控制的这个元素区div，就是我们的V -->
    <div id="app">

        <!-- 在前端页面元素的部分，其中的内容我们暂时以插值表达式的形式来呈现 -->
        <!-- 在两对p标签中分别引入了插值表达式，相当于将p标签对中的内容写活了，内容以变量的形式存在 -->
        <p>{{str1}}</p>
        <p>{{str2}}</p>

    </div>
    
    <script>
    
        //当Vuejs框架包导入进来之后，在浏览器缓存中，就已经存在了一个Vue框架的构造函数
        //我们new出来的这个vm对象，就是页面中对于模型和视图（数据和页面元素）的整体调度者
        //以下创建出来的vm对象，就是我们MVVM中的VM调度者
        var vm = new Vue({

            el : "#app",    //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
            data : {    //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
                //data属性中，存放的是el中要使用到的数据
                //这里的data就是MVVM中M，专门用来表现数据的组件
                "str1" : "HelloWorld1", 
                "str2" : "HelloWorld2"

            }

        });

    </script>

</body>
</html>

在这里插入图片描述

.
2-2 通过基础案例解析 MVVM

引入vuejs框架：

 <script src="./lib/vue-2.4.0.js"></script>

.
在外层标签div中引入 id属性值将来vuejs会通过该id，找到需要操作的元素
以下Vue实例vm所控制的这个元素区div，就是我们的V

<div id="app">

        <!-- 在前端页面元素的部分，其中的内容我们暂时以插值表达式的形式来呈现 -->
        <!-- 在两对p标签中分别引入了插值表达式，相当于将p标签对中的内容写活了，内容以变量的形式存在 -->
        <p>{{str1}}</p>
        <p>{{str2}}</p>

    </div>

.
当Vuejs框架包导入进来之后，在浏览器缓存中，就已经存在了一个Vue框架的构造函数
我们new出来的这个vm对象，就是页面中对于模型和视图（数据和页面元素）的整体调度者
以下创建出来的vm对象，就是我们MVVM中的VM调度者

 <script>
    
        var vm = new Vue({

            el : "#app",    //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
            data : {    //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
                //data属性中，存放的是el中要使用到的数据
                //这里的data就是MVVM中M，专门用来表现数据的组件
                "str1" : "HelloWorld1", 
                "str2" : "HelloWorld2"

            }

        });
    </script>

2-3 指令属性的基本使用

2-3-1 加粗样式（1）v-cloak

使用v-cloak 主要为了解决插值表达式的闪烁问题使用插值表达式的问题：

在页面加载的过程中，在页面中的{{}}插值表达式首先会被页面认可为是html 元素中的实在存在的内容。所以浏览器会首先将{{}} 展现在页面上，页面加载完毕后，插值表达式{{}}才会真正的转变为动态赋予的值。这就会造成一种现象，如果将来终端在访问服务器的过程中，网速较慢（网络比较卡），那么我们的{{}}会首先展现出来，
{{}}展现出来之后，会一闪而过，最终显示的是最终被赋予的值。这就是前端开发中所谓的，插值表达式的闪烁问题。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
    
        [v-cloak]{

            display: none;  

        }

    </style>
</head>
<body>
    
    <div id="app">

        <p v-cloak>{{str1}}</p>
        <p v-cloak>{{str2}}</p>

    </div>
    
    <script>
    
        var vm = new Vue({

            el : "#app",    //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
            data : {    //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
                //data属性中，存放的是el中要使用到的数据
                //这里的data就是MVVM中M，专门用来表现数据的组件
                "str1" : "HelloWorld1", 
                "str2" : "HelloWorld2"

            }

        });

    </script>

</body>
</html>

在这里插入图片描述

(2） v-text与v-html

在vuejs中，为了为页面中的元素渲染值（为前端标签对中的内容赋值)可以使用3种形式：
插值表达式{{str}}
v-text
v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
</head>
<body>
    
    <div id="app">
        
        <!-- 
            
            在vuejs中，为了为页面中的元素渲染值（为前端标签对中的内容赋值） 
            可以使用3种形式：
                插值表达式{{str}}
                v-text
                v-html
        
        
        -->

        <!-- 使用插值表达式为标签对中的内容赋值 -->
        <p>==============={{str1}}===============</p>
        <p v-text="str2">=====================</p>
        <p v-html="str3">=====================</p>

    </div>
    
    <script>

    
        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa", 
                "str2" : "bbb",
                "str3" : "ccc"
            }

        });

    </script>

</body>
</html>

在这里插入图片描述

（3）插值表达式与v-text/v-html 的区别

1. 对于元素中已经存在的值，只有插值表达式能够将原有的值保留，在原有的已经存在的值的基础上添加动态数据。

2. 使用v-text 和v-html 之所以不能够保留元素标签对中原有的内容，是因为在使用以上两个指定属性之前，会提前将标签对中的内容先清空掉，在赋予动态的值。如果未来的实际项目开发，需求为在原有的内容的基础上，追加动态的值，我们要选择使用插值表达式。
3. 从另一个方面来看，插值表达式虽然会出现{{}}页面闪烁的现象（v-text 和 v-html 不会出现页面闪烁的情况），但是对于原有内容的保留，只有插值表达式能够完成，所以插值表达式具有不可替代的优势。

4. 对比v-text 和v-html
v-text:主要是用来赋予纯内容的，如果赋予到元素中的内容本身包含 html，那么 v-text 会将 html 原封不动的展现在页面上，这些内容是得不到浏览器的解析的。
v-html:除了能够为前端元素赋予内容之外，更重要的是，如果内容本身含有html 代码，那么赋值后最终展现出来的结果，html 元素会得到浏览器的解析的。

5. 从以上结果判断，v-html 的功能要更加强大，对于前端页面的展现，不可能让使用该系统的用户看到任何 html 代码，而是应该让用户看到解析后的html 效果。所以在实际项目开发中，使用 v-html 的概率要高于v-text。
另外使用插值表达式的效果，与v-text 是一样的，内容中的html
代码时得不到浏览器的解析的。

.
.

（4）v-bind
v-vind:是Vuejs 中，提供用于绑定属性的指令对于v-bind 在开发中一共有如下几种使用方式
a. 直接使用指令属性v-bind 来为元素中的属性进行绑定操作
b. 使用简化后的方式，将 v-bind 去除，直接使用:来对元素中的额属性进行绑定。
因为在实际项目开发中，对于前端元素的绑定是我们的常规操作， v-bind 的使用复用率非常高，所以每一次都直接写v-bind 会很麻烦，所以vuejs 为v-bind 指令属性提供了简写的方式，直接使用:即可。
v-bind:title --> :title
注意：这种简写形式仅仅只是针对于我们的 v-bind，以上所讲解的其他的指令是不具备简写形式的。
在实际项目开发中，我们都是使用这种简写的形式。
c. 在使用v-bind 对元素中的属性进行绑定的时候，可以直接在操作值的位置进行内容的拼接。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
</head>
<body>
    
    <div id="app">
        
        <!-- 以下input标签对value属性中的值，使用vm对象，由vm对象将data中的信息动态的赋予到该value属性值当中 -->
        <!-- 
            
            必须使用指令属性v-bind来完成 
            我们需要将v-bind:加在我们需要绑定的属性的前面
        
        -->
        <input type="text" v-bind:value="str1"/>
        <p :title="str2">content...</p>
        <input type="button" value="submit" :title="str3+'Hello World'"/>

    </div>
    
    <script>
    
        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa", 
                "str2" : "bbb",
                "str3" : "ccc"
            }

        });

    </script>

</body>
</html>

在这里插入图片描述

2-4 使用 v-on 指令触发事件

(1)v-on 的基本使用
v-on:click="fun1"的形式来绑定事件相当于原生js 中的onclick
v:bind–>:

v-on–>@

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
</head>
<body>
    
    <div id="app">
        
        
        <input type="text" :value="str1"/>
        
        <input type="button" value="点击1" v-on:click="fun1"/>

        <input type="button" value="点击2" onclick="fun12()"/>

        <input type="button" value="点击3" @click="fun2"/>
    </div>
    
    <script>
    
        function fun12(){

            alert("abc1");

        }

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                fun1(){

                    alert("abc2");

                },
                fun2(){

                    alert("aaaaaa");

                }

            }

        });

    </script>

</body>
</html>

在这里插入图片描述
.
.

(2)事件修饰符的使用
.
a.stop:使用.stop 来对事件的冒泡机制进行阻止

js 中的事件的冒泡指的是: 在触发了内层元素的同时，也会随之继续触发外层元素（外层元素包裹了内层元素），在做点击的过程中，点击了内层元素，也可以认为是同时点击了外层元素。所以两个事件都会触发。

在实际项目开发中，几乎没有太多需求会使用到这种事件冒泡的机制，所以我们需要阻止事件的冒泡。阻止事件冒泡之后的效果是，在我们点击了内层元素之后，内层元素绑定的事件触发，触发完毕后，由于事件冒泡被阻止，就不会继续触发外层元素的事件了。

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
</head>
<body>
    
    <div id="app">
        
        <div style="width:200px;height:200px;background-color:red" @click="fun1">

            <div style="width:100px;height:100px;background-color:blue" @click.stop="fun2">

                


            </div>


        </div>
        

    </div>
    
    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                fun1(){

                    alert("触发外层div");

                },
                fun2(){

                    alert("触发内层div");

                }
                

            }

        });

    </script>

</body>
</html>

在这里插入图片描述

.
.

b.prevent: 使用.prevent 来阻止超链接默认的行为

所谓默认的行为指的是超链接中的href 属性链接

在实际项目开发中，不仅仅只是按钮需要我们绑定事件来控制行为，超链接的使用我们也是要遵循这种自己绑定事件触发行为的方式。所以在a 标签中的href 链接往往要被我们以特殊的方式处理掉。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
</head>
<body>
    
    <div id="app">
        
        
        <a href="http://www.baidu.com" @click="fun1">点击1</a>

        <a href="http://www.baidu.com" @click.prevent="fun1">点击2</a>

    </div>
    
    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                fun1(){

                    alert("触发外层div");

                },
                fun2(){

                    alert("触发内层div");

                }
                

            }

        });

    </script>

</body>
</html>

在这里插入图片描述
注意： 点击一：正常跳转， 点击二：无效
.
.

.
.

c.capture: 使用.capture 实现捕获触发事件的机制

使用的是外层div 套用内存div 的例子（其中内层 div 没有选择阻止冒泡），在此基础之上，点击内层的 div，先触发内层 div 的事件，再触发外层div 的事件。

加入了.capture 修饰符之后，先触发的是外层的 div 事件，后触发的是内层div 事件。被.capture 修改之后，事件优先触发。

.
.
d.once：使用.once 修饰符，只触发一次事件处理函数

.once 需要结合.prevent 来使用
在我们使用事件修饰符的时候，有可能会存在这样的需求，需要同时为@click 事件使用多个修饰符。例如我们现在就需要同时使用.once 和.prevent 修饰符。在使用的时候，通过绑定事件的@click 连续的绑定修饰符就可以了。
语法： @click.prevent.once

测试：通过超链接的触发来观察

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
</head>
<body>
    
    <div id="app">
        
        <a href="http://www.baidu.com" @click="fun1">点击1</a>

        <a href="http://www.baidu.com" @click.prevent.once="fun1">点击2</a>
        

    </div>
    
    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                fun1(){

                    alert("触发外层div");

                },
                fun2(){

                    alert("触发内层div");

                },
                fun3(){

                    alert("点击按钮");

                }
                

            }

        });

    </script>

</body>
</html>

在这里插入图片描述

在只使用@click 的时候（没有做任何修饰符的修饰），点击超链接，先触发@click，后触发href 链接。

当为@click 添加上@click.prevent.once 之后，点击超链接。第一次点击：只触发了@click 的事件，href 链接没有触发
第二次点击（已经点击过一次之后再次点击）：没有触发@click，只触发了href。

.
2-4 使用 v-model 指令实现双向数据绑定

v-bind
单向数据绑定
在这里插入图片描述
我们可以对 v-bind 的绑定数据的形式得出一个结论 : v-bind 只能实现数据的单向绑定，从模型（M）绑定到视图（V），使用 VM 将数据去渲染视图，但是我们无法通过该形式实现数据的双向绑定。

.
双向数据绑定
在实际项目开发中，不仅仅只是将模型准确的渲染到视图中，视图中的数据的变化，更需要模型去进行有效的记录。所以我们需要使用双向数据绑定的机制。

.
(1)v-model 的基本使用
使用v-model 可以对数据进行双向的绑定操作。
值得注意的是，由于记载页面元素值的需求都是发生在表单元素中，所以v-model 只能运用在表单元素中。
form

<input>系列 type:text,hidden,checkbox,radio....

<select>

<textarea>

代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
</head>
<body>
    
    <div id="app">
        
        <h3>{{str1}}</h3>
        
        <input type="text" v-model:value="str1"/>

    </div>
    
    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            }
            
        });

    </script>

</body>
</html>

初始值：hello world
在这里插入图片描述

通过修改文本框内的值，上面的文字内容也会跟着相应发生改变：
在这里插入图片描述

.
.
.
（2）使用 v-model 实现简单的计算器功能

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
</head>
<body>
    
    <div id="app">
        
        <input type="text" v-model="num1"/>
        
        <select v-model="csign">

            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>

        </select>

        <input type="text" v-model="num2"/>

        <input type="button" value="=" @click="count"/>

        <input type="text" v-model="result"/>

    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                num1 : 0,
                num2 : 0,
                csign : "+",
                result : 0

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                count(){

                    if(this.csign=="+"){


                        //直接取得的数值暂时是不能够直接计算的，默认的情况会按照字符串拼接的形式来触发+符号
                        //默认拼接字符串： 1+1=11
                        //在做数学计算之前，需要将数值格式化，才能够计算，使用parseInt方法做数值格式化的操作
                        this.result = parseInt(this.num1)+parseInt(this.num2); 

                    }else if(this.csign=="-"){

                        this.result = parseInt(this.num1)-parseInt(this.num2); 
                        
                    }else if(this.csign=="*"){

                        this.result = parseInt(this.num1)*parseInt(this.num2); 
                        
                    }else if(this.csign=="/"){

                        this.result = parseInt(this.num1)/parseInt(this.num2); 
                                            
                    }

                }
                

            }

        });

    </script>

</body>
</html>

在这里插入图片描述

2-4 v-for 指令和 v-if 指令的应用

(1)v-for 指令的基本使用案例

1：遍历字符串数组

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
    
</head>
<body>
    
    <div id="app">
        
       
        <!-- 在以上需求的基础上 遍历出所有的元素以及对应的下标 -->
        <p v-for="(city,i) in cityList">

            {{i}}--------------{{city}}

        </p>

    </div>
    


    <script>
    
      
        var vm = new Vue({

            el : "#app",    
            data : {
                
                cityList : ["北京","上海","广州","深圳","沈阳"]

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

               

            }

        });

    </script>

</body>
</html>

在这里插入图片描述

2：遍历对象数组

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
    
</head>
<body>
    
    <div id="app">
        
        <!-- 每一次遍历出来的元素，代表一个城市信息对象 -->
        <p v-for="(city,i) in cityList" :key="city.id">

            <!-- 对象以  .属性名 的形式来取得属性值 -->
            {{i}}------------------{{city.id}}-----------{{city.name}}

        </p>


    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                
                cityList : [

                    {id:"A0001",name:"北京"},
                    {id:"A0002",name:"上海"},
                    {id:"A0003",name:"广州"},
                    {id:"A0004",name:"深圳"},
                    {id:"A0005",name:"沈阳"},

                ]

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                
                

            }

        });

    </script>

</body>
</html>

在这里插入图片描述

3：遍历对象的属性和属性值

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
    
</head>
<body>
    
    <div id="app">
        
        <!--

            遍历对象的属性和属性值：
            必须以取出键值对的形式来遍历
            (value值(属性值),key键(属性名)) in 对象
            (value值(属性值),key键(属性名),i下标) in 对象

        -->
        <p v-for="(value,key,i) in city1">

            {{i}}-------------{{key}}------------{{value}}

        </p>        


    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                
                city1 : {id:"A0001",name:"北京"}

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                
                

            }

        });

    </script>

</body>
</html>

在这里插入图片描述

4：遍历整型数字

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
    
</head>
<body>
    
    <div id="app">
        
        <!--

            以 元素 in 整型数值

        -->
        <p v-for="count in 20">

            {{count}}

        </p>


    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                
               

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                
                

            }

        });

    </script>

</body>
</html>

在这里插入图片描述

.
.
(2)v-for 指令使用注意事项对于key 属性的使用案例

key 属性的作用：
在实际项目开发中，使用 v-for 仅仅只是将元素遍历出来，并展现在页面中。如果在将来的其他需求中，使用到指定的遍历出来的某个元素，那么视图并没有为我们提供一个有效的辨识指定元素的方式。所以在遍历元素的过程中，需要为每一条遍历出来的元素做一个
有效的标识，这个标识就是该元素在页面中的唯一标识，在将来使用到该元素的时候，页面可以通过该标识认准该元素。在v-for 的使用过程中，添加key 属性及属性值就是做这个标识的最好的手段。

所以我们需要养成一个在遍历元素的过程中，为key 属性赋值的好习惯。

对于key 属性的应用，值得注意的是：
注意 1：key 属性值必须是一个数值或者字符串，对象不能当做属性值。否则系统会提出警告，将来不能有效的应用。

注意 2：key 属性的应用，必须要搭配绑定 v-bind 指令，在使用的时候必须是以该形式":key"来使用，否则系统不会生效。

注意 3：对key 属性所赋的值，必须是记录的唯一标识，我们通常使用的是记录的id。

.
.
.
(3)v-if 指令和v-show 指令的使用和区别案例 1：v-if 的使用

简单的比较v-if 指令和v-show 指令，效果是一模一样的点击浏览器（F12）中的查看器观察显示页面元素信息如果flag 为true，观察到的结果是一致的
如果flag 为false，观察到的结果是不同的

其中v-if 中的元素是本身就没有的，v-show 中的元素是存在的，只是通过false 属性值，系统为该元素新增了display:none，表示不展现该元素

通过观察得到结论：

v-if 为true ;创建条件元素为false：去除该元素
v-show 为true :展现条件元素为false：隐藏该元素
在实际项目开发中，一般的需求情况下，我们使用v-if 就可以了。但是如果对于元素的展现与否需要频繁的切换，我们需要使用 v-show 的形式展现或者隐藏元素，因为 v-if 在每次切换为true 的时候都需要重新的创建元素，降低页面展现元素的效率。

.
综合应用：

完成一个基本信息系统（学生信息管理系统）的查询列表操作，可对该列表进行添加操作，可进行删除操作

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
    
        .hFontColor{

            color: brown

        }

        .hAlign{

            text-align: center

        }

        td{

            text-align: center

        }

    
    </style>
    
</head>
<body>
    
    <div id="app">
        
        <!--

            模拟表结构：
                student
                id：编号
                name：姓名
                gender：性别
                age：年龄

        -->
        <!-- 
            
            基础建设：
                搭建用来填写信息的文本框
                搭建表格结构
                搭建添加信息按钮，删除信息的按钮 
                搭建一些基础的样式

        -->
        <!--

            vuejs建设：
             data：
                    模型
                    对象集合，编号，姓名，性别，年龄
             methods：
                    添加方法，删除方法
                    扩展：查询信息列表方法

        -->

        
        <h3 :class="hstyle">学生信息管理系统</h3>
        
        <hr width="100%">

        <br/>

        <!-- 搭建添加操作相关信息 -->
        编号：<input type="text" v-model="id"/>&nbsp;&nbsp;<!-- A0001 -->
        姓名：<input type="text" v-model="name"/>&nbsp;&nbsp;
        性别：<input type="text" v-model="gender"/>&nbsp;&nbsp;
        年龄：<input type="text" v-model="age"/>&nbsp;&nbsp;

        <input type="button" value="保存学员" @click="save"/>

        <br/>
        <br/>

        <!-- 搭建表格元素 -->
        <table border="1" width="100%" align="center" cellpadding="6px" cellspacing="0px">

            <tr>

                <td>序号</td><!-- 1,2,3,4,5.... -->
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>操作</td><!-- 为删除超链接提供入口 -->

            </tr>

            <!-- 内容部分 读取模型sList中的数据 使用v-for的形式对sList做遍历-->
            <!--

                每一个s，就是每一个遍历出来的学生对象，将来在取得学生信息的时候，通过{{s.属性}}来取值
                i变量是遍历出来元素的下标，从0开始做标记，在序号中，应该是以下标+1的方式开始标记（序号从1开始计数）
            -->
            <tr v-for="(s,i) in sList">

                <td>{{i+1}}</td>
                <td>{{s.id}}</td>
                <td>{{s.name}}</td>
                <td>{{s.gender}}</td>
                <td>{{s.age}}</td>
                <td>

                    <!--

                        使用href="javascript:void(0)"将超链接的href行为禁用掉，该超链接只能以绑定事件的形式来触发行为
                        与之前学习的click的prevent的用处是一样的

                    -->
                    <!--

                        根据编号执行删除操作
                        
                        注意：
                            在方法中传递实参，不需要使用插值表达式
                            使用方式：del(s.id)
                            而不是：del({{s.id}})

                    -->
                    <a href="javascript:void(0)" @click="del(s.id)">删除学员</a>

                </td>

            </tr>

        </table>


    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {

               sList : [

                    {id:"A0001",name:"zs",gender:"男",age:"23"},
                    {id:"A0002",name:"ls",gender:"男",age:"24"},
                    {id:"A0003",name:"ww",gender:"男",age:"25"}

               ],

               id : "",
               name : "",
               gender : "",
               age : "",
               hstyle:{hFontColor:true,hAlign:true}

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                save(){

                    /*

                        通过在页面中对文本框进行信息的完善（对视图V进行数据的填充）
                        根据使用对于视图中值的绑定方式是v-model的方式，会实现双向数据绑定
                        通过对视图的数据的填充，同时也是对模型中数据的填充
                        在我们触发的save方法当中，取得模型中的值，就相当于是取得了在页面文本框填充的数据
                        将这些数据收集起来，形成一个对象，将该对象添加到我们的sList对象数据中就可以了

                    */

                    var s = {id:this.id,name:this.name,gender:this.gender,age:this.age};

                    this.sList.push(s);

                },

                del(id){

                    //id:需要删除记录的id，根据id来进行删除
                    
                    /*

                        遍历sList中所有的对象
                        从每一个对象中取得id信息，将每一个id与参数id进行比较
                        如果id值相等，证明我们找到了需要删除的记录
                        将该记录从sList中移除掉

                    */

                    for(var i=0;i<this.sList.length;i++){

                        //如果id值相等，证明我们找到了需要删除的记录
                        if(this.sList[i].id==id){

                            //将该记录从sList中移除掉
                            this.sList.splice(i,1);

                        }

                    }

                }

            }

        });

    </script>

</body>
</html>

在这里插入图片描述
添加操作:

删除操作：

小北呱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二章 Vue.js 基础语法

第二章 Vue.js 基础语法2-1 第一个 Vue.js 案例_HelloWorld<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>  <script src="./lib/vue-2.4.0.js"></sc
复制链接

扫一扫