前端基础-04VUE基础01

01 基本介绍

安装

在页面上以 CDN 包的形式导入。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.2/vue.global.js"></script>

三剑客：html css js

最终是要把jQuery和vue代码翻译成原生js，再被浏览器执行

day12\VueDemo\01 demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>console.log("hello user")</script>
  <script src="common.js"></script>
</head>
<body>
<div class="c1">hello yuan</div>
</body>
</html>

day12\VueDemo\common.js

console.log("hello vue")

导入vue3.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>console.log("hello user")</script>
    <script src="common.js"></script>
    <script src="vue3.js"></script>
</head>
<body>
<div class="c1">hello yuan</div>
</body>
</html>

02 基本案例

实现hello yuan改为hello rain

1找到标签

2 做dom 操作，做标签替换

原样输出：写什么显示什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
</div>
</body>
</html>

开始引入vue

引入vue对象，给对象 .mount

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
</div>
<script>
    var vm=Vue.createApp({
        data(){
            return{
                msg:"hello world"
            }
        }
    }).mount("#app")
</script>
</body>
</html>

示例2

<script>
    const Counter={
        data(){
            return {
                msg:"hello world"
            }
        }
    }
    vm=Vue.createApp(Counter).mount("#app")
</script>

数据格式

data(){
    return {
        msg:"hello world"
    }
},

设计哲学：基于数据驱动页面

不需要找dom 标签

Vue做了什么？

1 构建虚拟dom

2 字符串替换

1 创建app

2 加载模板 mount

3 将数据渲染

课堂练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>console.log("hello user")</script>
    <script src="common.js"></script>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息: {{msg}}</p>
</div>
<script>
    var vm=Vue.createApp({
        data(){
            return{
                msg:"hello world"
            }
        }
    }).mount("#app")
</script>
</body>
</html>

03 mvvm模型

View视图

展示的html页面

<div id="app">
    <!--设置vue可以操作的html内容范围，值一般就是css的id选择器-->
    <p>消息: {{msg}}</p>
</div>

Model模型

指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

vm 全局对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>

<div id="app">
    <p>消息：{{msg}}</p>
</div>
<script>
    // 数据驱动页面
    var vm=Vue.createApp({
        data(){
            return{
                msg:"hello world",
                xxx:100,
            }
        }
    }).mount("#app")
</script>
</body>
</html>

在浏览器console终端查看

直接vm.message

通过控制台修改变量

页面本来是hello world，通过console修改 vm.msg=”user”,页面也发生变化

注意p标签位置

<div id="app">
    <p>消息：{{msg}}</p>
    <p>消息：{{msg}}</p>
</div>
<p>消息：{{msg}}</p>

第一个参数data

第二个参数methods

在methods中添加弹窗

foo函数，使用alert，弹标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>

<div id="app">
    <p>消息：{{msg}}</p>
    <p>消息：{{msg}}</p>
</div>
<p>消息：{{msg}}</p>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                xxx: 100,
            }
        },
        methods: {
            foo(){
                alert(123)
            },
            bar(){
                
            }
        }
    }).mount("#app")
</script>
</body>
</html>

控制台：

　　执行vm.foo 打印函数内容

　　执行vm.foo() 执行函数，弹窗

this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                xxx: 100,
            }
        },
        methods: {
            foo(){
                console.log(this) //this:在方法中指的是vue对象，即vm对象
            },
            bar(){}
        }
    }).mount("#app")
</script>
</body>
</html>

函数中添加this.msg

methods: {
    foo(){
        console.log(this) //this:在方法中指的是vue对象
        this.msg="user"
    },
    bar(){}
}

执行 vm.foo() 页面内容改变

@click绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p @click="foo">消息：{{msg}}</p>
    <p @click="foo">消息：{{msg}}</p>
    <p @click="foo">消息：{{msg}}</p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                xxx: 100,
            }
        },
        methods: {
            foo(){
                console.log(this) //this:在方法中指的是vue对象
                this.msg="user"
            },
            bar(){}
        }
    }).mount("#app")
</script>
</body>
</html>

注意：点击一个标签三个都变

this是vue对象，会把所有的对象都替换为user

综合练习1 vue中data、methods和@click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p @click="foo">消息:{{msg}}</p>
</div>
<script>
    // 数据驱动页面
    Vue.createApp({
        data(){
            return {
                msg:"hello world",
                x:100,
            }
        },
        methods:{
            foo(){
                console.log(this);
                this.msg="hello yuan"
            }
        }
        
    }).mount("#app")
</script>
</body>
</html>

注意：

data是函数

methods是表示键值对

click放在div里的p标签中，放在div，演示不出效果

04 插值

引入link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
</head>
<body>
<div id="app">
  <p>消息：{{msg}}</p>
  <p>网站：{{link}}</p>
  <!--  <p>网站：<span v-html="link"></span></p>-->
