前端开发Vue框架–(一)

前端开发Vue框架–(一)Vue框架:"官网"为什么要学习vueVue导读如何使用Vue​ 官网下载后导入Vue实例1.实例成员挂载点(el:实例)vue如何与HTML页面结构建立关联:通过挂载点注意:html和body不能作为挂载点一个vue对象挂载点只能索引一个匹配结果,就算有

大家好,欢迎来到IT知识分享网。前端开发Vue框架--(一)"

Vue框架:官网

vue框架:渐进式JavaScript框架
	vue一个环境:可以只控制页面中一个标签、或者控制一组标签、再或者控制整个页面、也可以直接控制整个项目
	vue可以根据实际需求,选择控制前端项目的区域范围

为什么要学习vue

'''
1. html、css、js直接开发项目,项目杂乱,不方便管理,要采用前端框架进行开发,规范项目
2. Angular、React、Vue三个前端框架,Vue框架吸取前两个框架所有优点,摒弃缺点,且一手文档是中文
3. Vue框架优点:
	轻量级
	数据驱动
	数据的双向绑定
	虚拟DOM(嵌套页面架构的缓存)
	组件化开发
	由全球社区维护
	
	单页面应用、MVVM设计模式(前面我们还学过 MVC模式、MTV模式)
'''

Vue导读

1.Vue框架
	vue是可以独立完成前后端分离式web项目的js框架
	三大主流框架之一:Angular、React、Vue
	vue:结合其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用
	Vue环境:本地导入或cdn导入
2.Vue是渐进式js框架
	通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目

如何使用Vue

​ 官网下载后导入

<div id="app">
    {{ }}
</div>
<script src="js/vue.min.js"></script>  // 导入vue
<script>
    new Vue({
        el: '#app'
    })
</script>

Vue实例

1.实例成员–挂载点(el:实例)
vue如何与HTML页面结构建立关联:通过挂载点

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue导入</title>
</head>
<body>
<div id="app">
    <hr>
    <p class="p1">{{ }}</p>
    <hr>
    <p class="p1">{{ }}</p>
    <hr>
    <p id="p">
        <b>{{ }}</b>
        <i>{{ }}</i>
    </p>

</div>
</body>
<!--vue导入-->
<script src="代码/js/vue.js"></script>
<script>
    console.log(Vue);
    new Vue({
        el: '.p1', // 只能解析一个
    // });
    // new Vue({
    //     el: '.p2'
    // })
    //  new Vue({
    //     el: '#p'
    })


    // new Vue({
    //     el: '#app'
    // })
    // el 为挂载点,载有css3选择器语法与页面标签进行绑定,决定该 Vue对象控制的页面范围
    // 1. 挂载点只检索页面中第一个匹配到的结果,就算有几个类名相同,也只能匹配一个,所以挂载点一般都采用id选择器
    // 2. html与body标签不可以作为挂载点(组件中解释)
    // 3. 一个页面可以出现多个实例对应多个挂载点
    // 4. 实例只操作挂载点内部内容
</script>
</html>

注意:

  • html和body不能作为挂载点
  • 一个vue对象挂载点只能索引一个匹配结果,就算有几个类名取一样的,也是只能匹配第一个,所以挂载点一般用id标识。
  • 一个页面中可以出现多个实例对应多个挂载点
  • 实例只操作挂载点内部内容

JS对象(字典)补充

let b = 20
let dic = {
		a: 10,  //字典本身就是对象,key都是字符串形式可以省略引号
	//	b: b ,  //简写为以下形式
		b       //注意:当值为变量时,且与key同名, 可以简写以上形式
};
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>

</head>
<body>

</body>
<script src="代码/js/vue.js/"></script>
<script>
    let b = 20;
    let dic = {
        a: 10,
        b
    };
    console.log(dic)  // {a: 10, b: 20}
</script>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>js的对象</title>
</head>
<body>

