美文网首页
01Vue基本使用与模板语法

01Vue基本使用与模板语法

作者: 攻城老狮 | 来源:发表于2021-01-31 20:59 被阅读0次

Vue基本使用与模板语法

一. 基本使用

  1. Hello World快速入门
说明：
1.实例参数
    el:元素挂载的位置
    data:模型数据
2.插值表达式的用法 {{ }}
    将数据填充到html标签中
    插值表达式支持基本的计算操作 
3.Vue运行原理
    Vue语法----Vue框架---->原生js语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script  src="js/vue.js"></script>
    <script >
        $(function(){
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "Hello World"
                }
            });
        });
    </script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{msg + "----" + 123}}</div>
        <div>{{1 + 2}}</div>
    </div>
</body>
</html>

二. 模板语法

指令

  1. 概述

指令的本质就是自定义属性，格式：以v-开头(例如：v-cloak)

  1. v-cloak指令

解决插值表达式存在闪动的问题。原理：先隐藏表达式的原始内容，替换好值之后再显示最终替换结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script  src="js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <script >
        $(function(){
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "Hello World"
                }
            });
        });
    </script>
</head>
<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
</body>
</html>
  1. v-text,v-html和v-pre指令
说明：
v-text指令：与插值表达式作用基本相同，但是不存在闪动问题且书写比较简单。(测试：若增加过滤器则好像只能用插值表达式)
v-html指令：会填充html片段，但存在XSS攻击问题，访问网站内部可以使用
v-pre指令：会显示原始信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script  src="js/vue.js"></script>
    <script >
        $(function(){
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "Hello World",
                    msgHtml: "<h2>Hello Vue</h2>"
                }
            });
        });
    </script>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-text="msg"></div>
        <div v-html="msgHtml"></div>
        <div v-pre>{{msg}}</div>
    </div>
</body>

</html>
  1. 数据响应式与 v-once指令
说明：
数据响应式：数据的变化会导致网页相应的内容也随之变化，与HTML5中的响应式不同
数据绑定：将数据填充到标签中
v-once指令：只会编译一次，不再具有响应式功能，使得Vue不再监听该数据，提高性能

下述程序，在页面可以通过 vm.msg = 123 将填充msg标签中的值改变，而填充info的标签不会因vm.info = 123 发生变化。

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

<body>
    <div id="app">
        <div v-text="msg"></div>
        <div v-once v-text="info"></div>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello World",
                info: "Hello Vue"
            }
        });
    </script>
</body>
</html>

双向数据绑定

  1. 概念

双向数据绑定，当页面修改时数据会发生变化，而数据变化页面也会做出相应改变。

  1. v-model指令

通过v-model指令可以实现与数据的双向绑定操作，下述代码当修改input中的内容时，对应的msg数据也会发生改变。

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

<body>
    <div id="app">
        <div v-text="msg"></div>
        <div>
            <input type="text" v-model="msg">
        </div>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello World"
            }
        });
    </script>
</body>

</html>
  1. MVVM思想
说明：
M：Model
V：View
VM：View-Model
视图与模型相互分离，通过Vue相互关联。视图通过事件监听关联模型。模型通过数据绑定关联视图。

事件绑定

  1. Vue处理事件
说明：
v-on指令
    例： <button v-on:click="num++">点击1</button>
v-on指令的简写 @
    例：<button @click="num++">点击2</button>

点击按钮实现num++的操作。

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

<body>
    <div id="app">
        <div v-text="num"></div>
        <button v-on:click="num++">点击1</button>
        <button @click="num++">点击2</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            }
        });
    </script>
</body>

</html>
  1. 事件函数的调用方式
1.直接绑定函数名称
    例：<button @click="handle">点击1</button>
2.调用函数
    例：<button @click="handle()">点击2</button>

本例通过将num++的操作抽取为函数的形式，绑定的函数需要在Vue的构造的methods属性中声明，另外需要注意在其中的this指向当前Vue对象vm。

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

<body>
    <div id="app">
        <div v-text="num"></div>
        <button @click="handle">点击1</button>
        <button @click="handle()">点击2</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods:{
                handle: function(){
                    this.num++;
                }
            }
        });
    </script>