</div>
<script>
  // 数据驱动页面
  var vm=Vue.createApp({
    data(){
      return{
        msg:"hello world",
        link:"<a href=''>百度</a>"
      }
    },
  }).mount("#app")
</script>
</body>
</html>

浏览器当纯文本展示

v-html

借助特殊指令，插入值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
</head>
<body>
<div id="app">
  <p>消息：{{msg}}</p>
  <p>网站：<span v-html="link"></span></p>
</div>
<script>
  // 数据驱动页面
  var vm=Vue.createApp({
    data(){
      return{
        msg:"hello world",
        link:"<a href=''>百度</a>"
      }
    },
  }).mount("#app")
</script>
</body>
</html>

打印效果

v-model

Input标签 value值不是文本不能用{{ }}方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
    <p>网站：<span v-html="link"></span></p>
    <p><input type="text" value="{{data}}"></p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                link: "<a href=''>百度</a>",
                data:"123"
            }
        },
    }).mount("#app")
</script>
</body>
</html>

使用v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
    <p>网站：<span v-html="link"></span></p>
    <p><input type="text" v-model="data"></p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                link: "<a href=''>百度</a>",
                data:"123"
            }
        },
    }).mount("#app")
</script>
</body>
</html>

1 直接查看vm.data

2 vm.data=1000，查看页面变化

3 修改页面值为10000，查看控制台vm.data

都有msg驱动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
    <p>网站：<span v-html="link"></span></p>
    <p><input type="text" v-model="data"></p>
    <p><input type="text" v-model="msg"></p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                link: "<a href=''>百度</a>",
                data:"123"
            }
        },
    }).mount("#app")
</script>
</body>
</html>

1 控制台，查看vm.msg

2 修改input中数据，消息位置也会实时跟着变化，打印vm.msg也发生变化

3 控制台输入vm.msg=“user02”，input框和消息位置，立即更新，联动变化

综合练习2 v-html v-model联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
    <p>网站：<span v-html="link"></span></p>
    <p><input type="text" v-model="data"></p>
    <p><input type="text" v-model="msg"></p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                link: "<a href=''>百度</a>",
                data:"123"
            }
        },
    }).mount("#app")
</script>
</body>
</html>

05 -06 v-bind

v-bind:src=”” 或者:src=””

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
    <p>网站：<span v-html="link"></span></p>
    <p><input type="text" v-model="data"></p>
    <p><input type="text" v-model="msg"></p>
<!--    <p><img height="300" width="200" src="" alt=""></p>-->
    <p><img height="300" width="200" :src="url" alt=""></p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                link: "<a href=''>百度</a>",
                data:"123",
                url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651719709&t=9ccab20168f90e1f5f4e6803e71f1c21"
            }
        },
    }).mount("#app")
</script>
</body>
</html>

用:value,不联动了

v-bind 标签属性由数据驱动

修改 <p><input type="text" :value="msg"></p>对应的value，msg没有联动

v-model案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
    <p>网站：<span v-html="link"></span></p>
    <p><input type="text" v-model="data"></p>
    <p><input type="text" v-model="msg"></p>
    <p><input type="text" :value="msg"></p>
    <p><img height="300" width="200" :src="url" alt=""></p>

    <p>
        <a :href="link2">{{site}}</a>
        网站名称<input type="text" v-model="site">
        url地址<input type="text" v-model="link2">
    </p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                link: "<a href=''>百度</a>",
                data:"123",
                url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651719709&t=9ccab20168f90e1f5f4e6803e71f1c21",

                site:"百度",
                link2:"http://www.baidu.com"
            }
        },
    }).mount("#app")
</script>
</body>
</html>

修改了文本，url没变

url修改为jd，发生变化

Js表达式

+1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
    <p>网站：<span v-html="link"></span></p>
    <p><input type="text" v-model="data"></p>
    <p><input type="text" v-model="msg"></p>
    <p><input type="text" :value="msg"></p>
    <p><img height="300" width="200" :src="url" alt=""></p>

    <p>
        <a :href="link2">{{site}}</a>
        网站名称<input type="text" v-model="site">
        url地址<input type="text" v-model="link2">
    </p>
    <p>
        年龄：{{age+1}}
    </p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                link: "<a href=''>百度</a>",
                data:"123",
                url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651719709&t=9ccab20168f90e1f5f4e6803e71f1c21",

                site:"百度",
                link2:"http://www.baidu.com",
                age:23
            }
        },
    }).mount("#app")
</script>
</body>
</html>

三元表达式

回顾js中三元表达式

