安装axios很卡

转载

mob6454cc73e9a6 2025-01-07 14:23:30

文章标签 安装axios很卡 vue.js javascript 前端 html 文章分类 iOS 移动开发

1.Vue简介

2.在WebStorm中创建Vue工程

2.1

2.2el属性：

3.Vue指令

3.1 v-text和v-html

3.2 v-show和v-if

3.3 v-on

3.4 v-bind

3.5 v-for

3.6 v-model

4.Vue结合Axios

1.Vue简介

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。
Vue.js是一套构建用户界面的渐进式JavaScript框架，作用:简化dom的操作，以及响应式编程。

2.在WebStorm中创建Vue工程

2.1

(1) 引入vue.js(推荐下载下来使用)

<!--    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
     <script type="text/javascript" src="./js/vue.js"></script>

(2) body内部创建一个div标签

<div id="app">{{msg}}</div>

(3) 创建自己的js代码

<script>
 //创建一个vue对象
 let app = new Vue({
         //vue对象挂载到id为app的标签上，那么该标签下的所有元素都可以使用vue对象中的成员
         el: "#app",
         //数据
         data: {
             msg: "这就是响应式编程,当这里改变,div内容也随之改变",
         }
     })
 </script>

2.2el属性：

把当前vue对象挂载到指定的标签元素上，使其vue生效。

3.Vue指令

3.1 v-text和v-html

设置标签的文本值(textContent)

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <script type="text/javascript" src="./js/vue.js"></script>
 </head>
 <body>
     <div id="app">
         <span v-text="msg"></span><br>
         <span v-html="age"></span>
     </div>
 </body>
 <script>
     let app = new Vue({
         el: "#app",
         data: {
             msg: "这就是响应式编程,当这里改变,div内容也随之改变",
             age: "<font color='red'>这就是响应式编程,当这里改变,div内容也随之改变</font>"
         }
     })
 </script>
 </html>

3.2 v-show和v-if

根据表达值的真假,切换元素的显示和隐藏
v-show="表达式" v-if="表达式"

区别：

1、“v-if”是根据判断条件来动态的进行增删DOM元素，“v-show”是根据判断条件来动态的进行显示和隐藏元素；
2、“v-if”的切换消耗高，“v-show”的初始渲染消耗高；
3、“v-show”的性能比“v-if”高等等

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <script type="text/javascript" src="./js/vue.js"></script>
 </head>
 <body>
     <div id="app">
         <span v-text="msg" v-show="18>25"></span><br>
         <span v-html="age" v-if="16<15"></span>
     </div>
 </body>
 <script>
     let app = new Vue({
         el: "#app",
         data: {
             msg: "这就是响应式编程,当这里改变,div内容也随之改变",
             age: "<font color='red'>这就是响应式编程,当这里改变,div内容也随之改变</font>"
         }
     })
 </script>
 </html>

3.3 v-on

为元素绑定事件
v-on：等价于@

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <script type="text/javascript" src="./js/vue.js"></script>
 </head>
 <body>
     <div id="app">
         <span v-text="msg" v-show="18<25"></span><br>
         <input type="button" v-on:click="inHand" value="点击">
     </div>
 </body>
 <script>
     let app = new Vue({
         el: "#app",
         data:{
             msg: "这就是响应式编程,当这里改变,div内容也随之改变",
         },
         //方法
         methods:{
           inHand(){
               this.msg="点击事件触发";
           }
         },
     })
 </script>
 </html>

3.4 v-bind

设置元素的属性
v-bind:等价于：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
 <div id="app">
 <!--    v-bind: 缩写为 :-->
     <img v-bind:src="imgUrls" width="500px" v-bind:title="title"><br>
 </div>
 </body>
 <script>
     let app = new Vue({
         el: "#app",
         data: {
             imgUrls: "images/2.jpg",
             title: "family",
         },
     })
 </script>
</html>

3.5 v-for

循环数据

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
 <div id="app">
     <table width="300px" border="1">
         <tr>
             <th>姓名</th>
             <th>年龄</th>
             <th>住址</th>
         </tr>
         <tr v-for="(item,index) in msg">
             <td>{{item.name}}-->{{index}}</td>
             <td>{{item.age}}-->{{index}}</td>
             <td>{{item.address}}-->{{index}}</td>
         </tr>
     </table>
     <ul v-for="(o1,o2,o3) in od">
         <li>{{o1}}</li>
         <li>{{o2}}</li>
         <li>{{o3}}</li>
     </ul>
     <table width="300px" border="1">
         <tr v-for="(value,name,index) in od">
             <td>{{value}}</td>
             <td>{{name}}</td>
             <td>{{index}}</td>
         </tr>
     </table>
 </div>
 </body>
 <script>
     let app = new Vue({
         el: "#app",
         data: {
          msg: [
              {"name":"石昊","age":16,"address":"荒域"},
              {"name":"叶凡","age":25,"address":"北斗"},
              {"name":"楚风","age":30,"address":"地球"}
          ],
             od: {"name":"萧炎","age":40,"address":"斗气大陆"},
         }
     })
 </script>
 </html>

3.6 v-model

获取和设置表单元素的值. input select textarea
注：表单元素

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <script type="text/javascript" src="./js/vue.js"></script>
 </head>
 <body>
     <div id="app">
         <input type="text" v-model="msg"><br>
          <!--当表单元素内容改变,span内容随之改变 -->
         <span>{{msg}}</span>
     </div>
 </body>
 <script>
     let app = new Vue({
         el: "#app",
         data:{
             msg:"展示数据"
         },
     })
 </script>
 </html>

4.Vue结合Axios

引入axios
axios.get/post/delete/put("接口地址").then(result=>{})

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>joke</title>
     <script type="text/javascript" src="./js/vue.js"></script>
     <script type="text/javascript" src="./js/axios.min.js"></script>
 </head>
 <body>
 <div id="app">
     <input type="text" value="请输入一个数字" v-model="aa">
     <button @click="hav">获取笑话</button><hr>
     <ul v-for="item in msg">
         <li>{{item}}</li>
     </ul>
     <table>
         <tr v-for="ii in msg">
             <td>{{ii}}</td>
         </tr>
     </table>
 </div>
 </body>
 <script>
     let app = new Vue({
         el: "#app",
         data:{
             msg:[],
             aa:"",
         },
         methods:{
             hav(){
                 axios.get("https://autumnfish.cn/api/joke/list?num="+this.aa).then(result=>{
                     this.msg=result.data.data;
                 })
             },
         }
     })
 </script>
 </html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：esp32bootloader烧录位置

下一篇：虚拟机查看mysql错误日志

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

安装axios很卡

安装axios很卡

1.Vue简介

2.在WebStorm中创建Vue工程

2.1

2.2el属性：

3.Vue指令

3.1 v-text和v-html

3.2 v-show和v-if

3.3 v-on

3.4 v-bind

3.5 v-for

3.6 v-model

4.Vue结合Axios

51CTO博客