</body>

</html>
  1. 事件函数的参数传递
说明：
1.若无需传参则采用第一种直接绑定函数名称的方式更为简单，若需要传参则只能使用第二种调用函数的方式。
2.直接绑定函数名称的方式默认把事件对象(event)作为第一个参数传递。
3.调用函数的方式若要传递事件对象则必须放在最后一个参数的位置传递，并且名称为$event

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

<body>
    <div id="app">
        <div v-text="num"></div>
        <button @click="handle1">点击1</button>
        <button @click="handle2(233,666,$event)">点击2</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods:{
                handle1: function(event){
                    console.log(event);
                },
                handle2: function(p1,p2,event){
                    console.log(p1,p2);
                    console.log(event);
                }
            }
        });
    </script>
</body>

</html>
  1. 事件修饰符
说明：用于简化原生js的代码操作，原本需要通过事件对象中的方法调用。另外修饰符可以串联使用。
.stop阻止冒泡
.prevent阻止默认行为

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

<body>
    <div id="app">
        <div v-text="num"></div>
        <div @click="bundle0">
            <button @click.stop="bundle1">点击</button>
        </div>
        <a href="http://www.baidu.com" @click.prevent="bundle2">百度</a>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script> 
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods:{
                bundle0:function(){
                    this.num++;
                },
                bundle1:function(event){
                    //传统方法阻止冒泡
                    //event.stopPropagation();
                },
                bundle2:function(event){
                    //传统方法阻止默认行为
                    //event.preventDefault();
                }
            }
        });
    </script>
</body>

</html>
  1. 按键修饰符
说明：
.enter 回车键
.delete 删除键

通过按回车键实现触发表单的提交，通过按delete键实现对用户名输入文本框内容的清除操作。

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

<body>
    <div id="app">
        <form>
            <input type="text" v-on:keyup.delete="clearUname" v-model="uname">
            <input type="password" v-on:keyup.enter="handleSubmit" v-model="pwd">
            <input type="button" value="提交" v-on:click="handleSubmit">
        </form>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                uname: "",
                pwd: ""
            },
            methods: {
                handleSubmit: function(){
                    console.log(this.uname,this.pwd);
                },
                clearUname: function(){
                    this.uname = "";
                }
            }
        });
    </script>
</body>

</html>
  1. 自定义按键修饰符
说明：自定义按键修饰符是自定义的，对应的绑定值为使用事件对象 event.keyCode获取的值
语法：Vue.config.keyCodes.自定义名称 = 事件对象中按键的数值
也可以不定义名称，直接使用按键数值，但不直观

给按键绑定按a的修饰符

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

<body>
    <div id="app">
       <input type="text" v-on:keyup.aaa="handle" v-model="info">
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        Vue.config.keyCodes.aaa = 65;
        var vm = new Vue({
            el: "#app",
            data:{
                info: ""
            },
            methods:{
                handle: function(event){
                    console.log(event.keyCode);
                }
            }
        });
    </script>
</body>

</html>

案例

实现加法计算的简单计算器功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>简单计算器</h1>
    <div>
      <span>数值A:</span>
      <span>
        <input type="text" v-model="num1">
      </span>
    </div>
    <div>
      <span>数值B:</span>
      <span>
        <input type="text" v-model="num2" v-on:keyup.enter="handle">
      </span>
    </div>
    <div>
      <button v-on:click="handle">计算</button>
    </div>
    <div>
      <span>计算结果:</span>
      <span v-text="result"></span>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      简单计算器案例 
    */
    var vm = new Vue({
      el:"#app",
      data:{
        num1:"",
        num2:"",
        result:""
      },
      methods: {
        handle: function(){
          this.result = parseInt(this.num1) + parseInt(this.num2);
        }
      }
    });
  </script>
</body>
</html>

属性绑定

  1. Vue动态处理属性
说明：
1.v-bind指令可以动态绑定属性
    例：<a v-bind:href="url">网页链接1</a>
