Vue.js 學(xué)習(xí)Day3

Vue.js - Day3

定義Vue組件

什么是組件：組件的出現(xiàn)，就是為了拆分Vue實(shí)例的代碼量的慰毅，能夠讓我們以不同的組件庐船，來劃分不同的功能模塊，將來我們需要什么樣的功能末贾，就可以去調(diào)用對(duì)應(yīng)的組件即可；
組件化和模塊化的不同：

模塊化：是從代碼邏輯的角度進(jìn)行劃分的整吆；方便代碼分層開發(fā)拱撵，保證每個(gè)功能模塊的職能單一；
組件化：是從UI界面的角度進(jìn)行劃分的表蝙；前端的組件化拴测，方便UI組件的重用；

全局組件定義的三種方式

使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
      template: '<h1>登錄</h1>'
    });
    Vue.component('login', login);

直接使用 Vue.component 方法：

Vue.component('register', {
      template: '<h1>注冊(cè)</h1>'
    });

將模板字符串府蛇，定義到script標(biāo)簽種：

<script id="tmpl" type="x-template">
      <div><a href="#">登錄</a> | <a href="#">注冊(cè)</a></div>
    </script>

同時(shí)集索，需要使用 Vue.component 來定義組件：

Vue.component('account', {
      template: '#tmpl'
    });

注意：組件中的DOM結(jié)構(gòu)，有且只能有唯一的根元素（Root Element）來進(jìn)行包裹汇跨！

組件中展示數(shù)據(jù)和響應(yīng)事件

在組件中务荆，data需要被定義為一個(gè)方法，例如：

Vue.component('account', {
      template: '#tmpl',
      data() {
        return {
          msg: '大家好穷遂！'
        }
      },
      methods:{
        login(){
          alert('點(diǎn)擊了登錄按鈕');
        }
      }
    });

在子組件中蛹含，如果將模板字符串，定義到了script標(biāo)簽中塞颁，那么浦箱，要訪問子組件身上的data屬性中的值吸耿，需要使用this來訪問；

【重點(diǎn)】為什么組件中的data屬性必須定義為一個(gè)方法并返回一個(gè)對(duì)象

通過計(jì)數(shù)器案例演示

使用`components`屬性定義局部子組件

組件實(shí)例定義方式：

<script>
    // 創(chuàng)建 Vue 實(shí)例酷窥，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: { // 定義子組件
        account: { // account 組件
          template: '<div><h1>這是Account組件{{name}}</h1><login></login></div>', // 在這里使用定義的子組件
          components: { // 定義子組件的子組件
            login: { // login 組件
              template: "<h3>這是登錄組件</h3>"
            }
          }
        }
      }
    });
  </script>

引用組件：

<div id="app">
    <account></account>
  </div>

使用`flag`標(biāo)識(shí)符結(jié)合`v-if`和`v-else`切換組件

頁面結(jié)構(gòu)：

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <my-com1 v-if="flag"></my-com1>
    <my-com2 v-else="flag"></my-com2>
  </div>

Vue實(shí)例定義：

<script>
    Vue.component('myCom1', {
      template: '<h3>奔波霸</h3>'
    })

    Vue.component('myCom2', {
      template: '<h3>霸波奔</h3>'
    })

    // 創(chuàng)建 Vue 實(shí)例咽安，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {}
    });
  </script>

使用`:is`屬性來切換不同的子組件,并添加切換動(dòng)畫

組件實(shí)例定義方式：

  // 登錄組件
    const login = Vue.extend({
      template: `<div>
        <h3>登錄組件</h3>
      </div>`
    });
    Vue.component('login', login);

    // 注冊(cè)組件
    const register = Vue.extend({
      template: `<div>
        <h3>注冊(cè)組件</h3>
      </div>`
    });
    Vue.component('register', register);

    // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: { comName: 'login' },
      methods: {}
    });

使用component標(biāo)簽蓬推，來引用組件妆棒，并通過:is屬性來指定要加載的組件：

  <div id="app">
    <a href="#" @click.prevent="comName='login'">登錄</a>
    <a href="#" @click.prevent="comName='register'">注冊(cè)</a>
    <hr>
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>
  </div>

添加切換樣式：

  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }

    .v-enter-active,
    .v-leave-active {
      position: absolute;
      transition: all 0.3s ease;
    }

    h3{
      margin: 0;
    }
  </style>

父組件向子組件傳值

組件實(shí)例定義方式，注意：一定要使用props屬性來定義父組件傳遞過來的數(shù)據(jù)

