首页 > 其他分享 >Vue学习入门

Vue学习入门

时间:2024-07-04 16:59:52浏览次数:21  
标签:axios 入门 url age 学习 Vue result data

介绍

        新手程序员一枚,渴望成为大神,来点关注来点赞,给我介绍几个大神也行,球球了。


        主要记录自己的学习过程,将之前的笔记进行整理并分享一下,有错误请指出,谢谢各位大佬爷们的观看。

        下面开始分享我的笔记


VSCode插件

  • Auto Close Tag        
  • Auto Rename Tag
  • Chinese (Simplified) (简体中文) Language
  • Code Runner
  • Code Spell Checker
  • HTML CSS Support
  • IntelliJ IDEA Keybindings
  • JavaScript (ES6) code snippets
  • Live Server
  • Mithril Emmet
  • open in browser
  • Path Intellisense
  • Vetur
  • Vue
  • Vue 3 Snippets
  • VueHelper

HTML模板

创建文件模板

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">       
        <title>%%</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        
    </body>
</html>

Vue指令

知识点

  1. {{}}:插值表达式  内容为:变量、三元运算符、函数调用、算术运算
  2. v-model:在表单元素上创建双向绑定。
  3. v-bind:为HTML标签绑定属性值、如href、css样式等。
  4. v-on:为HTML标签绑定事件。
  5. v-if、v-else-if、v-else:条件渲染某元素。
  6. v-show:条件展示某元素、切换display的值为none。
  7. v-for:列表渲染,遍历容器的元素对象的属性。

案例

1.One

  div样式
<div id="app">
    <!-- v-bind -->
    <a v-bind:href="url">链接</a>
    <a :href="url">另一个链接</a>
    <!-- v-model -->
    <input type="text" v-model="massage">
    <!-- {{}}操作符 -->
    {{massage}}
    <!-- v-on -->
    <input type="button" value="按钮" v-on:click="handle()">
    <input type="button" value="另一个按钮" @click="handle()">
</div>
js代码
 <script>
    //Vue对象
    new Vue({
        el:"#app",//Vue接管区域
        data:{
            massage:"hello world",
            url:"https://www.baidu.com"
        },
        methods: {
            handle:function(){
                alert("点击了一次");
            }
        }
    })        
</script>
效果

2.Two

div样式

<div id="appt">

    <!-- v-if等展示 -->
    
    年龄<input type="text" v-model="age">判定为:
    <span v-if="age >= 0 && age <= 35">年轻人(35以下)</span>
    <span v-else-if="age > 35 && age <= 60">中年人(35-60)</span>
    <span v-else-if="age > 60 && age <= 200">老年人(60以上)</span>
    <span v-else>年龄无效(200以上,0以下)</span>
    <br><br>
    
    <!-- v-show 展示 -->
    年龄<input type="text" v-model="age">判定为:
    <span v-show="age >=0 && age<=35">年轻人(35以下)</span>
    <span v-show="age > 35 && age <= 60">中年人(35-60)</span>
    <span v-show="age > 60 && age <= 200">老年人(60以上)</span>
    <span v-show="age > 200 || age < 0">年龄无效(200以上,0以下)</span>

</div>
js
<script>
    //另一个Vue对象
    new Vue({
        el:"#appt",
        data:{
            age:20
        },
        methods:{

        }

    })
</script>
效果

3.案例

  div样式
<div id="appr">
    <div v-for="(city, index) in addr">{{index+1}} : {{city}}</div>
</div>
js
<script>
    //Vue对象
    new Vue({
        el:"#appr",
        data:{
            addr:["北京","上海","杭州","南京","香港","深圳"]
        },
        methods:{
            
        }
    })
</script>
  效果

综合案例

  描述

  综合之前指令,填充表格

div样式