2.v-bind可以缩写，当把v-bind去掉即为缩写形式
    例：<a :href="url">网页链接2</a>

通过v-bind指令动态绑定a标签的href属性，按键可以动态切换href的属性值。

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

<body>
    <div id="app">
      <a v-bind:href="url">网页链接1</a>
      <a :href="url">网页链接2</a>
      <button v-on:click="handle">切换</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                url: "http://www.baidu.com"
            },
            methods: {
                handle: function(){
                    this.url = "http://62.234.149.220";
                }
            }
        });
    </script>
</body>

</html>
  1. v-model的底层实现原理

v-model指令双向绑定的实现是依赖于 v-bind 和 v-on 指令。通过上两个指令可以间接实现双向绑定的效果。

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

<body>
    <div id="app">
        <div v-text="msg"></div>
        <input type="text" v-bind:value="msg" v-on:input="handle">
        <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
        <input type="text" v-model="msg"> 
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello World"
            },
            methods: {
                handle: function(event){
                    //将event事件中的value属性动态赋值给msg
                    this.msg = event.target.value;
                }
            }
        });
    </script>
</body>

</html>

样式绑定

  1. class样式处理
说明：
1.对象语法
    例：<div v-bind:class="{active:isActive,error:isError}">测试div</div>
2.数组语法
    例：<div v-bind:class="[activeClass,errorClass]">测试div</div>

通过对象语法控制样式的显示与否，可以通过按键动态控制div的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="{active:isActive,error:isError}">测试div</div>
        <button v-on:click="handle">切换</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isActive: true,
                isError: false
            },
            methods: {
                handle: function(){
                    this.isActive = !this.isActive;
                    this.isError = !this.isError;
                }
            }
        });
    </script>
</body>

</html>

通过数组语法控制样式的显示与否，可以通过按键动态控制div的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="[activeClass,errorClass]">测试div</div>
        <button v-on:click="handle">切换</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                activeClass: "active",
                errorClass: "error"
            },
            methods: {
                handle: function(){
                    this.activeClass = "";
                    this.errorClass = "";
                }
            }
        });
    </script>
</body>

</html>
  1. 样式绑定细节
1.对象绑定和数组绑定可以结合使用
2.class绑定的值可以简化
3.默认的class会保留

实例：div1说明数组和对象绑定可以结合使用，div2说明数组绑定的简化，div3说明对象绑定的简化，div4说明原class会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: aqua;
        }
        .test{
            color: blue;
        }
        .base{
            font-size: large;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="[activeClass,errorClass,{test:isTest}]">测试div1</div>
        <div v-bind:class="arrClass">测试div2</div>
        <div v-bind:class="objClass">测试div3</div>
        <div class="base" v-bind:class="[activeClass,errorClass]">测试div4</div>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                activeClass: "active",
                errorClass: "error",
                isTest: true,
                arrClass: ["active","error"],
                objClass: {
                    "active":true,
                    "error":true
                }
            },
        });
    </script>
</body>

</html>
  1. style内联样式处理
对象绑定：
1. <div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
2.简化 <div v-bind:style="objStyle"></div>

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

<body>
    <div id="app">
        <div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
        <div v-bind:style="objStyle"></div>
        <button v-on:click="handle">切换</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
               borderStyle: "1px solid red",
               widthStyle: "100px",
               heightStyle: "200px",
               objStyle: {
                   "border": "1px solid green",
                   "width": "200px",
                   "height": "100px"
               }
            },
            methods: {
                handle: function(){
                    this.heightStyle = "100px";
                    this.objStyle.width = "100px";
                }
            }
        });
    </script>
</body>

</html>

分支循环结构

  1. 分支结构
1.v-if
2.v-else-if
3.v-else
4.v-show

v-if与v-show的区别：v-if控制原生是否渲染到页面，而v-show是控制元素是否显示到页面。若要频繁显示和隐藏元素可以考虑使用v-show。

通过分支语句控制输出得分的评价情况，通过按钮控制v-show元素是否显示。

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