</body>
<script src="js/vue.js"></script>
<script>
    // 1.js中没有字典,只要对象类型,可以把对象当做字典来使用
    // 2.key本质是属性名,所以都是字符串类型(可以出现1,true),其实都是省略引号的字符串

    let sex = '男';
    let dic = {
        'name': 'Owen',
        1: 100,
        true: 12345,
        age: 18,
        // sex: 'sex',
        sex,
    };
    console.log(dic['name']);
    console.log(dic['1']);
    console.log(dic['true']);
    console.log(dic['age']);
    console.log(dic.sex);

    dic.price = 3.5;
    console.log(dic.price);

    // 声明类创建对象,类可以实例化n个对象,哪个对象调用,this就代表谁
    function People(name, age) {
        this.name = name;
        this.age = age;
        this.eat = function () {
            console.log(this.name + '在吃饭');
            return 123
        }
    }
    let p1 = new People('Owen', 17.5);
    console.log(p1.name);
    let res = p1.eat();
    console.log(res);

    // 直接声明对象,{}内的key都属于当前对象的
    // {}中的方法通常会简写
    let stu1 = {
        name: '张三',
        age: 18,
        // eat: function () {
        //     console.log(this.name + '在吃饭');
        // }
        eat () {
            console.log(this.name + '在吃饭');
        }
    };
    stu1.eat()

    // 总结:
    // 1.{}中直接写一个变量:key与value是同名,value有该名变量提供值
    // 2.es5下,所有的函数都可以作为类,类可以new声明对象,在函数中用 this.资源 为声明的对象提供资源
    // 3.{}中出现的函数叫方法,方法可以简写 { fn: function(){} } => { fn(){} }
</script>
</html>

实例成员–变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <title>变量</title>

</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>   // 设置变量
        <p>{{ info }}</p>
    </div>
    <div id="main">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
    </div>
</body>
<script src="代码/js/vue.js"></script>
<script>
    // 实例成员中的 data是为vue页面模板提供数据变量的
    let app =new Vue({
        el: '#app',
        data:{
            msg: '我是变量msg',
            info: '我是变量info'
        }
    });  // data 为定义的变量提供数据

    let main = new Vue({
        el: '#main',
        data: {
            msg: 'msg',
            info: 'info'
        }
    });

    console.log(app.msg);  // 我是变量msg
    console.log(main.info);

    // 创建vue实例用:(new Vue),传进去的字典(对象)的Key,称之为vue实例成员(变量)
    // 访问实例成员,用 vue实例.$成员名, eg: app.$el
    console.log(app.$el);
    console.log(app.$data);
    console.log(app.$data.info) //我是变量info
</script>
</html>

实例成员–数据(data:数据)

1.实例成员data为vue环境提供数据,数据采用字典{}形式
2.显示数据的时候在插值表达式{{ }}中,直接书写数据的key来访问数据
3.如果需要在外部获取数据可以通过接受实例的变量app(标签id值或者class值),访问实例成员(实例成员用$开头),间接访问数据; eg: app.$data.info
4.在外部获取数据也可以通过实例变量app(标签id值或者class值)直接访问数据; eg: app.info
5.在vue实例内部的方法methods中,使用 this.info 访问数据(this其实就相当于app)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
   <title>实例成员数据</title>
</head>
<body>
    <div id="app">
        <!--{{ }} 是插值表达式,里面的 info、msg等是 vue 的变量-->
        <p>{{ info }}</p>
        <p>{{ msg }}</p>
        <p>{{ num }}</p>
        <p>{{ arr }}</p>
        <p>{{ dic }}</p>
    </div>
</body>
<script src="代码/js/vue.js/"></script>
<script>
    let app = new Vue({     // 用let 取一个变量名app, 方便外面取值
        el: '#app',
        data: {
            info: '我是值info',
            msg: 'message',
            num: 100,
            arr: [1, 2, 3, 4],
            dic: {
                name: 'Owen', age: 18
            }
        }
    });
</script>
<script>
    console.log(app);
    console.log(app.$data.num) ; //100 间接访问数据
    console.log(app.num)         // 100 直接访问数据
</script>
</html>

实例成员–过滤器

1.过滤器本身就是数据处理函数,可以将插值表达式中的数据作为参数进行处理,得到的函数返回值就是处理后的结果
2.过滤器的使用语法{{ ...变量 | 过滤器(...变量)}}  # ()里面的变量可以全部写在前面的变量中
3.过滤器在实例中用filters成员提供
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset='UTF-8'>
    <title>过滤器</title>
