前端基础（Vue的模块化开发）

目录

前言

响应式基础 ref reactive

学习成果展示

Vue项目搭建

总结 

---

前言

前面学习了前端HMTL、CSS样式、JavaScript以及Vue框架的简单适用，接下来运用前面的基础继续学习Vue，运用前端模块化编程的思想。

响应式基础 ref reactive

关于ref和reactive，官方解释如下，另外一篇博客写得也很清楚

响应式基础 | Vue.js (vuejs.org)

谈谈Vue3中的ref和reactive_vue reactive_七公子77的博客-CSDN博客

学习成果展示

不用vue框架写一个table

    
    
    
    



    

        
测试用例
        
            新增用例
        
        

            
            
            
            
            
            

                
用例名
                
步骤名
                
关键字
                
参数1
                
参数2
                
操作
            
            

                
参数正确登录成功
                
输入正确的参数登录成功
                
用户名 密码
                
用户名
                
密码
                
删除
            
            

                
参数错误登录失败
                
输入错误的参数登录失败
                
用户名 密码
                
用户名
                
密码
                
删除
            
            

                
参数为空登录失败
                
输入的参数为空登录失败
                
用户名 密码
                
用户名
                
密码
                
删除
            
            
        
    

上面的实现方式用到了很多个th、td标签，维护很麻烦，那有没有更好的解决方法？

如何用vue框架实现？

用v-for，遍历数组中的元素，进行列表的渲染。

关键两行代码：

取列表的表头，表头名称前加上编号，编号从1开始

{{index+1}}{{Name}}

取列表里具体的内容

如果要修改表头、列表里内容，不需要在标签里一个一个改，只需要去维护tableName、testCases里的值即可。是不是很省劲！

    
    
    
    



    

        

            
测试用例
            

                
                
                
                
                
                

                    

                        
{{index+1}}{{Name}}
                    
                
                

                    

                        
{{testCase.caseName}}
                        
{{testCase.stepName}}
                        
{{testCase.keywords}}
                        
{{testCase.param1}}
                        
{{testCase.param2}}
                        
{{testCase.opration}}
                    
                
            
        
    
    

可以看到td标签里的内容自动取出来了。 

踩坑记录：

createApp(MRJJ).mount('#test');

id为test这个div标签里的内容，才能引用MRJJ里面的方法。

结合前面的内容，最终写出来的页面！

    
    
    
    


    欢迎来到MRJJ_9的自动化测试平台


    

        
前端学习网站
        w3school.com
        

        MDN 社区
        

        CSDN社区
        

        
本人博客
        前端学习博客
    
    

        

                
添加测试用例
                
                
                    用例名：
                    
                
                步骤名：
                    
                
                
请选择用例类型：
                    
                        接口自动化
                    
                    
                        UI自动化
                        

                    
                
                
                    关键字：
                
                
                    打开浏览器
                    传入必传参数
                
                

                参数一：
                参数二：
            

                提交新增
            
        
        

            
测试用例
            

                
                
                
                
                
                

                    

                        
{{index+1}}{{Name}}
                    
                
                

                    

                        
{{testCase.caseName}}
                        
{{testCase.stepName}}
                        
{{testCase.keywords}}
                        
{{testCase.param1}}
                        
{{testCase.param2}}
                        

                            删除
                        
                    
                
            
        
    
    
    
    

Vue项目搭建

npm init vue

 

创建的项目结构， 在本地将项目启动起来，进入工程目录，打开终端，输入命令：npm run dev 

 本地启动完成的项目

vue插件安装必备，推荐看下面的这篇博客

开发vue3必备的几个vscode插件，你用上了吗？-腾讯云开发者社区-腾讯云 (tencent.com)

vs code切换主题，File->preferences-Theme

总结