<body>
    <div id="app">
       <div v-if="score>=90">优秀</div>
       <div v-else-if="score>=80">良好</div>
       <div v-else-if="score>=60">及格</div>
       <div v-else>不及格</div>
        
       <div v-show="flag">显示</div>
       <button v-on:click="handle">切换</button>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                score: 30,
                flag: false
            },
            methods: {
                handle: function(){
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>

</html>
  1. 循环结构
  • v-for遍历数组
1.基本用法
    例：<li v-for="item in fruits" v-text="item"></li>
2.遍历时可以顺带获取下标值
    例：<li v-for="(item,index) in fruits" v-text="item+'----'+index"></li>
3.数组为复杂的对象类型可以通过.的方式获取其中的属性
    例：<li v-for="item in objFruits" v-text="item.ename+'----'+item.cname"></li>
4.key的作用可以帮助Vue提升性能
    例：<li :key="item.id" v-for="item in objFruits" v-text="item.ename+'----'+item.cname"></li>

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

<body>
    <div id="app">
       <div>水果</div>
       <ul>
           <li v-for="item in fruits" v-text="item"></li>
           <li v-for="(item,index) in fruits" v-text="item+'----'+index"></li>
           <li :key="item.id" v-for="item in objFruits" v-text="item.ename+'----'+item.cname"></li>
        </ul>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
       var vm = new Vue({
           el: "#app",
           data: {
               fruits: ["apple","banana","orange"],
               objFruits: [
                   {id:1,ename:"apple",cname:"苹果"},
                   {id:2,ename:"banana",cname:"香蕉"},
                   {id:3,ename:"orange",cname:"橘子"}
                ]
           }
       });
    </script>
</body>

</html>
  • v-for遍历对象
基本语法
value:属性值 key:属性名 index:索引
<div v-for="(value,key,index) in obj" v-text="value+'---'+key+'---'+index"></div>

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

<body>
    <div id="app">
       <div v-for="(value,key,index) in obj" v-text="value+'---'+key+'---'+index"></div>
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
       var vm = new Vue({
           el: "#app",
           data: {
               obj:{
                   uname: "yorick",
                   age: 23,
                   address: "BeiJing"
               }
           }
       });
    </script>
</body>

</html>

相关文章

  • 01Vue基本使用与模板语法

    Vue基本使用与模板语法 一. 基本使用 Hello World快速入门 二. 模板语法 指令 概述 指令的本质就...

  • beego 模版语法

    beego 模板语法指南 本文讲述 beego 中使用的模板语法，与 go 模板语法基本相同。 基本语法 go 统...

  • 重温Django3

    1....模板(了解) 目的: 模板的渲染, 以及基本模板语法的使用 使用格式: 1, 设置模板文件夹, sett...

  • 《二》、Vue核心——基本使用

    一、Vue的基本使用 1、编码 2、理解 Vue 的 MVVM 3、模板语法 （1）、模板语法的理解  Ⅰ、动态的...

  • （2018-05-27.Python从Zero到One）8、（T

    4.3 练习 对比Django模板与Tornado模板的异同。 练习使用Tornado模板的语法。

  • Kotlin研发第一弹——基本语法

    基本语法 基本语法包定义定义函数定义局部变量注释使用字符串模板使用条件表达式使用可空变量以及空值检查使用值检查以及...

  • T5 Razor视图引擎

    学习内容 1.Razor基本语法 2.Razor与HTML混合输出 3.模板页面 实践目标 1.使用Razor显示...

  • 2019-06-29

    vue的特点 Vue 扩展插件 vue的基本使用 模板语法 模板的理解 双大括号表达式 强制数据绑定 绑定事件监听...

  • 一 Vue基础

    目录 1.前期概要与基础2.模板语法3.计算属性与侦听器 模板语法 一、概要 Vue.js 使用了基于 HTML ...

  • 模板语法、条件、循环

    模板语法 vue的特点就是，可以使用简洁的模板语法将数据声明似的渲染进DOM系统。常见模板语法有：插值：{{}}输...

网友评论

      本文标题：01Vue基本使用与模板语法

      本文链接：https://www.haomeiwen.com/subject/cmfttltx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|01Vue基本使用与模板语法|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！