2.2.4 Vue, 插值表达式,t-...text,html,if,show,on,for,bind,model,生命周期,axios

最新推荐文章于 2024-02-01 17:54:39 发布
最新推荐文章于 2024-02-01 17:54:39 发布
阅读量468 收藏 1
点赞数
删除
本文链接：https://blog.csdn.net/chengh1993/article/details/109704794
版权

目录

1.vue基础简介

1.1 什么是vue.js

2.1 MVVM模式

demo1-vue入门

demo2-插值表达式

demo3-EL挂载点

demo4-data数据对象

demo5-指令入门

demo6-v-text 

demo7-v-html

demo8-v-if与v-show

demo9-v-on

demo10-v-on, $event传参

demo11-按键修饰符

demo12-v-for

demo13-v-bind

demo14-v-model

demo15-商品目录案例 ( 渲染表格,  删除商品,  添加商品 )

demo16-vue生命周期

demo17-axios生成笑话

demo18-axios检查用户名

demo19-天气预报

 


第一章 vue简介

1.vue基础简介

1.1 什么是vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上
手，还便于与第三方库或既有项目整合。另一 方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完
全能够为复杂的单页应用提供驱动。
VUE的特点:

  • 1.JavaScript框架     2.简化DOM操作      3.响应式数据驱动

2.1 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式和MVC模式一样，主要
目的是分离视图（View）和模型（Model）Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于
View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的
一致性，这种轻量级的架构让前端开发更加高效、便捷。

MVVM拆分解释为：
Model: 负责数据存储
View: 负责页面展示
View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
Vue中的 MVVM



 

demo1-vue入门

一共三个步骤
1. 引入vue.js库
2. 创建Vue对象设置el属性和data属性
3. 使用插值表达式将数据渲染到html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.远程引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <!-- 3.使用插值表达式渲染html -->
    <div id="app">
        {{message}}
    </div>
</body>
    <!-- 2.创建vue对象,设置el属性和data属性 -->
    <script>
        var app = new Vue({
            el : "#app",
            data:{
                message : "welcome  Vue!!" 
            }
        })
    </script>
</html>

 

demo2-插值表达式

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <!-- 3.使用插值表达式渲染html
    问题:
    1.插值表达式的作用  :  使用vue中的数据来替代html中的内容.
    2.插值表达式能写哪些内容 : 除了能够编写data中的数据,还可以编写一些数学运算.
    3.插值表达式能否写语句 :  插值表达式中不能写语句, 能够写三元运算符
    4.插值表达式的作用范围 :  一定是vue对象接管的范围内,超出范围不会生效,不会被解析.
    -->
    <div id="app">
        {{message}}
        {{abc}}
        {{123 - 456}}   <!-- 还可以简单数学运算 -->
        <hr>
        {{false?'aaa':'bbb'}}
    </div>

    {{false?'aaa':'bbb'}}   <!-- 这里不会被解析出来,因为不在接管范围 -->
</body>
    <!-- 2.创建vue对象,设置el属性和data属性 -->
    <script>
        var app = new Vue({
            el : "#app",
            data:{
                message : "welcome lagou  Vue!!",
                abc:"我的内容是abc"
            }
        })
    </script>
</html>

 

demo3-EL挂载点


<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body id="app">
    <!-- 
        EL挂载点的注意事项:
        1.是否能够选择其他的选择器 : 可以使用其他选择器. 一次选择多个元素的选择器,插值表达式只有第一个被解析
        2.EL挂载点选中的元素,它的子元素是否也能够使用插值表达式 :  被选中元素的子元素也可以使用同一个插值表达式
        3.html元素和body元素,最好不要被vue对象接管.  如果是用使用el 命中body和html 插值表达式不会被解析.
     -->

    <!-- <div id="app" class="cls">
        {{message}}
        <div>
            {{message}}
        </div>
    </div> -->
    {{message}}
    
</body>
    <!-- 2.创建vue对象,设置el属性和data属性 -->
    <script>
        var app = new Vue({
            el : "#app",
            data:{
                message : "welcome lagou  Vue...demo3...!!",
            }
        })
    </script>
</html>

 

demo4-data数据对象