根据true和false返回已登录和未登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
    <p>网站：<span v-html="link"></span></p>
    <p><input type="text" v-model="data"></p>
    <p><input type="text" v-model="msg"></p>
    <p><input type="text" :value="msg"></p>
    <p><img height="300" width="200" :src="url" alt=""></p>

    <p>
        <a :href="link2">{{site}}</a>
        网站名称<input type="text" v-model="site">
        url地址<input type="text" v-model="link2">
    </p>
    <p>年龄：{{age+1}}</p>
    <p>{{is_login?"已登录":"未登录"}}</p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                link: "<a href=''>百度</a>",
                data:"123",
                url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651719709&t=9ccab20168f90e1f5f4e6803e71f1c21",

                site:"百度",
                link2:"http://www.baidu.com",
                age:23,
                is_login:false
            }
        },
    }).mount("#app")
</script>
</body>
</html>

字符串反转

1 生成js的数组

2 数组反转再拼接

3 反转做调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <p>消息：{{msg}}</p>
    <p>网站：<span v-html="link"></span></p>
    <p><input type="text" v-model="data"></p>
    <p><input type="text" v-model="msg"></p>
    <p><input type="text" :value="msg"></p>
    <p><img height="300" width="200" :src="url" alt=""></p>

    <p>
        <a :href="link2">{{site}}</a>
        网站名称<input type="text" v-model="site">
        url地址<input type="text" v-model="link2">
    </p>
    <p>年龄：{{age+1}}</p>
    <p>{{is_login?"已登录":"未登录"}}</p>
    <p>{{citys}}</p>
    <p>{{citys.split(" ").reverse().join(",")}}</p>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                msg: "hello world",
                link: "<a href=''>百度</a>",
                data:"123",
                url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651719709&t=9ccab20168f90e1f5f4e6803e71f1c21",

                site:"百度",
                link2:"http://www.baidu.com",
                age:23,
                is_login:false,
                citys:"北京上海深圳广州"
            }
        },
    }).mount("#app")
</script>
</body>
</html>

综合练习3

下午07 Class属性操作

@click是vue语法

js是on-click

标签渲染

Value渲染

属性值渲染

模板语法支持js表达式

软件架构模式

单体架构

框架把模板取出，嵌入渲染

前后端分离

前端提供模板,后端提供数据接口

样式绑定-class属性操作

1 对象语法

我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class：

第一种常规写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .c1{
      color: red;
    }
    .c2{

    }
  </style>
</head>
<body>
<div id="app">
  <div class="c1 c2">HELLO VUE</div>
</div>
</body>
</html>

第二种：修改绑定样式

第三种 Obj

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
    <style>
        .c1 {
            color: red;
        }

        .c2 {

        }
    </style>
</head>
<body>
<div id="app">
    <div :class="{c1:true,c2:true}">HELLO VUE</div>
    <div :class="{c1:isC1,c2:isC2}">HELLO VUE2</div>
    <div :class="styleObj">HELLO VUE3</div>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                isC1: true,
                isC2: true,
                styleObj:{
                    //直接这样写不行
                    // color:"red",
                    c1:true,
                    c2:false
                }
            }
        }
    }).mount("#app")
</script>
</body>
</html>

2 数组语法

两套样式[styleObj1,styleObj2]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
    <style>
        .c1 {
            color: red;
        }

        .c2 {

        }
    </style>
</head>
<body>
<div id="app">
    <div :class="{c1:true,c2:true}">HELLO VUE</div>
    <div :class="{c1:isC1,c2:isC2}">HELLO VUE2</div>
    <div :class="styleObj">HELLO VUE3</div>
    <div :class="[styleObj1,styleObj2]">HELLO VUE4</div>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                isC1: true,
                isC2: true,
                styleObj:{
                    c1:true,
                    c2:false
                },
                styleObj1: {
                    c1:true
                },
                styleObj2: {
                    c2:true
                }
            }
        }
    }).mount("#app")
</script>
</body>
</html>

:style和:class

<div :style="styleObj">HELLO VUE3</div>

<div :class="[styleObj1,styleObj2]">HELLO VUE4</div>

var vm = Vue.createApp({
    data() {
        return {
            styleObj:{
                color:"red",
            },
            styleObj1: {
                c1:true
            },
            styleObj2: {
                c2:true
            }
        }
    }
}).mount("#app")

综合练习4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
    <style>
        .c1 {
            color: red;
        }
        .c2 {

        }
    </style>
</head>
<body>
<div id="app">
    <div :class="{c1:true,c2:true}">HELLO VUE</div>
    <div :class="{c1:isC1,c2:isC2}">HELLO VUE2</div>
    <div :style="styleObj">HELLO VUE3</div>
    <div :class="[styleObj1,styleObj2]">HELLO VUE4</div>
</div>
<script>
    // 数据驱动页面
    var vm = Vue.createApp({
        data() {
            return {
                isC1: true,
                isC2: true,
                styleObj:{
                    color:"blue",
                },
                styleObj1: {
                    c1:true
                },
                styleObj2: {
                    c2:true
                }
            }
        }
    }).mount("#app")
</script>
</body>
</html>

下午08

加：是v-bind简写

没有花括号是数据属性