<div id="app">
            <div style="margin-bottom: 10px">成绩表</div>
            <table border="1" cellspacing="0" width="60%">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>成绩</th>
                    <th>等级</th>
                </tr>
                <tr align="center" v-for="(user, index) in users">
                    <td>{{index+1}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>
                        <span v-if="user.gender==1">男</span>
                        <span v-if="user.gender==2">女</span>
                    </td>
                    <td>{{user.score}}</td>
                    <td>
                        <span v-show="user.score >= 90">优秀</span>
                        <span v-show="user.score >= 60 && user.score < 90">及格</span>
                        <span style="color: red;" v-show="user.score < 60">不及格</span>
                    </td>
                </tr>
            </table>
        </div>

 js

<script>
            //Vue对象
            new Vue({
                el:"#app",
                data:{
                    users:[
                        {
                            name:"Tom",
                            age:20,
                            gender:1,
                            score:78
                        },{
                            name:"Rose",
                            age:21,
                            gender:2,
                            score:88
                        },{
                            name:"Jay",
                            age:23,
                            gender:1,
                            score:98
                        },{
                            name:"Bob",
                            age:22,
                            gender:1,
                            score:48
                        },{
                            name:"Tony",
                            age:36,
                            gender:1,
                            score:83
                        },{
                            name:"amy",
                            age:28,
                            gender:2,
                            score:97
                        }
                    ]

                },
                methods: {
                    
                }
            })
        </script>
效果

Vue生命周期

  每触发一个生命周期事件,自动执行一个生命周期方法。

流程图

知识点

  • 自动调用生命周期的方法mounted()等方法。

  • 主要用于向服务端发送数据。

案例

js
<script>
            //Vue 对象
            //自动调用生命周期的方法mounted()
            //主要用于向服务端发送数据。
            new Vue({
                el:"#app",
                data:{

                },
                methods: {
                    
                },
                mounted() {
                    console.log("Vue 挂载完成,发送请求到服务端")
                },
            })
        </script>
效果

Ajax

  • 数据交换:通过Ajax可以向服务器发送请求,并获取 服务器响应的数据

  • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页。例如搜索的联想功能,用户名是否可用。

Axios

简化Ajax
// Axios 别名
// axios.get(url,[,config])
// axios.delete(url,[,config])
// axios.post(url,[.data[,config]])
// axios.put(url,[,data[,config]])
代码
<body>
        <input type="button" value="get" onclick="get()">
        <input type="button" value="post" onclick="post()">

        <script>
            
            // Axios 别名
            // axios.get(url,[,config])
            // axios.delete(url,[,config])
            // axios.post(url,[.data[,config]])
            // axios.put(url,[,data[,config]])

            function get(){
                //通过axios发送请求
                //then 为成功回调函数
                axios({
                    method:"get",
                    url:"http://www.baidu.com"//这个地址无效

                }).then(result=> {
                    console.log(result.data);
                })
                //改写
                axios.get("http://www.baidu.com").then(result=>{
                    console.log(result.data);
                })

            }
            function post(){
                axios({
                    method:"post",
                    url:"http://www.baidu.com",//这个地址无效
                    data:"id=1"
                }).then(result=> {
                    console.log(result.data);
                })

                //改写
                axios.post("http://www.baidu.com","id=1").then(result=>{
                    console.log(result.data);
                })

            }

        </script>
    </body>

Vue对象获取Axios取得的数据

<script>
            //Vue获取Axios请求的数据
            new Vue({
                el:"#app",
                data:{
                    emps:[]    //定义数据类型       通过mounted函数获取数据并存储到emp中         
                },
                methods: {
                    
                },
                mounted() {
                    //此处经行Axios请求
                    axios.get("url").then(result=>{
                        this.emps = result.data;
                    })

                },
            })  
        </script>

以上是学习的第一弹笔记。 后面会慢慢更新笔记。

项目位置!!!!!

https://gitee.com/zsjnew/admin_web_project.git

标签:axios,入门,url,age,学习,Vue,result,data
From: https://blog.csdn.net/m0_61801450/article/details/140147243

相关文章

  • 二分图匹配——从入门到入土
    基础知识形式化定义:二分图:\(G=(L,R,E)\),满足\(\forall(u,v)\inE\)都有\(u\inL,v\inR\)或\(u\inR,v\inL\)。可知“图中没有长度为奇数的环”是这个图是二分图的充分必要条件。图的匹配是一个\(E_m\subseteqE\)满足\(\nexistsi\inV(\text{当}G......
  • 基于Java+Vue的采购管理系统:采购过程合规高效(整套代码)
         前言:采购管理系统是一个综合性的管理平台,旨在提高采购过程的效率、透明度,并优化供应商管理。以下是对各个模块的详细解释:一、供应商准入供应商注册:供应商通过在线平台进行注册,填写基本信息和资质文件。资质审核:系统对供应商提交的资质文件进行自动或人工审核,确......
  • 基于深度学习的动画渲染
    基于深度学习的动画渲染是一项利用深度学习技术来提高动画制作效率和质量的前沿研究领域。该技术旨在通过深度学习模型加速动画渲染过程,优化图像质量,并实现复杂效果的自动化生成。以下是关于这一领域的系统介绍:1.任务和目标动画渲染的主要任务是将3D模型、场景和动画转换为......
  • 基于深度学习的碰撞模拟
    基于深度学习的碰撞模拟是一项利用深度学习技术来模拟和预测物体碰撞行为的前沿研究领域。这项技术广泛应用于计算机图形学、虚拟现实、物理仿真、游戏开发和工程设计等领域,能够提高碰撞检测和响应的精度和效率。以下是关于这一领域的系统介绍:1.任务和目标碰撞模拟的主要任......
  • 【python学习笔记】Python装饰器
    装饰器参考:搞懂Python装饰器Python@wraps修饰器装饰器是什么有兴趣的可以参考PEP318的原文DecoratorsforFunctionsandMethods解释了语法用途以及设计出来装饰器的动机Thecurrentmethodfortransformingfunctionsandmethods(forinstance,declaringthem......
  • 都2024年了,还在问网络安全怎么入门,气得我当场脑血栓发作
    前言本人从事网路安全工作12年,曾在2个大厂工作过,安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过,对这个行业了解比较全面。下面就开始进入正题,如何从一个萌新一步一步进入网络安全行业。正题首先,在准备进入这个行业之前,我们要问一下我们的内心,工作千......
  • 都2024年了,还在问网络安全怎么入门,气得我当场脑血栓发作
    前言本人从事网路安全工作12年,曾在2个大厂工作过,安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过,对这个行业了解比较全面。下面就开始进入正题,如何从一个萌新一步一步进入网络安全行业。正题首先,在准备进入这个行业之前,我们要问一下我们的内心,工作千......
  • 都2024年了,还在问网络安全怎么入门,气得我当场脑血栓发作
    前言本人从事网路安全工作12年,曾在2个大厂工作过,安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过,对这个行业了解比较全面。下面就开始进入正题,如何从一个萌新一步一步进入网络安全行业。正题首先,在准备进入这个行业之前,我们要问一下我们的内心,工作千......
  • vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
    一、是什么权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发页面加载触发页面上的按钮点击触发总的来说,所有的请求发起都触发自前端路由或视图所以我们可以从这两方面入......
  • 黑客入门教程(非常详细)从零基础入门到精通,看完这一篇就够了
    想要成为黑客,却苦于没有方向,不知道从何学起,下面这篇黑客入门教程可以帮你实现自己的黑客梦想,如果想学,可以继续看下去,文章有点长,希望你可以耐心看到最后 1、Web安全相关概念(2周)·熟悉基本概念(SQL注入、上传、XSS、、CSRF、一句话木马等)。通过关键字(SOL注入、上传、XSSC......