当一个 Vue 实例被创建时，它将  data  对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <!-- 
        data中的数据可以是哪些?
        1.字符串
        2.数值型内容
        3.对象类型
        4.布尔类型
        5.数组类型
    -->
    <div id="app">
        {{message}} <br>
        {{num}} <br>
        {{person}}  {{person.username}}  <br>
        {{date.getFullYear()}} <br>
        {{flag}} <br>
        {{arr}}  {{arr[1]}}

    </div>
</body>
    <!-- 2.创建vue对象,设置el属性和data属性 -->
    <script>
        var app = new Vue({
            el : "#app",
            data:{
                message : "welcome lagou  Vue!!",
                num : 12,
                person:{
                    "username":"张三",
                    "age":18
                },
                date: new Date(),
                flag:false,
                arr:["aa","bb",true,123]
            }
        })
    </script>
</html>

 

demo5-指令入门

  • 指令是指v-开头，作用于html标签，提供一些特殊的特性，当指令被绑定到html元素的时候，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成html的一种属性
  • 解释：指令 (Directives) 是带有 v- 前缀的特殊属性
  • 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
  1.  Vue框架提供的语法
  2.  扩展了HTML的能力
  3.  减少DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <!-- 3.使用插值表达式渲染html -->
    <div id="app" v-if="flag">
        {{message}}
    </div>
</body>
    <!-- 2.创建vue对象,设置el属性和data属性 -->
    <script>
        var app = new Vue({
            el : "#app",
            data:{
                message : "welcome lagou  Vue!!",
                flag:true
            }
        })
    </script>
</html>

 

demo6-v-text 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text的使用</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        v-text和插值表达式的区别:
        1. v-text替换标签体中所有内容;  插值表达式只替换部分内容
        2. v-text补充新的内容是 ''连接 , 插值表达式 "" + 连接内容

     -->
    <div id="app">
        <p>{{message + ",我们很专业 "}} , 插值表达式原始内容</p>    
        <!-- 采用 v-text展示数据 -->
        <p v-text="message+',我们很专业'"> p标签中原始内容</p>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data : {
            message : "欢迎来到拉勾"
        }
    })
</script>
</html>

 

demo7-v-html

注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text的使用</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
      v-html: 可以设置标签体之间的html元素
      v-text: 只可以设置标签体之间的文本内容

     -->
    <div id="app">
       <p v-html="url">原始内容1</p>
       <p v-text="url">原始内容2</p>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data : {
            message : "欢迎来到拉勾",
            url : "<a href='http://kaiwu.lagou.com'>跳转到拉勾教育</a>"
        }
    })
</script>
</html>

 

demo8-v-if与v-show

作用:根据表达式的bool值进行判断是否渲染该元素

v-if 有更高的切换开销，而  v-show 有更高的初始渲染开销。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-if与v-show</title>
</head>
<body>
    <div id="app">
        <!-- 
            v-if 是将元素从dom树中移除
            v-show 是将元素设置属性隐藏     切换频繁用show

         -->
        <p v-if="isShow">我的第一个p元素</p>
        <p v-show="3>4">我的第二个p元素</p>
    </div>
</body>
<script>
    var app = new Vue({
        el : "#app",
        data:{
            isShow : true
        }
    })

</script>
</html>

 

demo9-v-on

作用:使用  v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- 1.引入vue.js -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <button v-on:click="fun1">按钮1</button>
        <!-- 下面的@click是简写 -->
        <button @click="fun2()">按钮2</button>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data : {
            count : 1
        },
        methods : {
            fun1:function(){
                alert("按钮1被点击了...");
            },
            fun2:function(){
                alert("按钮222被点击了...");
            }
        }
    })
</script>
</html>

 