{} 就跟数据属性没关系了

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
</head>
<body>
<div id="app">
  <h3>展示电影</h3>
  <div v-if="age>18">电影</div>
  <div v-else>青少年电影</div>
</div>
<script>
  // 数据驱动页面
  var vm=Vue.createApp({
    data(){
      return{
        age:17,

      }
    }
  }).mount("#app")
</script>
</body>
</html>

前后端分离，不再通过后端模板语法渲染。通过前端渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
    <style>
    </style>
</head>
<body>
<div id="app">
    <h3>展示电影</h3>
    <div v-if="age>18">电影</div>
    <div v-else>青少年电影</div>
    <h3>展示成绩</h3>
    <div v-if="score>90">优秀</div>
    <div v-else-if="score>80">良好</div>
    <div v-else-if="score>60">及格</div>
    <div v-else="score>80">不及格</div>
</div>

<script>
    //数据驱动页面
    var vm=Vue.createApp({
        data(){
            return{
                age:22,
                score:91
            }
        },
    }).mount("#app")
</script>
</body>
</html>

v-for

数组取值

有5本书，写死，只能展示4本

通过v-for遍历

索引

注意1 {{ }} 里边放一个变量

注意2 不要放在ul 否则意思是循环出来5个ul标签

作业思考打印价格大于200的书籍

练习1 v-for及索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
    <style>
    </style>
</head>
<body>
<div id="app">
    <h3>四大名著</h3>
    <p>{{books}}</p>
    <ul>
        <li v-for="(b,i) in books">{{i}}:::{{b}}</li>
    </ul>

</div>

<script>
    //数据驱动页面
    var vm=Vue.createApp({
        data(){
            return{
                books:["西游记","水浒传","三国演义","红楼梦"]
            }
        },
    }).mount("#app")
</script>
</body>
</html>

练习2 打印价格表

下午09 计算属性

操作数组数据

Vue3中v-if优先级高于v-for

先走if 再走for 不能打印出效果

template空匣子解决

注意序号有问题

官方推荐的，使用computed做处理

Methods方法处理

Computed 计算属性

methods和computed使用方法区别

methods方法，调用需要()

computed计算属性，只用写名字，不用括号就可以调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <h3>四大名著</h3>
    <p>{{books}}</p>
    <ul>
        <li>{{books[0]}}</li>
        <li>{{books[1]}}</li>
        <li>{{books[2]}}</li>
        <li>{{books[3]}}</li>
    </ul>
    <ul>
        
        <li v-for="(book,index) in books">{{index}}:::{{book}}</li>
    </ul>
    <table border="1">
        <tr>
            <td>序号</td>
            <td>书籍名称</td>
            <td>书籍价格</td>
        </tr>
        <tr v-for="(book,index) in books2">
            <td>{{index}}</td>
            <td>{{book.title}}</td>
            <td>{{book.price}}</td>
        </tr>
    </table>
    <p>方法：{{xxx()}}</p>
    <p>计算属性：{{yyy}}</p>
</div>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                books: ["西游记", "三国演义", "水浒传", "红楼梦"],
                books2: [{title: "西游记", price: "199"},
                    {title: "三国演义", price: "299"},
                    {title: "水浒传", price: "399"},
                    {title: "红楼梦", price: "499"}
                ]

            }
        },
        methods: {
            xxx() {
                return 200
            }
        },
        computed: {
            yyy() {
                return 300
            }
        }
    }).mount("#app")
</script>
</body>
</html>

回顾js中的filter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  // filter()高阶函数,对数组的每一个成员进行过滤，返回符合条件的结果
  var arr=[4,5,6,7,8];
  function func(num){ //也可以使用匿名函数或者箭头函数
    if (num%2===0){
      return num;
    }
  }
  var ret=arr.filter(func); //所有的函数名都可以作为参数传递到另一个函数中被执行
  console.log(ret)
</script>
</body>
</html>

回顾js中的Map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //map()对数据的每一个成员进行处理，返回处理后的每一个成员
  var arr=[1,2,3,4,5];
  // var ret=arr.map((num)=>{
  //   return num**3;
  // });
  var ret=arr.map(function (num){
    return num*num
  });
  console.log(ret); // [1, 8, 27, 64, 125]
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //map()对数据的每一个成员进行处理，返回处理后的每一个成员
  var arr=[1,2,3,4,5];
  // var ret=arr.map((num)=>{
  //   return num**3;
  // });
  var ret=arr.map(function (num){
    if (num!==3) {
      return num;
    }
  });
  console.log(ret); // [1, 2, undefined, 4, 5]
</script>
</body>
</html>

返回[1,2,undefined,4,5,6]