<script>
    // 創(chuàng)建 Vue 實(shí)例沸伏，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '這是父組件中的消息'
      },
      components: {
        son: {
          template: '<h1>這是子組件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>

使用v-bind或簡化指令糕珊，將數(shù)據(jù)傳遞到子組件中：

<div id="app">
    <son :finfo="msg"></son>
  </div>

子組件向父組件傳值

原理：父組件將方法的引用，傳遞到子組件內(nèi)部毅糟，子組件在內(nèi)部調(diào)用父組件傳遞過來的方法红选，同時(shí)把要發(fā)送給父組件的數(shù)據(jù)，在調(diào)用方法的時(shí)候當(dāng)作參數(shù)傳遞進(jìn)去姆另；
父組件將方法的引用傳遞給子組件喇肋，其中，getMsg是父組件中methods中定義的方法名稱迹辐，func是子組件調(diào)用傳遞過來方法時(shí)候的方法名稱

<son @func="getMsg"></son>

子組件內(nèi)部通過this.$emit('方法名', 要傳遞的數(shù)據(jù))方式蝶防，來調(diào)用父組件中的方法，同時(shí)把數(shù)據(jù)傳遞給父組件使用

<div id="app">
    <!-- 引用父組件 -->
    <son @func="getMsg"></son>

    <!-- 組件模板定義 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父組件傳值" @click="sendMsg" />
      </div>
    </script>
  </div>

  <script>
    // 子組件的定義方式
    Vue.component('son', {
      template: '#son', // 組件模板Id
      methods: {
        sendMsg() { // 按鈕的點(diǎn)擊事件
          this.$emit('func', 'OK'); // 調(diào)用父組件傳遞過來的方法明吩，同時(shí)把數(shù)據(jù)傳遞出去
        }
      }
    });

    // 創(chuàng)建 Vue 實(shí)例间学，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子組件中，通過 this.$emit() 實(shí)際調(diào)用的方法印荔，在此進(jìn)行定義
          alert(val);
        }
      }
    });
  </script>

評(píng)論列表案例

目標(biāo)：主要練習(xí)父子組件之間傳值

使用 `this.$refs` 來獲取元素和組件

  <div id="app">
    <div>
      <input type="button" value="獲取元素內(nèi)容" @click="getElement" />
      <!-- 使用 ref 獲取元素 -->
      <h1 ref="myh1">這是一個(gè)大大的H1</h1>

      <hr>
      <!-- 使用 ref 獲取子組件 -->
      <my-com ref="mycom"></my-com>
    </div>
  </div>

  <script>
    Vue.component('my-com', {
      template: '<h5>這是一個(gè)子組件</h5>',
      data() {
        return {
          name: '子組件'
        }
      }
    });

    // 創(chuàng)建 Vue 實(shí)例菱鸥，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          // 通過 this.$refs 來獲取元素
          console.log(this.$refs.myh1.innerText);
          // 通過 this.$refs 來獲取組件
          console.log(this.$refs.mycom.name);
        }
      }
    });
  </script>

什么是路由

對(duì)于普通的網(wǎng)站，所有的超鏈接都是URL地址躏鱼，所有的URL地址都對(duì)應(yīng)服務(wù)器上對(duì)應(yīng)的資源；
對(duì)于單頁面應(yīng)用程序來說殷绍，主要通過URL中的hash(#號(hào))來實(shí)現(xiàn)不同頁面之間的切換染苛，同時(shí)，hash有一個(gè)特點(diǎn)：HTTP請(qǐng)求中不會(huì)包含hash相關(guān)的內(nèi)容主到；所以茶行，單頁面程序中的頁面跳轉(zhuǎn)主要用hash實(shí)現(xiàn)；
在單頁面應(yīng)用程序中登钥，這種通過hash改變來切換頁面的方式畔师，稱作前端路由（區(qū)別于后端路由）；

在 vue 中使用 vue-router

導(dǎo)入 vue-router 組件類庫：

<!-- 1. 導(dǎo)入 vue-router 組件類庫 -->
  <script src="./lib/vue-router-2.7.0.js"></script>

使用 router-link 組件來導(dǎo)航

<!-- 2. 使用 router-link 組件來導(dǎo)航 -->
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊(cè)</router-link>

使用 router-view 組件來顯示匹配到的組件

<!-- 3. 使用 router-view 組件來顯示匹配到的組件 -->
<router-view></router-view>

創(chuàng)建使用Vue.extend創(chuàng)建組件

    // 4.1 使用 Vue.extend 來創(chuàng)建登錄組件
    var login = Vue.extend({
      template: '<h1>登錄組件</h1>'
    });

    // 4.2 使用 Vue.extend 來創(chuàng)建注冊(cè)組件
    var register = Vue.extend({
      template: '<h1>注冊(cè)組件</h1>'
    });

創(chuàng)建一個(gè)路由 router 實(shí)例牧牢，通過 routers 屬性來定義路由匹配規(guī)則

// 5. 創(chuàng)建一個(gè)路由 router 實(shí)例看锉，通過 routers 屬性來定義路由匹配規(guī)則
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

使用 router 屬性來使用路由規(guī)則

// 6. 創(chuàng)建 Vue 實(shí)例姿锭，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來使用路由規(guī)則
    });