demo10-v-on, $event传参


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- 1.引入vue.js -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-on的使用02</title>
</head>
<body>
    <!-- 
        1.获取元素,操作元素
            点击按钮一 count值增加
            点击按钮二 count值减少
        2.参数传递
            传递count
            传递$event : 如果有一个输入框,键盘按下,只能输入数字,不能输入其他内容.
            需求:有一个文本输入框,只可以输入数字0-9 ,其他内容不能输入.

        感觉Vue框架类似java的类
     -->
    <div id="app">
        <button v-on:click="add">按钮一count增加</button>
        <button @click="sub">按钮二count减少</button>
        <hr>
        <button v-on:click="count += 1">按钮一count增加-方式2</button>
        <button @click="count -= 1">按钮二count减少-方式2</button>
        <hr>
        <button @click="fun(count)">获取元素count</button>
        <hr>
        <button @click="fun1($event)">传递事件对象</button>
        <hr>
        <input type="text" name="name" id="id" @keydown="fun2($event)">
        <h2>{{count}}</h2>
    </div>
</body>
<script>
    var app = new Vue({
        el : "#app",
        data : {
            count : 1
        },
        methods:{
            add:function(){
                this.count += 1
            },
            sub:function(){
                this.count -= 1
            },
            fun:function(c){
                alert(c)
            },
            fun1:function(e){
                alert(e);
            },
            fun2:function(e){
                //获取到键盘事件,可以获取到具体的案件 keyCode
                // alert(e.keyCode)
                //如果按钮大于57 或者按钮小于48 ,阻止事件发生 preventDefault()
                if(e.keyCode > 57 || e.keyCode < 48){
                    //阻止事件发生
                    e.preventDefault();
                }
            }
        }
    })
</script>
</html>

 

demo11-按键修饰符

.enter    .tab   

.delete    .esc

.space    .up

.down    .left

.right    .ctrl

.alt    .shift


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        格式1:	  v-on:事件名称.修饰符 = "函数名称"
                 @事件名.修饰符 = "methods中的方法名"
        需求:
        1.点击一个按钮,触发函数,仅仅只触发一次
        2.输入框,只有点击回车才会触发函数

        .once - 只触发一次回调。

     -->
   <div id="app">
       <button v-on:click.once="fun">我的按钮只触发一次</button> <br>
       <input type="text" name="name" id="id" @keydown.enter="fun2">
   </div>
</body>
<script>
  var app = new Vue({
      el:"#app",
      methods : {
          fun:function(){
              alert("按钮被点击了..");
          },
          fun2:function(){
              alert("你点击了回车键...");
          }
      }
  })
</script>
</html>

 

demo12-v-for

根据一组数组或对象的选项列表进行渲染。
v-for  指令需要使用  item in items  形式的特殊语法，
items  是源数据数组 /对象
当要渲染相似的标签结构时用v-for

注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for遍历(都要掌握)</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        格式:
        v-for="(元素,索引) in 数组名/对象"

        使用v-for完成以下三个需求:
        1.循环数组arr,打印遍历元素
        2.循环Person对象获取属性名和属性值
        3.循环学生数组对象,将内容展示在table表格中
     -->
    
     <div id="app">
        <!-- 1.循环数组arr,打印遍历元素 -->
        <p v-for="(element,index) in arr">{{element}}  === {{index}}</p>

        <!-- 2.循环Person对象获取属性名和属性值 -->
        <!-- 下面的index是key的下标, key和value的位置不能互换 -->
        <ul>
            <li v-for="(value , key ,index) in person"> {{key}}  === {{value}} ==== {{index}}</li>
        </ul>
        <hr>
        <!-- 3.循环学生数组对象,将内容展示在table表格中 -->
        <table border="1px" width="50%" cellspacing="0"  align="center">
            <tr>
                <th>学生编号</th>
                <th>学生姓名</th>
                <th>学校</th>
            </tr>
            <tr v-for="stu in students" align="center">
                <td>{{stu.sid}}</td>
                <td>{{stu.sname}}</td>
                <td>{{stu.school}}</td>
            </tr>
        </table>

     </div>
</body>
  <script>
      var app = new Vue({
          el:"#app",
          data:{
              arr : ["aa","bb","cc"],
              person : {
                  "pname":"老王",
                  "age" : 38
              },
              students : [
                  {"sid":1, "sname":"马云","school":"湖畔大学"},
                  {"sid":2, "sname":"马华腾","school":"深圳大学"},
                  {"sid":3, "sname":"王健林","school":"军校"}
              ]
          }
      })
  </script>
</html>

 

demo13-v-bind