Vue中通过filter过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <h3>四大名著</h3>
    <p>{{books}}</p>
    <ul>
        <li>{{books[0]}}</li>
        <li>{{books[1]}}</li>
        <li>{{books[2]}}</li>
        <li>{{books[3]}}</li>
    </ul>
    <ul>
        
        <li v-for="(book,index) in books">{{index}}:::{{book}}</li>
    </ul>
    <table border="1">
        <tr>
            <td>序号</td>
            <td>书籍名称</td>
            <td>书籍价格</td>
        </tr>
        <tr v-for="(book,index) in filterBook2">
            <td>{{index}}</td>
            <td>{{book.title}}</td>
            <td>{{book.price}}</td>
        </tr>
    </table>
    <p>方法：{{xxx()}}</p>
    <p>计算属性：{{yyy}}</p>
    <p>filterBook2:{{filterBook2}}</p>
</div>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                books: ["西游记", "三国演义", "水浒传", "红楼梦"],
                books2: [{title: "西游记", price: "199"},
                    {title: "三国演义", price: "299"},
                    {title: "水浒传", price: "399"},
                    {title: "红楼梦", price: "499"}
                ]

            }
        },
        methods: {
            xxx() {
                return 200
            }
        },
        computed: {
            yyy() {
                return 300
            },
            filterBook2() {
                return this.books2.filter(function (item){
                    if (item.price>300){
                        return item
                    }
                });
            }
        }
    }).mount("#app")
</script>
</body>
</html>

打印结果

综合练习5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
</head>
<body>
<div id="app">
    <h3>四大名著</h3>
    <p>{{books}}</p>
    <ul>
        <li>{{books[0]}}</li>
        <li>{{books[1]}}</li>
        <li>{{books[2]}}</li>
        <li>{{books[3]}}</li>
    </ul>
    <ul>
        
        <li v-for="(book,index) in books">{{index}}:::{{book}}</li>
    </ul>
    <table border="1">
        <tr>
            <td>序号</td>
            <td>书籍名称</td>
            <td>书籍价格</td>
        </tr>
        <tr v-for="(book,index) in filterBook2">
            <td>{{index}}</td>
            <td>{{book.title}}</td>
            <td>{{book.price}}</td>
        </tr>
    </table>
    <p>方法：{{xxx()}}</p>
    <p>计算属性：{{yyy}}</p>
    <p>filterBook2:{{filterBook2}}</p>
</div>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                books: ["西游记", "三国演义", "水浒传", "红楼梦"],
                books2: [{title: "西游记", price: "199"},
                    {title: "三国演义", price: "299"},
                    {title: "水浒传", price: "399"},
                    {title: "红楼梦", price: "499"}
                ]

            }
        },
        methods: {
            xxx() {
                return 200
            }
        },
        computed: {
            yyy() {
                return 300
            },
            filterBook2() {
                return this.books2.filter(function (item){
                    if (item.price>300){
                        return item
                    }
                });
            }
        }
    }).mount("#app")
</script>
</body>
</html>

下午10 11 methods

示例1 弹窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
</head>
<body>
<div id="app">
  <p @click="foo">click</p>
</div>
<script>
  var vm=Vue.createApp({
    data(){
      return {

      }
    },
    methods:{
      foo(){
        alert(123)
      }
    }
  }).mount("#app")
</script>
</body>
</html>

示例2 无参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
</head>
<body>
<div id="app">
  <p @click="foo()">{{msg}}</p>
</div>
<script>
  var vm=Vue.createApp({
    data(){
      return {
        msg:"user01"
      }
    },
    methods:{
      foo(){
        this.msg="user02"
      }
    }
  }).mount("#app")
</script>
</body>
</html>

this指代的vm对象

示例3 有参数

课上问题methods中的this问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
</head>
<body>
<div id="app">
  <p @click="foo('user02')">{{msg}}</p>
</div>
<script>
  var vm=Vue.createApp({
    data(){
      return {
        msg:"user01",
        books2:["西游记","水浒传"]
      }
    },
    methods:{
      foo(name){
        this.msg=name;
        console.log(this)
        this.books2.filter(function (){
          console.log(":::",this)
        })
      }
    }
  }).mount("#app")
</script>
</body>
</html>

This在嵌套的函数中就是window对象了

显示2遍，是books2中两个数据

使用that或self替换下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
</head>
<body>
<div id="app">
  <p @click="foo('user02')">{{msg}}</p>
</div>
<script>
  var vm=Vue.createApp({
    data(){
      return {
        msg:"user01",
        books2:["西游记","水浒传"]
      }
    },
    methods:{
      foo(name){
        this.msg=name;
        console.log(this)
        var that=this;
        this.books2.filter(function (){
          console.log(":::",that)
        })
      }
    }
  }).mount("#app")
</script>
</body>
</html>

再点击验证

双击触发事件

练习示例：标签切换

下午12 讲解tab切换案例