設(shè)置路由高亮

設(shè)置路由切換動(dòng)效

在路由規(guī)則中定義參數(shù)

在規(guī)則中定義參數(shù)：

{ path: '/register/:id', component: register }

通過 this.$route.params來獲取路由中的參數(shù)：

var register = Vue.extend({
      template: '<h1>注冊(cè)組件 --- {{this.$route.params.id}}</h1>'
    });

使用 `children` 屬性實(shí)現(xiàn)路由嵌套

  <div id="app">
    <router-link to="/account">Account</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 父路由中的組件
    const account = Vue.extend({
      template: `<div>
        這是account組件
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });

    // 子路由中的 login 組件
    const login = Vue.extend({
      template: '<div>登錄組件</div>'
    });

    // 子路由中的 register 組件
    const register = Vue.extend({
      template: '<div>注冊(cè)組件</div>'
    });

    // 路由實(shí)例
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, // 使用 redirect 實(shí)現(xiàn)路由重定向
        {
          path: '/account',
          component: account,
          children: [ // 通過 children 數(shù)組屬性，來實(shí)現(xiàn)路由的嵌套
            { path: 'login', component: login }, // 注意伯铣，子路由的開頭位置呻此，不要加 / 路徑符
            { path: 'register', component: register }
          ]
        }
      ]
    });

    // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  </script>

命名視圖實(shí)現(xiàn)經(jīng)典布局

標(biāo)簽代碼結(jié)構(gòu)：

<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>

JS代碼：

<script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    // 創(chuàng)建路由對(duì)象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    // 創(chuàng)建 Vue 實(shí)例腔寡，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>

CSS 樣式：

  <style>
    .header {
      border: 1px solid red;
    }

    .content{
      display: flex;
    }
    .sidebar {
      flex: 2;
      border: 1px solid green;
      height: 500px;
    }
    .mainbox{
      flex: 8;
      border: 1px solid blue;
      height: 500px;
    }
  </style>

`watch`屬性的使用

考慮一個(gè)問題：想要實(shí)現(xiàn) 名 和 姓 兩個(gè)文本框的內(nèi)容改變焚鲜，則全名的文本框中的值也跟著改變；（用以前的知識(shí)如何實(shí)現(xiàn)放前？忿磅？？）

監(jiān)聽data中屬性的改變：

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 創(chuàng)建 Vue 實(shí)例凭语，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { // 第一個(gè)參數(shù)是新數(shù)據(jù)葱她，第二個(gè)參數(shù)是舊數(shù)據(jù)
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  </script>

監(jiān)聽路由對(duì)象的改變：

<div id="app">
    <router-link to="/login">登錄</router-link>
    <router-link to="/register">注冊(cè)</router-link>

    <router-view></router-view>
  </div>

  <script>
    var login = Vue.extend({
      template: '<h1>登錄組件</h1>'
    });

    var register = Vue.extend({
      template: '<h1>注冊(cè)組件</h1>'
    });

    var router = new VueRouter({
      routes: [
        { path: "/login", component: login },
        { path: "/register", component: register }
      ]
    });

    // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router,
      watch: {
        '$route': function (newVal, oldVal) {
          if (newVal.path === '/login') {
            console.log('這是登錄組件');
          }
        }
      }
    });
  </script>

`computed`計(jì)算屬性的使用

默認(rèn)只有getter的計(jì)算屬性：

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 創(chuàng)建 Vue 實(shí)例叽粹，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {},
      computed: { // 計(jì)算屬性览效； 特點(diǎn)：當(dāng)計(jì)算屬性中所以來的任何一個(gè) data 屬性改變之后，都會(huì)重新觸發(fā) 本計(jì)算屬性 的重新計(jì)算虫几，從而更新 fullName 的值
        fullName() {
          return this.firstName + ' - ' + this.lastName;
        }
      }
    });
  </script>

定義有getter和setter的計(jì)算屬性：

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 點(diǎn)擊按鈕重新為 計(jì)算屬性 fullName 賦值 -->
    <input type="button" value="修改fullName" @click="changeName">

    <span>{{fullName}}</span>
  </div>

  <script>
    // 創(chuàng)建 Vue 實(shí)例锤灿，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {
        changeName() {
          this.fullName = 'TOM - chen2';
        }
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + ' - ' + this.lastName;
          },
          set: function (newVal) {
            var parts = newVal.split(' - ');
            this.firstName = parts[0];
            this.lastName = parts[1];
          }
        }
      }
    });
  </script>

`watch`、`computed`和`methods`之間的對(duì)比

computed屬性的結(jié)果會(huì)被緩存辆脸，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算但校。主要當(dāng)作屬性來使用；
methods方法表示一個(gè)具體的操作啡氢，主要書寫業(yè)務(wù)邏輯状囱；
watch一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式倘是，值是對(duì)應(yīng)回調(diào)函數(shù)亭枷。主要用來監(jiān)聽某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作搀崭；可以看作是computed和methods的結(jié)合體叨粘；

`nrm`的安裝使用

作用：提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時(shí)候的服務(wù)器地址瘤睹；
什么是鏡像：原來包剛一開始是只存在于國外的NPM服務(wù)器升敲，但是由于網(wǎng)絡(luò)原因，經(jīng)常訪問不到轰传，這時(shí)候驴党，我們可以在國內(nèi)，創(chuàng)建一個(gè)和官網(wǎng)完全一樣的NPM服務(wù)器获茬，只不過港庄，數(shù)據(jù)都是從人家那里拿過來的倔既，除此之外，使用方式完全一樣攘轩；

運(yùn)行npm i nrm -g全局安裝nrm包叉存；
使用nrm ls查看當(dāng)前所有可用的鏡像源地址以及當(dāng)前所使用的鏡像源地址；
使用nrm use npm或nrm use taobao切換不同的鏡像源地址度帮；

相關(guān)文件

URL中的hash（井號(hào)）

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末歼捏，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子笨篷，更是在濱河造成了極大的恐慌瞳秽，老刑警劉巖，帶你破解...
沈念sama閱讀 206,214評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件率翅，死亡現(xiàn)場(chǎng)離奇詭異练俐，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)冕臭，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,307評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門腺晾，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人辜贵，你說我怎么就攤上這事悯蝉。” “怎么了托慨？”我有些...
開封第一講書人閱讀 152,543評(píng)論 0贊 341
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵鼻由，是天一觀的道長。經(jīng)常有香客問我厚棵，道長蕉世，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,221評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任婆硬，我火速辦了婚禮狠轻，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘彬犯。我一直安慰自己向楼，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,224評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布躏嚎。她就那樣靜靜地躺著，像睡著了一般菩貌。火紅的嫁衣襯著肌膚如雪卢佣。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,007評(píng)論 1贊 284
城市分裂傳說
那天箭阶，我揣著相機(jī)與錄音虚茶，去河邊找鬼戈鲁。笑死，一個(gè)胖子當(dāng)著我的面吹牛嘹叫，可吹牛的內(nèi)容都是我干的婆殿。我是一名探鬼主播，決...
沈念sama閱讀 38,313評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼罩扇，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼婆芦！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起喂饥，我...
開封第一講書人閱讀 36,956評(píng)論 0贊 259
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤消约，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后员帮，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體或粮，經(jīng)...
沈念sama閱讀 43,441評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,925評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年捞高，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了氯材。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 38,018評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡硝岗，死狀恐怖氢哮，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情辈讶，我是刑警寧澤命浴，帶...
沈念sama閱讀 33,685評(píng)論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站贱除，受9級(jí)特大地震影響生闲，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜月幌，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,234評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一碍讯、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧扯躺，春花似錦捉兴、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,240評(píng)論 0贊 19
一樁弒父案倍啥，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至澎埠，卻和暖如春虽缕，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背蒲稳。一陣腳步聲響...
開封第一講書人閱讀 31,464評(píng)論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工氮趋，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留伍派，地道東北人。一個(gè)月前我還...
沈念sama閱讀 45,467評(píng)論 2贊 352
代替公主和親
正文我出身青樓剩胁，卻偏偏與公主長得像诉植，于是被迫代替她去往敵國和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子昵观，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,762評(píng)論 2贊 345