作用: 可以绑定标签上的任何属性。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .divStyle {
            border:1px solid red;
            background-color: coral;
            width: 100px;
            height: 100px;
        }
        .fColor {
            color: red;
        }
        .FSize{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 
        语法:
        格式1:      v-bind:属性名="data中的值"
        简化格式:   :属性名="data中的值"    简化语法 v-bind可以删除
        对象语法:   v-bind:属性名="{属性名:data中的值}"
        数组语法:   v-bind:属性名="[data中值1,data中值2...]"

        需求:
        1.使用v-bind设置图片的src属性
        2.使用v-bind设置class样式  (对象语法)
        3.使用v-bind设置class多个属性  (数组语法)
     -->

     <div id="app">
        <!-- 1.使用v-bind设置图片的src属性 -->
        <img v-bind:src="imgUrl"/> <br>

        <!-- 2.1 使用v-bind设置class样式  (原始方式) -->
        <!-- 如果isDivStyle为true，则返回的结果为 <div class="divStyle"></div> -->
        <div :class="isDivStyle?'divStyle':''"></div>

        <!-- 2.2 使用v-bind设置class样式  (对象语法) -->
        <!-- 如果isDivStyle为true，则返回的结果为 <div class="divStyle"></div> -->
        <div :class="{divStyle:isDivStyle}"></div>

        <!-- 3.使用v-bind设置class多个属性  (数组语法) -->
        <p :class="[fontColor , fontSize]">我是p元素内容</p>

     </div>
  
</body>
   <script>
      var app = new Vue({
          el:"#app",
          data : {
              imgUrl:"img/3.jpg",
              isDivStyle:true,
              fontColor:"fColor",
              fontSize:"FSize"
          }
      })

   </script>
</html>

 

demo14-v-model

作用: 获取和设置表单元素的值(双向数据绑定)
特点: 双向数据绑定
数据发生变化可以更新到界面
通过界面可以更改数据
案例:获取和设置表单元素的值(双向数据绑定)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   
</head>
<body>
    <!-- 
        需求:
        1.使用v-model设置message和input文本框内容双向绑定
        2.点击按钮修改message内容
     -->
    <div id="app">
        <!-- v-model类似于value -->
        <input type="text" name="name" id="id" v-model="message"> <br>
        <input type="button" value="点击按钮修改message" @click="update"> <br>
        <h2>{{message}}</h2>
    </div>
</body>
    <script>
        var app = new Vue({
            el : "#app",
            data : {
                message : "拉勾大数据欢迎你"
            },
            methods : {
                update: function(){
                    this.message = "大数据前端课程!!!"
                }
            }
        })
    </script>
</html>

 

demo15-商品目录案例 ( 渲染表格,  删除商品,  添加商品 )


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        需求:
        1.展示页面
        2.删除功能
        3.添加功能

     -->
     <div id="app">
        <table border="1px" width="50%" height="450px" align="center" cellspacing="0">
            <tr>
                <th>编号</th>
                <th>商品名称</th>
                <th>日期</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item , index) in items"  align="center">
                <td>{{index + 1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td><a href="#"  @click.prevent="deleteItem(index)">删除</a></td>
            </tr>
            <tr align="center">
                <td colspan="4">
                    <input type="text" name="name" v-model="name">
                    <input :disabled="name.length === 0" type="button" value="添加商品" @click="addItem">
                </td>
            </tr>
        </table>
     </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data : {
                items : [
                    {
                        name:"华为p40",
                        date:"2020/4/10"
                    },
                    {
                        name:"Lenovo",
                        date:"2020/5/10"
                    },
                    {
                        name:"TCL",
                        date:"2020/6/10"
                    }],
                    name:''
            },
            methods : {
                deleteItem:function(index){
                    //确认删除提示
                    if(confirm("您是否确认删除?")){
                        //删除一行元素  splice(index,个数)
                        // 这个功能在jQ中可以用
                        this.items.splice(index,1);
                    }
                },
                addItem:function(){
                    //1.创建一个item元素,设置内容
                    var item = {
                        name : this.name,
                        // 获得当前日期
                        date : new Date().toLocaleDateString()
                    }

                    //2.将创建好的item对象添加到items
                    this.items.unshift(item);
                    //添加完毕后,文本框内容删除
                    this.name='';
                }
            }
        })
    </script>