1 拿到空模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tab {
      width: 800px;
      height: 300px;
      /*border: 1px solid rebeccapurple;*/
      margin: 200px auto;
    }

    .tab ul {
      list-style: none;
    }

    .tab ul li {
      display: inline-block;
    }

    .tab_title {

      border: 1px solid #eee;
      border-bottom: 1px solid #e4393c;
    }

    .tab .tab_title li {
      padding: 10px 25px;
      font-size: 14px;
    }

    .tab .tab_title li.active {
      background-color: #e4393c;
      color: #fff;
      cursor: default;
    }

    .tab_con li.hide {
      display: none;
    }
  </style>
</head>
<body>
<div class="tab">
  <ul class="tab_title">
    <li v-for="(tab_title,index) in tab_title_list">{{tab_title}}</li>
  </ul>
  <ul class="tab_con">
    <li v-for="(tab_con,index) in tab_con_list">{{tab_con}}</li>
  </ul>
</div>

<script>
  var vm=Vue.createApp({
    data(){
      return{
        tab_title_list: ["商品介绍","规格与包装","售后保障","商品评价"],
        tab_con_list: ["商品介绍...","规格与包装...","售后保障...","商品评价..."]
      }
    }
  }).mount(".tab")
</script>
</body>
</html>

查看控制台

2 class="active"就显示属性

<li :class="{active:true}" v-for="(tab_title,index) in tab_title_list">{{tab_title}}</li>