</head>
<body>
    <div id="app">
        <!--默认将msg作为参数传给filterFn-->
        <p>{{ msg | filterFn }}</p>

        <!--过滤器串联-->
        <p>{{ num | f1 | f2 }}</p>

        <!--过滤器可以同时多个变量进行过滤,变量用,分割,过滤器还可以额外传入参数辅助过滤-->
        <!--过滤器方法接收所有传入的参数,按传入的位置进行接收-->
        <p>{{ msg, num | f3(666, '好的') }}</p>
    </div>
</body>
<script src="代码/js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '文本内容',
            num: 1
        },
        filters: {
            filterFn(v1,v2){
                // console.log(v1);
                // console.log(v2);
                return `<b>${v1}</b>`  // <b>文本内容</b>
                // return v1
            },
            f1(v1){
                return v1 * 100;  //100
            },
            f2(v1){
                return v1 * 100;  //10000
            },
            f3(v1, v2, v3, v4){
                console.log(v1);  //文本内容
                console.log(v2);  // 1
                console.log(v3);  //666
                console.log(v4);  //好的
            }
        },

    });

</script>
</html>
<div id="app">
  <!--插值表达式也可以直接做简单运算-->
  <p>{{num*2}}</p>        #200
  <p>{{num | f1 }}</p>    #101
  <p>{{10,20,30,40 | f2 }}</p>  #100
  <p>{{10,20 | f2(30,40) }}</p>  #100
  <p>{{ 120 | f2 }}</p>   #NaN               <!--120 undefined undefined undefined-->

</div>

<script src="js/vue.min.js"></script>
<script>
  new Vue({
      el:'#app',
      data:{
          num:100
      },
      filters:{
          f1(num){
             return num+1
          },
          f2:function (a,b,c,d) {
              console.log(a,b,c,d);
              return a+b+c+d
          }
      }
  })
</script>

vue指令

1.文本指令 v-text/v-html

1.插值表达式同 v-text 指令,渲染普通文本
2.v-html 指令可以渲染有html语法的文本,能够解析html语法
3.文本指令中可以渲染变量也可以渲染常量
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset='UTF-8'>
    <title>文本指令</title>
</head>
<body>
    <div id="app">
        <!--插值表达式,能够完成变量渲染,变量基础运算,变量方法调用,不能完成复杂运算(一步解决不了的,不能出现)-->
        <p>{{ msg }}</p>
        <p>{{ msg + '拼接内容' }}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.slice(2,4) }}</p>

        <hr>
        <!--v-text:将所有内容做文本渲染-->
        <p v-text="msg + '拼接内容'"></p>

        <!--v-html: 可以解析html语法标签的文本-->
        <p v-text="'<b>' + msg + '</b>'"></p>  <!--v-text无法渲染标签-->
        <P v-html="'<b>' + msg + '</b>'"></P>

        <p v-text="`<b>${msg}</b>`"></p>
        <p v-html="`<b>${msg}</b>`"></p>
    </div>
</body>
<script src="代码/js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '文本指令',
        }
    })
</script>
</html>
<div id="app">
    <p>{{ info }}</p>

    <!--1)v-指令名="变量",变量是需要data提供数据值的  -->
    <p v-text="info"></p>
    <!--2)v-指令名="常量",常量采用常量基本的语法,数字与布尔类型等可以直接书写的直接书写,字符串等需要特殊符号的需要添加符号-->
    <p v-text="123"></p>
    <p v-text="true"></p>
    <p v-text="'abc' + info"></p>
    <p v-text="[1, 2, 3]"></p>

    <!--3)v-html可以解析html语法-->
    <p v-html="`<b style='color:red'>好的</b>`"></p>
    <p v-text="'<b>好的</b>'"></p>   
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            info: 'data提供的数据',
        }
    })
</script>

事件指令 v-on (v-on重点需要记住是可以简写成@格式,并需要记住语法格式)