</html>

 

demo16-vue生命周期

  • 挂载
  1. beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
  2. created  在实例创建完成后被立即调用。
  3. beforeMount 在挂载开始之前被调用。
  4. mounted  el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
  • 更新
  1. beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
  2. updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
  • 销毁
  1. beforeDestroy 实例销毁之前调用。
  2. destroyed 实例销毁后调用。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <span id="sp">{{message}}</span>
        <hr>
        <input type="button" value="更变message" @click="changeMessage">
    </div>
</body>
 <script>
     new Vue({
         el : "#app",
         data: {
             message : "拉勾"
         },
         methods:{
             show(){
                 console.log("show方法调用了")
             },
             changeMessage(){
                 this.message = "拉勾教育!"
             }
         },
         beforeCreate:function(){
             //console.log("获取message = "+this.message)
             //this.show();
         },
         created(){
           // console.log("created获取message = "+this.message);
           // this.show();
         },
         beforeMount(){
             //该方法:可以获取到内存中的data,但是不能获取到页面渲染的数据
            // console.log("获取内存中的message = "+this.message);
            // console.log("页面上的内容="+document.getElementById("sp").innerText)
         },
         mounted(){
             //console.log("获取内存中的message = "+this.message);
             //console.log("页面上的内容="+document.getElementById("sp").innerText)
         },
         beforeUpdate(){
             //当data中的内容该改变是该函数触发
             //console.log("获取内存中的message = "+this.message);
             //console.log("页面上的内容="+document.getElementById("sp").innerText)
         },
         updated(){
             //内存中的数据和页面上的数据一致的.
             console.log("获取内存中的message = "+this.message);
             console.log("页面上的内容="+document.getElementById("sp").innerText)
         }
     })
 </script>
</html>

 

demo17-axios生成笑话

axios: Vue中结合网络数据进行应用的开发

  • 目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便
  • axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
   <body>
       <div id="app">
           <input type="button" value="生成笑话" @click="createJoke"> <br>
           <p v-for="(element , index) in joke">
               {{index + 1}}.{{element}}
           </p>
       </div>
   </body>
   <script>
        /*
           get格式:
           1.   axios.get(地址?key1=value1&key2=value).then(function(response){},function(error){})
           2.   axios.get(地址,{params:{key1:value1,key2:value2}}).then(function(response){},function(error){})
            

            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
         */
        new Vue({
            el : "#app",
            data : {
                joke : ""
            },
            methods:{
                //函数的目的是获取生成的笑话在p标签中展示
                createJoke(){
                    //发送ajax异步请求
                    var t = this;       
                    axios.get("https://autumnfish.cn/api/joke/list",{params:{"num":5}}).then(function(response){
                        console.log(response.data.jokes);
                        //response.data.jokes 是笑话的数组
                        //在这里面不能通过this.joke拿到data中的的对象,因此事先用t记录data中的this对象
                        //也就是axios.get函数中的this不是createJoke中的this
                        t.joke = response.data.jokes;
                    },function(error){

                    })
                }
            }
        })
   </script>
</html>

 

demo18-axios检查用户名

其他请求类型

  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
   <body>
     <div id="app">
         <input type="text" name="username" v-model="username">
         <input type="button" value="检查用户名是否可以注册" @click="checkUserName">
     </div>
   </body>
   <script>
        /*
            格式:
            axios.post(请求路径,{key1:value1,key2:value2}).then(function(response){},function(error){})

            请求地址:https://autumnfish.cn/api/user/reg
            请求方法:post
            请求参数:username(用户名,字符串)
            响应内容:注册成功或失败
         */
         new Vue({
             el : "#app",
             data: {
                 username : ""
             },
             methods : {
                 checkUserName(){
                     //1.获取用户输入的用户名
                     var username = this.username;
                     //2.发送post方式的ajax请求
                     axios.post("https://autumnfish.cn/api/user/reg",{"username":username}).then(function(response){
                         alert(response.data)
                     },function(error){})
                 }
             }
         })
        
        
   </script>
</html>

 

