Vue.js备忘记录(三) 自定义指令, 组件化, 父子组件,组件化思想拆分文件

一. 自定义指令 //操作DOM

有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

1.什么是自定义指令:

自己配置的指令

2.什么时候使用自定义指令?

当你不可避免的操作DOM时

3.如何全局注册指令

全局注册: 如果需要在多个组件中使用该指令,则应声明为全局

参数一:指令名

参数二:钩子函数

Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
      // 聚焦元素
      el.focus()
    }
  })

4.钩子函数

这里需要解释什么是钩子函数:

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

  • bind：一开始就执行 绑定阶段 ,在bind阶段 el无法拿到父元素 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted：一开始就执行 绑定后插入父元素中的阶段 在inserted阶段 el可以拿到父元素 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

  • update：window更新时触发,其获取的是更新之前的DOM 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

  • componentUpdated：组件数据更改时触发,其获取的是更新之后的DOM.指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind：只调用一次，指令与元素解绑时调用。

5.钩子函数参数

每个钩子函数都默认传入两个参数 el和binding

el是调用此函数的DOM元素, binding是 v-指令 对象

指令钩子函数会被传入以下参数：

  • el：指令所绑定的元素，可以用来直接操作 DOM 。

  • binding：一个对象，包含以下属性：

  • name：指令名，不包括 v- 前缀。

  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

  • vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

6. 自定义指令函数简写

在很多时候，你可能想在bind和update时触发相同行为，而不关心其它的钩子。

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

7. 使用

指令的名字前面加 v-来调用 ,

如果是驼峰命名法,则应该转为小写并用 - 连接

如 autoFocus 引用时 v-auto-focus

例如:使输入框聚焦

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

8. v-指令:参数 = xxx 参数是如何传递的?

例如:v-bind:class='xxx' 这样的指令怎么定义?怎么把参数class传入 指令生成器中呢?

其实它是通过 第二个参数binding中的 arg传的

xxx怎么传入的呢?

其实它是通过 第二个参数binding中的value 传的

<!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>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <input type="text" name="" id="" v-my-bind:canshu1="msg">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.directive('my-bind', {
            inserted: function (el,binding) {
                console.log(el);
                console.log(binding);
                console.log(binding.arg);
                console.log(binding.value);
            }
        })
        var vm = new Vue({
            data: {
                msg: 'hello'
            }
        }).$mount('#app')

    </script>
</body>

</html>

9. 私有自定义指令

和全局的指令生成器差不多,只不过写在组件的 directives成员里面

<h1 v-color>hello</h1>

        new Vue({
            el: '#app',
            data: {

            },
            directives: {
                color: function (el, bingding) {
                    el.style.color = 'red'
                }
            }
        })

二. 组件化

组件化思想就是将一个大视图拆分成一个个小的模块

组件化可以方便开发和维护,同时方便复用

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

  • template只能有一个根元素

  • template可以传值字符串,但是这样写没有高亮提醒😭

  • 可以用vue里单文件组件解决这一个问题 详见:单文件组件

  • 组件其实就是一个vue实例,所以他有自己的data methods等成员,也是一个独立的作用域

  • 但是,组件的data必须是个方法,方法返回一个对象作为组件的data

  • 组件可以被认为是js模块,所以存在组件间参数传递的问题

1.组件使用步骤 //只是阐述原理,现在这种写法已经不太常见了

(1).创建组件构造器

用Vue的extend构造方法构造组件

    const myComponent =Vue.extend({   //我们用Vue的extend构造方法构造了一个组件
      template:`<li>这是个待办项</li>`
            //其最重要的属性就是模板,vue会使用这个模板来渲染HTML
    })

现在这种写法已经不太常见了

(2).注册组件

Vue.component(id, [definition])


Vue.component('myComponent', myComponent)

(3).使用组件

使用组件时注意,驼峰命名法会自动转为 - 命名法

<my-component></my-component>

2 组件定义的语法糖

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：