1.语法:v-on:事件名='函数名(参数们)'
2.简写:@事件名='函数名(参数们)'
3.用 methods 实例成员提供事件函数的实现
4.事件传参:函数名 | 函数名() | 函数名(自定义参数) | 函数名($event,自定义参数)
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            /*页面文本不允许选择*/
            user-select: none;
        }
        .low-num {
            cursor: pointer;
        }
        .low-num:hover {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 事件指令:v-on:事件名="事件函数名"   -->
        <p class="low-num" v-on:click="lowNum">
            <span>点击减一:</span>
            <span>{{ num }}</span>
        </p>

        <p v-on:dblclick="dblAction">双击</p>

        <!-- v-on:事件名="事件函数" 可以简写为 @事件名="事件函数"  -->
        <p @mouseover="overAction()">悬浮</p>
        <p @mouseover="overAction(10)">悬浮1</p>
        <p @mouseover="overAction(10, 20)">悬浮2</p>
        <p @mouseover="overAction(10, 20, $event)">悬浮3</p>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            num: 99
        },
        methods: {
            lowNum: function () {
                // 在vue实例内部的方法中,使用变量
                // alert(this.num)
                this.num -= 1;
            },
            dblAction (ev) {
                // alert('双击事件');
                console.log(ev)
            },
            overAction(a, b, c) {
                console.log(a, b, c)
            }
        }
    })
</script>

</html>
v-on:click='事件函数名'       鼠标点击事件
v-on:dbclick='事件函数名'    双击事件
v-mouseover='事件名函数'    鼠标悬浮事件
事件的两种写法:
1. v-on:事件名='事件函数名'
2.@事件名='事件函数名'


事件传参的四种方法:
1.@事件 = '事件函数'     默认传入事件对象 $event
2.@事件 = '事件函数()'    不传递任何参数
3.@事件 = '事件函数(参数1,参数2,...)'      只传递自定义参数
4.@事件 = '事件函数($event,参数1,参数2...)'      自定义传参是传递事件对象
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <title>事件</title>
    <style>
        body{
            /*页面不运行被选中*/
            user-select: none;
        }
        .p1:hover{
            cursor:  pointer;
            color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="p1" v-on:click="fn">这是一个段落,被点击了{{ count }}次</p>
        <p class="p2" v-on:mouseover="overAction" v-on:mouseout="outAction">该标签被{{ action }}</p>

        <div  v-on:mouseover="overAction" v-on:mouseout="outAction">div被{{ action }}</div>
    </div>
</body>
<script src="代码/js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            count: 0,
            action: '渲染',
        },
        //methods是为vue实例提供事件函数的
        methods:{
            fn: function () {
                // app.count ++
                this.count ++   //this代表当前该vue实例对象
            },
            overAction: function () {
                this.action = '悬浮'
            },
            outAction: function () {
                this.action = '离开'
            }
        }
    })
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <title>事件指令</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--时间指令:v-on:事件名='事件函数'-->
        <!--简写:@事件名='事件函数'-->
        <p v-on:click="f1">被点击了{{ count }}下</p>
        <hr>
        <p @click="f2">{{ p2 }}</p>
        <hr>

        <!--绑定事件函数可以添加(),添加括号就代表要传递参数-->
        <ul>
            <li @click="f3(100)">{{ arr[0] }}</li>
            <li @click="f3(200)">{{ arr[1] }}</li>
            <li @click="f3(300)">{{ arr[2] }}</li>
        </ul>
        
        <ul>
            <li @click="f4(0)">{{ arr[0] }}</li>
            <li @click="f4(1)">{{ arr[1] }}</li>
            <li @click="f4(2)">{{ arr[2] }}</li>
        </ul>
        <hr>

        <!--绑定的事件函数如果没有传递参数,默认传入 事件对象-->
        <div class="box" @click="f5"></div>
        <hr>

        <!--事件函数一旦添加传参(),系统就不再传递任何参数,需要事件对象时,可以手动传入$event-->
        <div class="box" @click="f6(10, $event)"></div>
    </div>
</body>
<script src="代码/js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count:0,
            p2: '第二个p',
            arr: [1, 2, 3]
        },
        methods:{
            f1 () {
            this.count ++
        },
            f2() {
                console.log(this.p2)
            },
            f3(num) {
                console.log(num)
            },
            f4(index) {
                console.log(this.arr[index])
            },
            f5(ev, b) {
                console.log(ev);
                console.log(b);
            },
            f6(num, ev) {
                console.log(num);
                console.log(ev);
            }
        },

    })
</script>
</html>

属性指令 v-bind (需要注意的是style、class属性设置)