demo19-天气预报


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>

    <link rel="stylesheet" href="css/index.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
        <div class="wrap" id="app">
          <div class="search_form">
            <div class="logo">拉勾天气查询</div>
            <div class="form_group">
              <!-- 3.绑定点击事件,回车触发,通过v-model绑定数据 -->
              <input  type="text" v-model="city" class="input_txt" @keyup.enter="findCityWeather" placeholder="请输入要查询的城市"/>
              <button class="input_sub" @click="findCityWeather">回车查询</button>
            </div>
          </div>
          <ul class="weather_list">
            <!-- 遍历天气信息 -->
            <li v-for="(element,index) in weatherArr">
              <!-- type表示返回数据中的天气类型 -->
              <div class="info_type"><span class="iconfont">{{element.type}}</span></div>
              <div class="info_temp">
                <!-- low和high表示返回数据中的高低温 -->
                <b>{{element.low}}</b>
                ~
                <b>{{element.high}}</b>
              </div>
              <!-- date表示返回数据中的日期 -->
              <div class="info_date"><span>{{element.date}}</span></div>
            </li>
          </ul>
        </div>
</body>
    <!-- 2.创建vue对象,设置el属性和data属性 -->
    <script>
      /*
        思路分析:
        1.输入框和添加按钮,给定事件,输入框给keyup事件,按钮给单击事件,关联同一个函数.
        2.获取city名称
        3.发送get方式的ajax请求---> 查询到5天的天气情况.
        4.遍历天气,把天气放到li中
      */
      new Vue({
        el : "#app",
        data : {
          city : "",
          weatherArr:[]
        },
        methods:{
          findCityWeather(){
            //获取城市的名称
            var city = this.city;
            //console.log(city);
            var t = this;
           //发送ajax请求
           axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+city).then(function(response){
              console.log(response.data.data.forecast);
              t.weatherArr = response.data.data.forecast;
           },function(error){

           })
          }
        }
      })

    </script>
</html>

 

 