3 (重点）index分别为0 1 2 3

如何不让bool值写死

<li :class="{active:index===currentNum}" v-for="(tab_title,index) in tab_title_list">{{tab_title}}</li>

定义currentNum=0，相当于选中index===0为true

currentNum=1 相当于index===1为true

4 更改currentNum

点击 index对应的标签

<li @click="foo(index)" :class="{active:index===currentNum}" v-for="(tab_title,index) in tab_title_list">{{tab_title}}</li>

触发函数，修改currentNum值

5 显示选中标签对应的内容

:class="{hide:true}" 会隐藏所有。

:class="{hide:index===currentNum}" 会隐藏对应的内容

修改内容，取反

Index===currentNum隐藏改为取反不等于隐藏

6 最终代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tab {
      width: 800px;
      height: 300px;
      /*border: 1px solid rebeccapurple;*/
      margin: 200px auto;
    }

    .tab ul {
      list-style: none;
    }

    .tab ul li {
      display: inline-block;
    }

    .tab_title {

      border: 1px solid #eee;
      border-bottom: 1px solid #e4393c;
    }

    .tab .tab_title li {
      padding: 10px 25px;
      font-size: 14px;
    }

    .tab .tab_title li.active {
      background-color: #e4393c;
      color: #fff;
      cursor: default;
    }

    .tab_con li.hide {
      display: none;
    }
  </style>
</head>
<body>
<div class="tab">
  <ul class="tab_title">
    <li @click="foo(index)" :class="{active:index===currentNum}" v-for="(tab_title,index) in tab_title_list">{{tab_title}}</li>
  </ul>
  <ul class="tab_con">
    <li :class="{hide:index!==currentNum}" v-for="(tab_con,index) in tab_con_list">{{tab_con}}</li>
  </ul>
</div>

<script>
  var vm=Vue.createApp({
    data(){
      return{
        currentNum: 0,
        tab_title_list: ["商品介绍","规格与包装","售后保障","商品评价"],
        tab_con_list: ["商品介绍...","规格与包装...","售后保障...","商品评价..."]
      }
    },
    methods:{
      foo(index){
        console.log(index)
        this.currentNum=index
      }
    }
  }).mount(".tab")
</script>
</body>
</html>

下午13 侦听属性

Watch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
</head>
<body>
<div id="app">
  <p>{{num}}</p>
  <p><input type="text" v-model="num"></p>
</div>
<script>
    //数据驱动页面
    var vm=Vue.createApp({
      data(){
        return{
          num:100,
        }
      },
      watch:{
        num:function (newVal,oldVal){
          console.log("oldVal",oldVal);
          console.log("newVal",newVal);
        }
      }

    }).mount("#app")
</script>
</body>
</html>

密码为6位变成绿色

Class属性应用

引入tips先让=fail

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue3.js"></script>
  <style>
    .pass{
      outline-color: green;
    }
    .fail{
      outline-color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <p>{{num}}</p>
  <p><input type="text" v-model="num"></p>
  <p><input :class="tips" type="text" v-model="num"></p>
</div>
<script>
    //数据驱动页面
    var vm=Vue.createApp({
      data(){
        return{
          num:100,
          tips:"fail"
        }
      },
      watch:{
        num:function (newVal,oldVal){
          // console.log("oldVal",oldVal);
          // console.log("newVal",newVal);
          if (newVal.length>5){
            //边框样式变成绿色
            console.log(newVal.length,"OK")
            this.tips="pass"
          }else{
            //边框样式变成红色
            console.log(newVal.length,"no OK")
            this.tips="fail"
          }
        }
      }
    }).mount("#app")
</script>
</body>
</html>

下午14 生命周期

创建vm对象之前beforCreate 之后created

加载前 beformount，加载之后mounted

数据变化前beforeUpdate 数据变化后updated

生命周期

1 beforeCreate()

此时num为undefined

构建之前，有number，没有赋值给vm

先注释掉后面的，否则干扰

$el是指是否加载模板<div></div>

2 created() 在这里编写ajax代码

此时numb=0，已加载进去data数据

3 beforeMount()

加载视图模板之前此时num=10已经修改

模板准备加载num=10

4 mounted() 把data数据渲染到模板后

此时$el有值，加载过模板

$el是指是否加载模板<div></div>

num还没更新，看不出update效果

5 beforeUpdate()

vm = Vue.createApp({
  data() {
    return {
      num: 0,
    }
  },
  beforeCreate() {
    console.log("--------data数据被赋值到vm对象之前---------");
    console.log("this", this);
    console.log("num:", this.num);
    console.log("$el", this.$el);
  },
  created() { // 重点掌握，最常用，开发中一般会在这里编写ajax代码，发送http请求获取来自服务端的数据
    console.log("--------data数据被赋值到vm对象之后---------");
    console.log("this", this);
    console.log("num:", this.num);
    console.log("$el", this.$el);
    this.num = 10
  },
  beforeMount() {
    console.log("--------把data数据渲染到HTML模板之前---------");
    console.log("this", this);
    console.log("num:", this.num);
    console.log("$el", this.$el);
  },
  mounted() { // 重点掌握，最常用，开发中一般会在这里编写页面初始化的操作，一般就是根据条件/状态，进行页面跳转，改变页面的特效。
    console.log("--------把data数据渲染到HTML模板之后---------");
    console.log("this", this);
    console.log("num:", this.num);
    console.log("$el", this.$el.parentElement);
  },
  beforeUpdate() {
    console.log("--------data数据发生改变以后，同步到HTML模板之前，此时data和模板的数据是不一致的---------");
    console.log("this", this);
    console.log("num:", this.num);
    console.log("$el", this.$el.parentElement.innerHTML);
  },
  updated() {
    console.log("--------data数据发生改变以后，同步到HTML模板之后，此时data和模板中的数据保持一致---------");
    alert(123)
    console.log("this", this);
    console.log("num:", this.num);
    console.log("$el", this.$el.parentElement.innerHTML);
  }
}).mount('#app')

点击添加0，发生改变前

6 updated()

点击确定，加载进去

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="vue3.js"></script>
</head>
<body>
<div id="app">
  <p ref="p1">{{num}}</p>
  <input type="text" v-model="num">
</div>

<script>

  vm = Vue.createApp({
    data() {
      return {
        num: 0,
      }
    },
    beforeCreate() {
      console.log("--------data数据被赋值到vm对象之前---------");
      console.log("this", this);
      console.log("num:", this.num);
      console.log("$el", this.$el);
    },
    created() { // 重点掌握，最常用，开发中一般会在这里编写ajax代码，发送http请求获取来自服务端的数据
      console.log("--------data数据被赋值到vm对象之后---------");
      console.log("this", this);
      console.log("num:", this.num);
      console.log("$el", this.$el);
      this.num = 10
    },
    beforeMount() {
      console.log("--------把data数据渲染到HTML模板之前---------");
      console.log("this", this);
      console.log("num:", this.num);
      console.log("$el", this.$el);
    },
    mounted() { // 重点掌握，最常用，开发中一般会在这里编写页面初始化的操作，一般就是根据条件/状态，进行页面跳转，改变页面的特效。
      console.log("--------把data数据渲染到HTML模板之后---------");
      console.log("this", this);
      console.log("num:", this.num);
      console.log("$el", this.$el.parentElement);
    },
    beforeUpdate() {
      console.log("--------data数据发生改变以后，同步到HTML模板之前，此时data和模板的数据是不一致的---------");
      console.log("this", this);
      console.log("num:", this.num);
      console.log("$el", this.$el.parentElement.innerHTML);
    },
    updated() {
      console.log("--------data数据发生改变以后，同步到HTML模板之后，此时data和模板中的数据保持一致---------");
      alert(123)
      console.log("this", this);
      console.log("num:", this.num);
      console.log("$el", this.$el.parentElement.innerHTML);
    }
  }).mount('#app')
</script>

</body>
</html>

用的较多的created和mounted

加载页面，加载初始化值

下午15 ajax

发消息形式

同步请求，页面刷新（浏览器通过事件发起http请求）

1 地址栏 get

2 超链接a标签 get

3 form表单get post

异步局部刷新

Ajax请求（浏览器通过执行js代码发送的http请求）

JS代码

jQuery(ajax)

VUE（ajax）

React（ajax）

Ajax请求

1 点击按钮，请求弹窗

注意导入三个文件

天气预报的接口网站信息

http://wthrcdn.etouch.cn/weather_mini?city=北京

2 发送ajax请求，then接收响应

3 流程图

点击触发事件，执行ajax get

点击按钮，并没有刷新页面，页面没有转圈。此时是异步请求

练习，点击ajax，展示列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
    <script src="axios.min.js"></script>
</head>
<body>
<div id="app">
    <p><button @click="sendAjax">ajax</button></p>
    <p>{{forecast}}</p>
</div>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                forecast:[]
            }
        },
        methods: {
            sendAjax() {
                var that=this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini",{
                    params:{
                        city:"北京"
                    }
                }).then(function (response){
                    console.log("response",response)
                    that.forecast=response.data.data.forecast
                })
            },
        },
    }).mount("#app")