1.语法: v-bing:属性名='变量'
2.简写: :属性名='变量'
3.单值属性绑定:  :title='变量'  |   :id='变量'   |  :自定义属性='变量'
4.style属性绑定   :style='字典变量'   |   :style='{css属性1:变量1, ..., css属性n: 变量n}'
5.class属性绑定:   :class='变量'   |   :class='[变量1,...,变量n]'  | :class='{类名: 布尔变量}'
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
    <style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box1 {
            width: 150px;
            height: 150px;
            background-color: darkturquoise;
            transition: .3s;
        }
        .box2 {
            width: 300px;
            height: 100px;
            background-color: darkgoldenrod;
            transition: .3s;
        }

        .circle {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--1.下方的class、id、title、abc等是div标签的属性,属性指令就是控制它们的-->
        <div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
        <!--2.属性指令:v-bind:属性名="变量",简写方式 :属性名="变量" -->

        <!--3.属性指令操作 style 属性-->
        <div style="width: 200px;height: 200px;background-color: greenyellow"></div>
        <!-- 通常:变量值为字典 -->
        <div :style="mys1"></div>
        <!-- 了解:{中可以用多个变量控制多个属性细节} -->
        <div :style="{width: w,height: '200px',backgroundColor: 'deeppink'}"></div>


        <!--重点:一般vue都是结合原生css来完成样式控制 -->
        <!--<div :class="c1"></div>-->

        <!--class可以写两份,一份写死,一份有vue控制-->
        <div class="box1" :class="c2"></div>

        <!--{}控制类名,key为类名,key对应的值为bool类型,决定该类名是否起作用-->
        <div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>


        <!--[]控制多个类名-->
        <div :class="[c3, c4]"></div>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            title: '12345',
            xyz: 'opq',
            mys1: {
                width: '200px',
                height: '200px',
                // 'background-color': 'greenyellow'
                backgroundColor: 'pink',
            },
            w: '200px',
            c1: 'box1',
            c2: 'circle',
            cable: false,
            c3: 'box1',
            c4: 'circle'
        },
        methods: {
            changeCable(n) {
                this.cable = n;
            }
        }
    });

    setInterval(function () {
        // app.c1 = app.c1 === 'box1' ? 'box2' : 'box1';
        if (app.c1 === 'box1') {
            app.c1 = 'box2';
        } else {
            app.c1 = 'box1';
        }
    }, 300)


</script>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
    <style>
        [index] {
            color: orange;
        }

        .ccc {
            background-color: yellowgreen;
            color: greenyellow;
            border-radius: 50%;
        }
        .ccc1 {
            background-color: yellowgreen;
        }
        .ccc2 {
            color: greenyellow;
        }
        .ccc3 {
            border-radius: 50%;
        }

        .ttt {
            background-color: gold;
            color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--1) 语法:v-bind:属性名="变量" -->
        <p id="p1" class="p1" style="" title="" index="">属性指令1</p>
        <p id="p2" v-bind:class="p1" style="" title="" index="">属性指令2</p>

        <p v-bind:index="p1">自定义属性也可以被vue绑定1</p>
        <!--2) v-bind:属性名="变量" 简写 :属性名="变量" -->
        <p :index="p1">自定义属性也可以被vue绑定2</p>
        <p :title="'文本提示'">悬浮文本提示</p>

        <!--3) style样式属性绑定 -->
        <p :style="myStyle">样式绑定1</p>
        <p :style="{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2</p>

        <!--4) class类属性绑定 -->
        <p :class="myc1">样式绑定3</p>
        <p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p>
        <!--xxx是类名,是否起作用有布尔类型变量yyy值决定 -->
        <p :class="{xxx:yyy}">样式绑定5</p>


        <!--案例:点击切换类名是否起作用-->
        <p @click="clickAction" :class="{ttt:yyy}">点击切换类</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            p1: 'q1',
            myStyle: {       #style样式属性绑定
                backgroundColor: 'pink',
                color: 'deeppink',
                'border-radius': '50%'
            },
            c1: 'cyan',
            c2: 'tan',
            myc1: 'ccc',   #class类属性绑定
            myc2: 'ccc1',
            myc3: 'ccc2',
            myc4: 'ccc3',
            yyy: true,  // false
        },
        methods: {
            clickAction() {
                this.yyy = !this.yyy;
            }
        }
    })
</script>
</html>

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/32102.html

(0)
上一篇 2023-11-17 17:45
下一篇 2023-11-19 22:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信