CH_ENN
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.Vue插值表达式的学习
gin_xin的博客
08-06 660
插值表达式学习：在vm的data中声明一个学生对象： 学生对象的属性为：姓名、身份证号、Java成绩、Python成绩： 在页面显示：学生姓名、身份证号的位数、显示Java和python的成绩、显示2门课的平均成绩。...
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
12-10
在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失，最近研究了一下这个问题的原因和解决办法，这里和大家分享一下。 1.闪现的原因 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译，所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况。因为在这些判断条件或表达式执行之前，DOM已经渲染出来了，之后Vue才会执行相应的JS代码。 2.解决的办法 其实在了解了原因之后我们就有了大概的思路，既然是在JS执行之前会出现，那就让元素在JS执行之前都保持不显示就好了。那事情就分为两步： 选择在JS执行前要隐藏的元素
vue中插值表达式和14个vue指令详解
漫漫前端路，进一寸有进一寸的欢喜
03-29 9226
在学习vue时，插值表达式和vue指令可谓是基础中的基础，这篇文章，就让你彻底了解怎么使用插值表达式和vue中所有指令的用法。 一、插值表达式：{{ }} 可以将vue中的数据填写在插值表达式中 <div id="app">{{ title }}</div> <script> const vm = new Vue({ el:"#app"...
（三）插值操作
qq_45853870的博客
10-18 193
（三）插值操作 3.1 Mustache语法 ​ mustache是胡须的意思，因为{{}}像胡须，又叫大括号语法。 ​ 在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
【Vue】解决问题：插值语法无效
日拱一卒無有盡，功不唐捐終入海
12-27 2350
解决问题：插值语法无效。
hbase-2.2.4-bin-for-hadoop3.tar.gz
07-05
本文将详细介绍如何解决HBase与Hadoop不同版本之间的适配问题，特别是针对标题中的“hbase-2.2.4-bin-for-hadoop3.tar.gz”压缩包，它是为了解决官方HBase 2.2.4与Hadoop 2.8.5不兼容的问题而特别编译的版本，专为...
gson-2.2.4.jar下载
01-08
它的全名是Google Simple JSON，其版本2.2.4是一个非常稳定且广泛使用的版本，适用于许多项目。在这个讨论中，我们将深入探讨Gson库的核心功能、特性以及如何在实际项目中使用它。 Gson的核心功能在于将Java对象...
javax.servlet-api-3.1.0.jar javax.el-api-2.2.4.jar javax.el-2.2.4.jar
02-21
api-3.1.0.jar`, `javax.el-api-2.2.4.jar`, `javax.el-2.2.4.jar`这些文件对于构建基于Java的Web应用程序至关重要，它们提供了与Web服务器通信和处理用户请求的核心功能，同时也支持高效的视图层表达式处理。...
.archivetempiLink-2.2.4.crx
最新发布
04-07
.archivetempiLink-2.2.4.crx
gson-2.2.4.jar
09-22
在Java开发中，Gson-2.2.4.jar是一个常用的依赖包，它包含了处理JSON数据所需的所有类和方法。 首先，让我们深入了解一下JSON（JavaScript Object Notation），这是一种轻量级的数据交换格式，易于人阅读和编写，...
Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
01-08
在Vue里 有好几种数据渲染的方法及相关指令 下面将一一介绍： 一、插值表达式 插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义： 通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了 Document {{msg}} var vm=new Vue({ el:#app, data:{ msg:Hello Vue! } }) 由于插值表达式的语法是{{}} 因而也被称为mustache胡子
Vue插值表达式及常用指令
qq_44741577的博客
02-01 1947
插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用。
vuejs之插值表达式
RyleeLouth的博客
10-26 7259
什么是插值表达式？ 插值表达式是Vuejs中实现数据渲染到页面的一种手段，可以直接让数据从模型到视图，不需要dom操作，在大括号里面给我们提供了js语境,可以执行简单的js代码 插值表达式就是{{ }}，如下操作，将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果， <body> <div> {{ title }} <...
vue模板插值失效问题
qq_44381427的博客
05-27 2887
用vue的模板插值，出现修改data值页面不变的问题 <button @click="click">{{btnText}}</button> ... data:{ btnText:'按钮' }, method:{ click:function(){ $('button').ladda().start();//启动特效（瞎写的） } } 由于我使用了ladda按钮特效，导致改变btnText结果页面显示不响应。 猜测原因是，ladda特效修改覆盖了button的一些事件
微信小程序之数据绑定
Lee的博客
05-22 6243
微信小程序是通过什么方法来实现数据绑定的呢？答案是状态模式-单向数据流。状态模式定义一个对象，改对象可以通过管理其状态的变化，从而实现应用程序做出相应的变化。状态模式简单的讲，对象状态化，只要对象状态发送变化，就通知页面更新视图元素。 通过以下三个步骤实现：识别哪个UI元素被绑定了相应的对象。监视对象状态的变化。将所有变化传播到绑定的视图上。注意数据流向是单向的，即视图变化不会影响对象状态。ind...
【vue笔记1】-插值、表达式、分隔符、指令
小小喵的博客
08-08 4512
最近打算重温一遍VUE的知识，正好总结一份笔记。 插值 基本用法 &amp;amp;amp;lt;span&amp;amp;amp;gt;Text:{{text}}&amp;amp;amp;lt;/span&amp;amp;amp;gt; &amp;amp;amp;lt;span v-text=&amp;amp;quot;text&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/s
03.Vue.js : 插值表达式的使用
人间清醒
03-17 1119
<!DOCTYPE html> <html lang="en"> <head> <title>插值表达式的使用</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
三元表达式判断控制插值表达式里面的内容
OnismYY的博客
11-19 1239
<!-- 绑定支管 {{ props.item.branchValveName }}--> <!--如果内容为空，显示无，如果传递过来的内容不为空，展示内容--> <td class="text-xs-left">{{ props.item.branchValveName=="" ? "无" : props.item.branchValveName }}</td> <!-- 绑定主水泵{{ props.item.mainPumpName }} --&gt
demjson-2.2.4.tar.gz
09-06
demjson-2.2.4.tar.gz是一个Python库的压缩包。demjson库是一个用于处理JSON数据的Python模块，它提供了一些方便的函数和方法来解析和生成JSON数据。demjson库支持将Python对象转换为JSON格式，并支持将JSON数据解析...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值