</script>
</body>
</html>

下午16 讲解练习

返回json数据，反序列化后的

1 增加数组，准备接收返回的对象

    return {
        forecast:[]
    }

2 页面加div展示数组

<div>{{forecast}}</div>

3 methods中添加 this.forecast=response 接收传到data中的forecast

this.forecast=response.data.data.forecast

4 处理this的问题

sendAjax() {
    var that=this
    // alert(123)
    axios.get("http://wthrcdn.etouch.cn/weather_mini",{
        params:{
            city:"北京"
        }
    }).then(function (response){
        console.log("response",response)
        that.forecast=response.data.data.forecast
    })
},

将天气数组展示到页面

点击ajax按钮才会显示，因为点击按钮才触发sendAjax函数请求

修改添加展示table标签

增加v-if

注意此处修改forecast为forecasts了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
    <script src="axios.min.js"></script>

</head>
<body>
<div id="app">
    <p> </p><button @click="sendAjax">ajax</button></p>

    <table border="1" v-if="forecasts.length>1">
        <tr>
            <td>日期</td>
            <td>天气</td>
            <td>最高气温</td>
            <td>最低气温</td>
            <td>风向</td>
        </tr>
        <tr v-for="day_forecast in forecasts">
            <td>{{day_forecast.date}}</td>
            <td>{{day_forecast.type}}</td>
            <td>{{day_forecast.high}}</td>
            <td>{{day_forecast.low}}</td>
            <td>{{day_forecast.fengxiang}}</td>
        </tr>
    </table>
</div>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                forecasts:[]
            }
        },
        methods: {
            sendAjax() {
                var that=this
                // alert(123)
                axios.get("http://wthrcdn.etouch.cn/weather_mini",{
                    params:{
                        city:"北京"
                    }
                }).then(function (response){
                    console.log("response",response)
                    that.forecasts=response.data.data.forecast
                })
            },
        }
    }).mount("#app")
</script>
</body>
</html>

调整pending 为10px

宽度width为80px

添加输入城市--局部刷新

添加input标签，通过v-model改变选择的城市

<p><input type="text" placeholder="请输入查询城市" v-model="city">
        <button @click="sendAjax">查询</button>
    </p>

methods中修改city:”北京”为v-model对应的city即this.city

methods: {
    sendAjax() {
        var that=this
        // alert(123)
        axios.get("http://wthrcdn.etouch.cn/weather_mini",{
            params:{
                // city:"北京"
                city:this.city
            }
        }).then(function (response){
            console.log("response",response)
            that.forecasts=response.data.data.forecast
        })
    },
}

默认显示

输入北京查询北京天气

修改data默认显示北京天气

默认没有显示？没有加载数据

刷新页面，立刻看到显示北京

created方法

created数据已经加载进去

Mounted也可以

created(){
this.sendAjax()
}

最终代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue3.js"></script>
    <script src="axios.min.js"></script>

    <style>
        tr td{
            padding: 10px;
            width:80px;
        }
    </style>
</head>
<body>
<div id="app">


    <p><input type="text" placeholder="请输入查询城市" v-model="city">
        <button @click="sendAjax">查询</button>
    </p>
    <table border="1" v-if="forecasts.length>1">
        <tr>
            <td>日期</td>
            <td>天气</td>
            <td>最高气温</td>
            <td>最低气温</td>
            <td>风向</td>
        </tr>
        <tr v-for="day_forecast in forecasts">
            <td>{{day_forecast.date}}</td>
            <td>{{day_forecast.type}}</td>
            <td>{{day_forecast.high}}</td>
            <td>{{day_forecast.low}}</td>
            <td>{{day_forecast.fengxiang}}</td>
        </tr>
    </table>
</div>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                forecasts:[],
                city:"北京"
            }
        },
        methods: {
            sendAjax() {
                var that=this
                // alert(123)
                axios.get("http://wthrcdn.etouch.cn/weather_mini",{
                    params:{
                        // city:"北京"
                        city:this.city
                    }
                }).then(function (response){
                    console.log("response",response)
                    that.forecasts=response.data.data.forecast
                })
            },
        },
        created(){
            this.sendAjax()
        }
    }).mount("#app")
</script>
</body>
</html>

posted @ 2022-04-05 20:08 澐湮阅读(13) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

澐湮