这里,我们把组件构造器直接传入了组件注册器了

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {//(由于代码比较简单,这里,我们把组件构造器直接传入了组件注册器了)
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

现在你可以用它构建另一个组件模板：

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

问题一: 感觉template写在模板里太乱了~~~!!

可以按如下的方法提取出来

  • 在html的body里 先写一个template标签 命名好id

  • 再把模板内容放入

  • 在组件定于语法中写: template:'#id' 即可完成关联

<!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'>
    <my-component></my-component>
  </div>

  <template id="cpn">
    <div>
      <li>这是个待办项</li>
      <li>这是个待办项</li>
    </div>
  </template>
  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
  <script>
    Vue.component('myComponent', {
      template:'#cpn'
    })
    const app= new Vue({
      el:'#app',
    })
  </script>
</body>
</html>

问题二: 这样写不算乱,但是模板如果写在body里,将来如何拆分文件????

的确是这样,看来模板不能写在body里 还是要写在script里,如果写在script里,我们可以这样做:

<!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'>
    <my-component></my-component>
  </div>
  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
  <script>
    let template=`
    <div>
      <li>这是个待办项</li>
      <li>这是个待办项</li>
    </div>
    `
    Vue.component('myComponent', {
      template:template
    })
    const app= new Vue({
      el:'#app',
    })
  </script>
</body>
</html>

这样写确实可以拆分了,但是在script里写html没有代码缩进和提示非常别扭,也不方便修改~!

的确是这样!!想要改变这一情况,请看后续章节中的 现代化的解决方案.

3.全局组件和局部组件

  • 全局组件定义在全局,在任意组件中都可以直接使用

  • 局部组件定义在局部,只能在当前组件中使用

  • 建议把通用组件定义为全局,把不通用的涉及具体业务的组件定义为局部

  • 全局注册也必须在Vue接管的作用域中用

在此之前,我们先弄清楚一个问题:组件看成是一个Vue实例的话,它有没有data属性?

当然了~~!!但是组件里的data必须是传入一个function,function里面再return对象出来 (这样做是为了防止组件多次调用时,如果他们在内存中指向同一个对象,会导致data内的数据被不同实例互相篡改)

(1).全局注册

<!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">
        <my-component></my-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('my-component', {
            template:'<p>{{msg}}</p>',
            data:function(){
                return{
                    msg:'hello component!'
                }
            }
        })
        const app = new Vue({
            data: {
                message:'hello world',
            }
        }).$mount('#app')
    </script>
</body>

</html>

(2) 局部组件

首先明白子组件,子组件是声明在父组件的components属性内的组件,声明方法 如下:

        Vue.component('my-component1', {
            template: `
            <div>    
                <input type="checkbox" v-model="seen">{{msg}}
                <div :class="{box:seen}"></div>
                <component2></component2>
            </div>
            `,
            data: function () {
                return {
                    msg: 'hello component!',
                    seen:true
                }
            },
            components:{
                component2:{
                    template:"<h1>hello</h1>"
                }
            }
        })

这种声明方式使得component2只能在my-component1的作用域内被引用,无法被全局引用

4.传参的组件

上面的组件没有参数,生成的标签千篇一律,为了解决这个问题,我们可以给自己的组件传参

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

这样,我们就可以生成不同内容的自定义组件了

例如:

<div id="app-7">
  <ol>
    <!--现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再作详细解释。-->
    <todo-item
      v-for="item in groceryList"  
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

在一个大型应用中，有必要将整个应用程序划分为组件

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

三. 父子组件

如果一个组件是另一个组件的局部组件,则我们称它为子组件,其外包组件为父组件.

典型的父子组件结构:

  <script>
    let template=`
    <div>
      <li>这是个待办项</li>
      <li>这是个待办项</li>
    </div>
    `
    cpn={                        //子组件
      template:template,
      data() {
        return {
        }
      },
    }

    const app= new Vue({           //父组件  同时也是根组件
      el:'#app',
      data:{
      },
      components:{
        cpn
      }
    })
  </script>

其实我们有一个组件通信大杀器:vuex,详见后续章节

组件的初衷就是配合使用,最常见的就是形成父子关系,A中用B,所以他们之间必须通讯,父组件要能够给子组件下发数据,子组件也可能要将内部的事件告知父组件

父子组件可以总结为prop向下传递,事件向上传递

1.props //给子组件传递数据

父组件调用子组件时,通过标签传参,子组件的props接收下发数据

①.在父组件template中找到子组件,通过声明属性的方式传递数据

注意:如果需要动态传递值,必须用v-bind 如果只是想传个简单的值,可以直接写在标签里,如下:

<todo-body  foo='bar'></todo-body>  
<todo-body  v-bind:foo=todos></todo-body>

②.在子组件中声明成员props接收传递的参数 ,组件接收到的props数据后可以像访问data一样访问

props可以传入数组,也可以传入对象 ,

比较推荐传入对象,因为传入对象时,可以指定

  • 数据类型type

  • ,默认值default, //注意:如果type是数组或者对象,默认值必须是函数 return出来

  • 是否必须required

props: ['foo']
props:{
  movies: Array,
  count:{
      required:true
},
  name:{
      type:String,
      default:'无名氏'
    }
}

支持的数据类型如下: 除此之外还可以要求是你自己的自定义类型

还要注意一个问题!!!! 子组件props里的数据不要和子组件的表单做双向数据绑定!

(因为他已经可以被父组件改变了!!!别再让自己的表单改变它)

2.单项数据流

prop是单项绑定的:当父组件的属性变化时,可以传递给子组件,反过来则不会,这种设计是为了放在子组件无意间改变父组件状态

在子组件中,确实可以操作父组件传入的数据,但只能操作引用类型的数据,这跟JS数据存储原理有关,但是,非常不建议这么做

普通类型不允许这样改, 实际上引用类型也不能用 = 号重新赋值

3.子传父 //如何修改父组件数据

合理的想法:子组件应该把数据给父组件,父组件接收后自己修改自己的数据

那么,我们到底怎么修改父组件的数据呢?

① 在父组件中定义一个方法来修改自己的数据

methods: {
            addTodo(titleText){
                this.todos.push({
                    title:titleText,
                    done:false
                })
            }
        },

②在子组件中发布一个事件,通知父组件

            methods: {
                handleKeyUpEnter(e){
                    this.$emit('wantYouAddTodo', e.target.value)
                    this.title=''
                }
            },

③在父组件使用子组件的标签上 用v-on订阅 子组件发布的自定义事件

事件名就是子组件发射的事件名

<todo-header  v-bind:todos=todos  @wantYouAddTodo=addTodo></todo-header>

注意:虽然父元素的接收方法是带参数的,但v-on绑定的时候没有把参数写在指令中,系统会默认把参数传过去.

整个过程采用了发布/订阅的通信方式.请体会.

4. 综合练习

接下来我们再举例: 子组件点击某个按钮,并通知父组件他点击了哪一个

<!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'>
    <cpn :btns=buttons  @childclick=childclick></cpn>
    <h1>按钮{{child_be_clicked}}被点了</h1>
    
  </div>
  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
  <script>
    let template=`
    <div>
      <button v-for="(btn, index) in btns" :key="btn.id" @click= btn_click(btn)>{{btn.name}}</button>
    </div>
    `
    cpn={
      template,
      props:{
        btns:{
          type:Array
        }
      },
      methods: {
        btn_click(btn){
          this.$emit('childclick', btn)
        }
      },
    }
    const app= new Vue({
      el:'#app',
      data:{
        child_be_clicked:'??',
        buttons:[
          {id:1,name:"OK"},
          {id:2,name:"cancle"},
          {id:3,name:"retry"}
        ]
      },
      components:{
        cpn
      },
      methods:{
        childclick(recive){
          this.child_be_clicked=recive.name
        }
      }
    })
  </script>
</body>
</html>

5.父子组件互相访问

直接获取对象

(1)父访问子

父访问子有两种方式:

  • $children 返回父组件的子组件,一般不建议这样做 (很少用,一般只用于拿到所有子组件)

  • refs 如果父组件调用子组件时,在标签里写个 ref='aaa' 则这个组件被存入父组件的ref中(常用,多用于拿到特定组件,但必须加ref键值)

我们可以直接通过this.refs获取父组件的resf数组

甚至用this.$refs.aaa访问它

(2)子访问父

子访问父: $parent (很少用.用了这个,子组件就不够独立了)

(3) 子孙访问根组件

$root

四. 组件化思想拆分文件

1.原生Vue方法

index.html中没有任何标签,只留vue实例的入口标签,所有内容靠组件拼凑

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    <!-- CSS overrides - remove if you don't need it -->
    <link rel="stylesheet" href="css/app.css">
</head>

<body>
    <div id="app"></div> 
    <!-- index只留一个App入口 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="components/todo-header.js"></script>
    <script src="components/todo-body.js"></script>
    <script src="components/todo-footer.js"></script>
    <script src="components/app-footer.js"></script>
    <script src="components/app.js"></script>
    <script src="main.js"></script>
    <!-- 所有js子组件按照先子后父的顺序引入 -->
</body>

</html>

根据入口<divid="app"></div> ,我们就会进入main.js,寻找到这个实例,

从某种意义上讲,main.js不算组件,是启动入口,我们把它放在根目录,而不放在components文件夹

new Vue({   //这个vue实例对应着入口标签，接管了它
    el: '#app',
    template:'<App />', 
    //他的模板会替换掉<div id='app'></div>
    //<App />在哪定义的？原来是下面的子组件定义的
    components: {
        App
    }
})

顺理成章的.我们需要找到组件 App ,它定义在app.js中

; (function () {
    const template = `
    <div>
        <section class="todoapp">
            <todo-header></todo-header>
            <todo-body></todo-body>
            <todo-footer></todo-footer>
        </section>
        <app-footer></app-footer>
    </div>
    `
    //把template单独拿出来,更易于阅读
    //阅读上面的结构,我们发现,App里还是一个个自定义组件
    //为了让节点入口保持统一,以防将来操作DOM,我们给最外层div加了id为app
    window.App = {    
        //使用函数包裹，window调用是为了防止各个template命名冲突
        //现在这个template是window.App.template
        //相当于main.js调用的App是window提供的,
        //后续我们会有方法解决这个问题
        template,
        components: {
            TodoHeader,
            TodoBody,
            TodoFooter,
            AppFooter,
        }
        //这是App的子组件声明
    }
})()

于是,我们顺藤摸瓜找到了其他组件,它们和App组件结构相同.

整个项目的结构为:

2. 借用单文件页面系统

五. 路由状态切换写入生命周期

上一篇中的路由状态切换中,我们通过this.app将window.location.hash传递给

this指代的是window, 它里面有一个app实例.

改为组件化之后我们还有这个实例吗? 在调用时,我们可以把组件看成一个实例,但我们的组件文件里写的其实是组件的声明(类对象), 那我们怎么把window.location.hash传递给它?

这时候,我们需要把相对应的函数写进组件的生命周期之中

绑定在created周期是因为它是第一个拿到Vue组件的data的钩子

        created() {
            window.onhashchange=()=>{
                this.filterText=window.location.hash
            }
        },  //这段代码写在todos-body组件中 需要app下发filterText

六. Element组件库

element是基于Vue的第三方组件库,他能帮我们更加快速的构建应用

The world's most popular Vue UI framework​element.eleme.cn

安装


cnpm i element-ui -S

或者CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

举例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <template>
            <div class="block">
              <span class="demonstration">请选择日期</span>
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </template>
        <el-rate v-model="rate" show-text></el-rate>
        <el-button type="primary" @click=handleClick icon="el-icon-star-on">弹出评分</el-button>
    </div>
    <script>
        var vm = new Vue({
            data: {
                msg: 'hello',
                rate:4,
                value1:null,
                value2:null

            },
            methods: {
                handleClick(){
                    window.alert('当前评分:'+this.rate+'评分日期'+this.value1)
                }
            },
        }).$mount('#app')
    </script>
</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,948评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,371评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,490评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,521评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,627评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,842评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,997评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,741评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,203评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,339评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,955评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2赞 349