vue快速入门 笔记 +axios

最新推荐文章于 2024-07-04 22:34:40 发布
最新推荐文章于 2024-07-04 22:34:40 发布
阅读量193 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29058883/article/details/105741061
版权

1. 笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
    .active{
        border: 1px solid red;
    }
    .tq{
        width: 20%;
        background:#eee;
        margin-right: 5px;
    }
</style>
</head>
<body>
    <div id="app">
        <h2>天知道</h2>
        <input type="text" v-model="city" @keyup.enter="getweather">
        <input type="button" value="搜索" @click="getweather1">
        <div style="display: flex;justify-content: space-around;">
            <div class="tq" v-for="(item,k) in weatherdata">
                <span>{{item['date']}}</span>
                <span>{{item.wea}}</span>
                <span>{{item.win}}</span>
                <span>{{item.win_speed}}</span>
            </div>
        </div>
        <h2>axios</h2>
        <input type="button" class="get" value="getaxios">
        <input type="button" class="post" value="postaxios">
        <h2>记事本</h2>
        <input type="text" v-model="jishiben" @keyup.enter="addj">
        <ul>
            <li v-for="(jvalue,jkey) in jdata">
                {{jkey+1}}记事本{{jvalue}}
                <button @click="removejishiben(jkey)">删除</button>
            </li>
        </ul>
        <h3 v-if="jdata.length != 0">数据条数{{jdata.length}}</h3>
        <div v-show="jdata.length != 0" @click="clearj">清空</div>
        <h2>v-model</h2>
        <input type="button" value="修改message" @click="setm">
        <input type="text" v-model="message">
        {{message}}
        <h2>v-for</h2>
        <input type="button" value="添加数据" @click="adddata">
        <input type="button" value="移除数据" @click="removedata">
        <ul>
            <li v-for="(it,index) in arr">
                {{index}}for循环{{it}}
            </li>
        </ul>
        <h3 v-for="item in vetables" v-bind:title="item.name">
            {{item.name}}
        </h3>
        <h2>v-bind 操作class src  title</h2>
        <img v-bind:src="imagesrc" alt=""></br>
        <img :src="imagesrc" alt="" :title="imagetitle+'!!!'" :class="isactive?'active':''" @click="toggleActive"></br>
        <img :src="imagesrc" alt="" :title="imagetitle+'!!!'" :class="{active:isactive}" @click="toggleActive"></br>
        <h2>v-if操作dom  频繁切换用show</h2>
        <input type="button" value="切换if显示" @click="changif">
        <img src="./tbs.jpg" v-show="ifshow" alt="">
        <h2>v-show</h2>
        <input type="button" value="切换显示状态" @click="changeshow">
        <input type="button" value="累加" @click="addage">
        <img src="./tbs.jpg" v-show="isshow" alt="">
        <img src="./tbs.jpg" v-show="age>=18" alt="">
        <h2>计数器</h2>
        <div>
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>
        <h2>v-on</h2>
        <input type="button" value="v-on指令" v-on:click="doit">
        <input type="button" value="v-on简写" @click="doit">
        <input type="button" value="v-on双击" @dblclick="doit">
        <div @click="changefood">{{food}}</div>
        <input type="text" @keyup.enter="sayui">
        <h2>v-html</h2>
        <div v-html="content"></div>
        <div v-text="content"></div>
        <h2>v-text</h2>
        <div v-text="message + '!'"></div>
        <div v-text="info"></div>
        <div>{{info + '!'}}</div>
        <h2>4个小时带你快速入门vue之第6课之前</h2>
        {{ message }}    </br>
        {{ duixiang.name }}</br>
        {{ duixiang }}    </br>
        {{ shuzu }}    </br>
        {{ shuzu[2] }}    </br>
      </div>
      <script>
          var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello1 祥云小镇!',
                    info: '详细信息',
                    content: "<a href='http://baidu.com'>百度一下</a>",
                    duixiang: {
                        "name":"任达华",
                        "age":99,
                    },
                    shuzu:["范冰冰","李冰冰","赵冰冰"],
                    food :"油麦菜",
                    num :0,
                    isshow :true,
                    age :9,
                    ifshow :true,
                    imagesrc :'./tbs.jpg',
                    isactive :false,
                    imagetitle :'土拨鼠',
                    arr:["东城区","北城区","西城区","南城区"],
                    vetables:[
                        {"name":"番茄炒蛋"},
                        {"name":"番茄d炒蛋"},
                    ],
                    jdata:["记事本1","记事本2","记事本3"],
                    jishiben :"来啊，快活呀",
                    weatherdata:[],
                    city:"北京",

                },
                methods:{
                    doit:function(){
                        alert("做v-on")
                    },
                    changefood:function(){
                        this.food += "真好吃"
                    },
                    sub:function(){
                        if(this.num>0){
                            this.num--
                        }else{
                            alert("近距离圣诞节")
                        }
                    },
                    add : function(){
                        if (this.num>=10){
                            alert("憋着")
                        }else{
                            this.num++
                        }
                    },
                    changeshow : function(){
                        this.isshow = !this.isshow
                    },
                    addage : function(){
                        this.age++
                    },
                    changif : function(){
                        this.ifshow = !this.ifshow
                    },
                    toggleActive:function(){
                        this.isactive = !this.isactive
                    },
                    adddata : function(){
                        this.vetables.push({"name":"了解了解"})
                    },
                    removedata :function(){
                        this.vetables.shift()
                    },
                    sayui :function(){
                        alert("大V深V")
                    },
                    setm : function(){
                        this.message="哒哒哒哒哒"
                    },
                    addj:function(){
                        this.jdata.push(this.jishiben)
                    },
                    removejishiben:function(index){
                        this.jdata.splice(index,1)
                    },
                    clearj:function(){
                        this.jdata=[]
                    },
                    getweather:function(){
                        var that =this;
                        axios.get('https://www.tianqiapi.com/free/week?appid=25555884&appsecret=B8lHZDxq', {
                            params: {
                            city: that.city
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                        .then(function (r) {
                            // always executed
                            that.weatherdata = r.data.data
                            console.log(r.data.data);
                        }); 
                    },
                    getweather1:function(){
                        var that =this;
                        axios.get('https://www.tianqiapi.com/free/week?appid=25555884&appsecret=B8lHZDxq', {
                            params: {
                            city: that.city
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                        .then(function (r) {
                            // always executed
                            that.weatherdata = r.data.data
                            console.log(r.data.data);
                        }); 
                    },

                }
            })
      </script>
      <script>
        document.querySelector('.get').onclick=function(){
            axios.get('https://www.tianqiapi.com/free/week?appid=25555884&appsecret=B8lHZDxq', {
                    params: {
                    ID: 12345
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function (r) {
                    // always executed
                    console.log(r)
                });  
        }
        document.querySelector('.post').onclick=function(){
            axios.post('/user', {
                firstName: 'Fred',
                lastName: 'Flintstone'
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        }
      </script>
</body>
</html>

2.手把手教你用vue-cli搭建vue项目

这样vue项目部署在服务器只需要

npm run build

 域名配置到dist下就可以了

 

wjp@001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+ts完成axios封装
2401_84091663的博客
05-06 763
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue-axios学习笔记
qq_43817972的博客
11-11 215
what is axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios的功能特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF axios的使用代码(带注释)...
Vue 学习笔记（1） Vue 基础语法 + Axios 基本使用
最新发布
2401_84434086的博客
07-04 302
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等e">引入Vue【项目】记事本案例本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于。
【Vue学习笔记】Axios使用
biancheng_的博客
03-30 1705
Axios是一个基于Promise的HTTP请求库，可以用于浏览器和Node.js平台。它可以帮助我们发送异步HTTP请求，处理HTTP响应，并支持拦截器、取消请求、自动转换JSON等功能，是一个非常强大和灵活的HTTP请求库。
2024年Web前端最全Vue 学习笔记（1） Vue 基础语法 + Axios 基本使用，【原理+实战+视频+源码
2401_84411433的博客
05-04 825
三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
VUE快速入门笔记
码猿的博客
10-06 290
VUE快速入门笔记概述学习笔记安装声明式渲染绑定属性条件循环点击事件组件化数据与方法实例属性与方法。它们都有前缀 $生命周期函数（钩子）文本富文本对于布尔特性 (它们只要存在就意味着值为 true)缩写计算属性（基于它们的响应式依赖进行缓存的,不会多次执行,）侦听属性侦听器（异步/开销大）对象语法数组语法条件用 key 管理可复用的元素变异方法 (mutation method)替换数组不检测改动...
黑马VUE快速入门笔记
只要学不死，就往死里学！！！
01-12 2438
vue官网https://cn.vuejs.org/ 我的第一个vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue基础</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/
Vue快速入门笔记（一）
tsundere_x的博客
07-14 645
文章目录一、Vue基础1、第一个Vue程序2、el：挂载点3、data：数据对象二、本地应用1、v-text指令2、v-html指令3、v-on指令v-show指令v-if指令v-bind指令v-for指令v-model指令三、网络应用1、axios2、axios+vue 一、Vue基础 1、第一个Vue程序 来自官方文档 https://cn.vuejs.org/v2/guide/ 引入Vue <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script sr
Vue 3.0 (CompostionAPI + VueRouter + Axios + Bootstrap + Sass) 文章管理项目
qq_43645678的博客
10-07 418
Vue 3.0 实战项目
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Axios则是一个常用的第三方库，用于在Vue中发起HTTP请求，与后端服务器进行数据交互。Vuex是Vue的状态管理库，用于集中管理组件间的共享状态，解决复杂应用中的数据同步问题。 Vue实战项目通常会结合Element UI这样...
Vue3 + Ts + Pinia + uni-app 学习笔记
qq_33365152的博客
09-13 459
Vue3 +Ts + Pinia + uni-app 学习笔记
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3028
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
VScode 安装 Live Server 插件
静如雪的博客
04-23 6160
1. 2.重启VScode 3.右键点击文件就可以打开 4.文件=》首选项=》设置 可以设置live server 的默认设置 参考：https://blog.csdn.net/lin5165352/article/details/82850422 ...
Gin+Vue 前后端分离笔记
静如雪的博客
05-01 1970
讲课的是mac 1.安装多个版本的go 2.查看新安装的go 3.用新装的go运行文件 go $GOPATH/bin/go1.13.8 run filename 4.运行路径太长，可以把路径设置环境变量或者设置别名（没有测试，截图保存） 5.env go help env 帮助 go...
vue munt-ui
静如雪的博客
09-26 235
1.安装node node -v 2.安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装全局vue-cli脚手架 npm install -g vue-cli 4.初始化一个vue项目 vue init webpack projectname 5. 进入项目并运行 cd 项目文件夹 npm run dev 报错： ajv-keywords@3.5.2 requires a...
vue学习1
静如雪的博客
10-24 167
https://www.bilibili.com/video/BV15741177Eh?p=1概述 vue.js
vux使用1
静如雪的博客
08-23 163
VUX 1.总是报错no such file or directory, open 'C:\Users\12589\package.json' npm init 这个命令将引导您创建package.json文件。 2.直接安装或者更新： npm install vux --save 3.安装 npm install vue-cli -g # 如果还没安装 4.创建项目 vue init airyland/vu...
安装vue搭建移端项目1
静如雪的博客
12-08 127
1、在安装了node.js的前提下，使用以下命令 npm install --g vue-cli 执行命令后： >npm install --g vue-cli npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli npm WARN deprecated co...
vue3+vite+axios
07-22
Vue3 提供了响应式编程和组件化开发的思想，Vite 提供了快速构建现代化前端应用的能力，而 Axios 则为我们提供了方便的数据请求和交互。 ### 回答2： Vue3是Vue.js的最新版本，具有更高的性能和更好的开发体验。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值