vue框架视频学习第一天笔记

vue框架视频学习第一天笔记

webpack编译

  • webpack编译文件基础插件
    • babel-cli
    • babel-core
    • babel-loader@7.1.5
    • babel-preset-es2015
    • babel-preset-stage-0
    • babel-plugin-transform-runtime 为了编译函数
    • webpack
    • webpack-dev-server
    • webpack-cli
    • url-loader
    • file-loader
    • css-loader
    • style-loader
    • extract-text-webpack-plugin@next 为了支持webpack4
    • html-webpack-plugin
  • 下载插件时注意
    • babel-loader版本为7.1.5
    • extract-text-webpack-plugin必须设置@next，因为正常下载版本不支持webpack4；
  • webpack.config.js配置
    • rules设置中的依赖是倒叙执行；
    • plugins设置中的插件是正序执行；
    • webpack.config.js配置代码：
     //引入模块
 const webpack=require("webpack");
 const path=require("path");
 const HtmlWebpackPlugin=require("html-webpack-plugin");
 const ExtractTextPlugin=require("extract-text-webpack-plugin");
 //配置
 module.exports={
     //1.入口文件
     entry:path.resolve(__dirname,"src/main.js"),//main默认入口文件
     //2.出口文件
     output:{
         path: path.resolve(__dirname,"dist"),
         filename: "my_bundle.js"
     },
     //3.模型文件
     module:{
         //转化规则
         rules:[
             {
                 test:/\.js(x)?$/,
                 exclude:/node_modules/,
                 use:{
                     loader:"babel-loader",
                     options: {
                         presets: ["es2015","stage-0"]
                     }
                 }
             },
             {//配置css
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
                     fallback: "style-loader",
                     use: "css-loader"
                 })
             },
             {
                 test:/\.(eot|svg|ttf|woff)(\?\w*)?$/,
                 use:"url-loader?limit=50000"
             },
             {
                 test:/\.(png|git|jpg|jepg)$/,
                 use:"url-loader?limit=50000"
             }
         ]
     },
     devServer: {
         disableHostCheck: true
     },
     plugins:[
         new ExtractTextPlugin({
             filename:"my_style.css"
         }),
         new HtmlWebpackPlugin({template:"./src/index.html"})
     ],
     mode:"development"
 };
  • webpack运行
    • webpack：目的是压缩生成新的文件，将webpack.config.js设置中的入口文件压缩后，输出到output.path路径下，通过html插件，将index.html放在输出路径下，并经压缩后的js文件插入到html文件中；与npm run build效果相同；
      • 注：运行webpack命令，必须在webpack.config.js文件所在的目录下运行；
    • 在package.json中设置scripts选项中的参数dev和build，通过以下命令运行
      • npm run dev：运行webpack-dev-server；
      • npm run build：运行webpack，生成压缩文件，放在dist文件夹下，将js文件插入到html文件中；
      • 注：运行此命令必须在package.json所在目录下运行；否则会报日志错误；

项目目录结构

  • 目录结构
    • src：存放人可以看懂的源代码，具备一定的功能划分，MVC
    • dist：存放真实上线的代码，通过webpack打包后的文件；
    • webpack.config.js：配置webpack的打包路径和规则等；
    • package.json：通过命令npm init -y快速创建，显示下载的插件信息
    • node_module：项目中的包文件，在gitHub上传时，不用上传；
  • 命令：
    • webpack：打包文件，生成dist目录；
    • webpack-dev-server：运行src下的代码，虚拟出打包后的js文件，在服务器端运行，多用于测试阶段；
      • 命令webpack-dev-server --inline --hot --open --port 1234即在浏览器中自动打开服务器；修改文件后保存，服务器会自动更新；其中--port xxxx可以设置端口号；
  • package.json
    • 设置scripts属性，将开发命令简化，输入过多的代码，只需输入对应的设置即可，如npm run dev
    • 在package.json文件夹下
      • 运行npm i即可下载所有的依赖包，即node_module文件夹；包括devDependencies和depandencies两个对应的依赖；
      • 运行npm i --production只下载depandencies对应的依赖；

  • 项目目录结构图:
    项目目录结构图

es6语法

  • es5中模块的导入和导出
    • 导入自定义模块：var cal=require("./cal.js")
    • 导出：module.exports={};
  • es6中模块的导入和导出
    • 默认导出，导入
      • 导出：export default {};
      • 导入：import xxx from "./cal.js";
      • 注：导入时的变量名可以是任意的名字；可以与导出时的对象名不同；
    • 声明式导出导入（按需导入）
      • 导出：
        • 声明与导出一同：export var obj1="xxx";或export var obj2={};
        • 先声明后导出：声明：var obj3={};导出：export {obj3};
      • 导入：
        • 代码：import {obj1,obj2,obj3,obj4} from "./cal.js"
        • 注：导入时对象中属性名必须与导出时相同；
    • 全体导入（添加* as）
      • 代码：import * as obj from "./cal.js"
      • 获取的obj为一个对象，对象中默认导出的数据作为default属性名的属性值，其余的声明式导出的数据作为属性呈现；
      • obj的形式：
       {
    default: "我是默认导出的结果"
    obj1: "我是声明式导出1"
    obj2: "我是声明式导出1"
    obj3: "我是声明式导出1"
    obj4: "我是声明式导出1"
 }
    • 注：import和export只能放在顶级作用域，不能放在函数内部；
  • es6中的代码变化
    • 对象字面量：若对象中属性名与属性值为同一个名字，可以只写一个；
      • 变量声明：var name="guo"；
      • 定义对象：var obj={name:name}，此时可以简写为var obj={name};
    • 函数声明的变化
      • 与es5的不同是，去掉了:function 
       var obj={
     //es5书写形式
     add:function(n1,n2){
       return n1+n2;
     }
     //es6简写形式
     add(n1,n2){
       return n1+n2;
     }
  }
    • 解构赋值：将对象中的属性名解构出来，直接使用；
      • 代码:
       var objn={
     name1:"xiehe",
     age:3,
     showName(){
         console.log("this指向为:"+this)
     }
 };
 var {name1,age,showName}=objn;
    • 箭头函数：
      • 代码：var add=()=>{};
      • 简写：
        • 条件：1）当参数是一个的时候，可以省略小括号；2）当返回值为一行代码事件，可以省略return和大括号；
        • 代码：var add=(c)=>{ return c(d) }；简写：var add= c => c(d)

Vue基础知识

  • .vue文件的基本格式
    • <template></template>：模板，里面设置标签节点，注意，最外围必须为一个标签；
    • <script></script>：设置此vue组件的配置，通过export default {配置}；设置data,method的属性等；
    • <style scoped></style>：设置组件的样式，若设置scoped代表只是该组件的样式；不设置则为全局样式；
  • .vue文件使用
    • 依赖webpack对vue文件进行打包处理，将vue文件转化为js文件插入到html模板中显示；
    • webpack不能对vue文件结构进行处理，必须依赖插件将vue文件格式转化为基本的dom结构；
    • 依赖的插件
      • vue：下载模块，引入该模块，相当于通过script引入vue.js文件，通过实例调用进行使用
      • vue-loader：是一个webpack的loader，可以将vue文件转化为JS模块；
      • vue-template-compiler：是对vue模板的编译插件，不用引入模块，但必须下载；
    • webpack.config.js配置
      • 引入vue-loader
        • 若下载的版本为14.x，则无需引入，无需配置；
        • 若下载的版本为15.x，则必须引入模块，并设置rules和plugins；
         //引入模块，注意必须用{}括起来；
 const { VueloaderPlugin } =require("vue-loader");
 //配置
 module.exports={
    //设置vue文件转化规则
    module:{
      rules:[
         {
            test:/\.vue$/,
            use:"vue-loader"
         }
      ]
    }
    //设置插件
    plugins: [
      new VueloaderPlugin()
    ]
 }
    • .vue文件为一个组件，将组件渲染到挂载点中显示
      • 引入vue模块，用于实例创建
      • 引入.vue文件：import App from "./app.vue"
      • 实例创建设置参数render，渲染组件
        • render值为匿名函数，函数中设置一个任意形参，然后返回此形参函数，函数参数为该组件
         //引入Vue模块
 import Vue from "vue";
 //引入自定义Vue文件
 import App from "./app.vue";
 //Vue实例创建
 new Vue({
     el:"#app",//挂载点
     render:function (createElement) {
         //返回函数值，形参可以是任何值
         return createElement(App)
     }
 });
  • Vue介绍
    • 核心概念：
      • 组件化
      • 双向数据流：基于ES5中的defineProperty来实现的，IE9及以上浏览器才支持
        • 1）js内存属性发生变化，影响页面的变化；
        • 2）页面的改变，影响js内存属性的改变；
    • 结构
      • 开发一个登陆的模块，登陆需要显示的头部、底部、中部；
      • 组件：组合起来的一个部件
      • 细分代码：
        • 头部：页面、样式、动态效果
        • 代码：template、style、script
    • 数据流
      • 常用指令
        • v-text="xxx"：是元素的innerText，纯文本内容；
        • v-html="xxx"：是元素的innerHTML，可带格式的内容；
        • v-if="xxx"：赋值为布尔值，决定标签的存在与否；
        • v-show="xxx"：赋值为布尔值，决定标签的显示和隐藏，标签始终存在；
        • v-for="(val,index) in ary"：赋值为数组，指的是遍历数组，即遍历标签；
        • v-bind:property="xxx"：绑定元素的属性；注：在webstorm中省略为:property="xxx"；单向数据绑定（内存js改变影响页面）1
        • v-model：数据的双向绑定；
  • class结合v-bind使用
    • class绑定格式：v-bind:class="表达式",最终表达式运算结束的结果赋值给该属性名；
      • 简化：:class="表达式"；
    • class：表达式结果的分类
      • 一个样式：返回字符串
        • 整体思想：通过判断一个变量值的改变来赋值不同的类名；通过三目表达式来赋值，表达式返回的结果为一个字符串；
        • 1）单个字符串或三元表达式：
          • 单个字符串：:class="'redcol'"，其中redcal为类名；
          • 三元表达式：:class="isRed？'redcol':'bluecol'，其中isRed为data属性中设置的变量，而redcol和bluecol为类名；
        • 2）key和样式清单对象：就是通过验证变量中的样式，返回对应的字符串类名，如：v-for="stu in stus" :class="{'A':'redcol','B':'bluecol'}[stu.score]"，其中[stu.score]代表的为A或B。
      • 多个样式：返回对象
        • 数组：
          • 1）数组中元素为变量，变量值为类名字符串；
          • 代码：其中bgc,col为变量，bg1,redcol为类名；
            //template
  <h1 :class="[bgc,col]">这是动态绑定的测试文本</h1>
  //js
  data:{
      bgc:"bg1",
      col:"redcol"
  }
          • 2）数组中元素为对象，对象中key为类名，value为布尔值，可以直接设置布尔值，也可以设置变量，变量值为布尔值；如：:class=[{bluecol:true},{bigFont:true},{bgcRed:isReds}]，其中bluecol为类名，isReds为变量；
        • 对象：
          • 格式：:class={样式类名：boolean,样式类名2：变量}，其中样式类名可不加双引号，变量在data()中定义，变量值为布尔值；
          • 代码：其中bg1,col为类名；isCol为变量；
           <h1 :class="{bg1:true,col:isCol}">这是动态绑定的测试文本</h1>
  //js
  data:{
      isCol: false
  }
      • 验证代码：
       <template>
     <div>
         <h1>验证v-bind绑定class属性</h1>
         <!--1.绑定一个类名-->
         <!--class属性设置-->
         <div class="bigFont">我们的世界</div>
         <!--v-bind绑定一个类名-->
         <div :class="'redcol'">美好的明天aa</div>
         <div :class="isRed?'redcol':'bluecol'">我们的爱太无奈</div>
         <!--2.绑定多个类名-->
         <!--class属性设置-->
         <div class="redcol bigFont">我是class属性设置绑定两个类名</div>
         <!--v-bind绑定多个类名-->
         <div :class=[{bluecol:true},{bigFont:true},{bgcRed:isReds}]>我是v-bind绑定多个类名</div>
         <div :class={bluecol:true,bigFont:true,bgcRed:isReds}>我是v-bind绑定多个类名</div>
         <!--3.验证列表-->
         <ul>
             <!--整体思想：返回字符串-->
             <li v-for="stu in stus" :class="{'A':'redcol','B':'bluecol'}[stu.score]">我是name为{{stu.name}}的一列</li>
         </ul>
 
     </div>
 </template>
 <script>
     export default {
         data(){
             return {
                 isRed: false,
                 isReds: true,
                 stus:[{name:"jack",score:"A"},{name:"rose",score:"B"}]
             }
         }
     }
 </script>
 <style scoped>
     .redcol{
         color: red;
     }
     .bluecol{
         color: blue;
     }
     .bigFont{
         font-size: 30px;
     }
     .bgcRed{
         width: 300px;
         height: 100px;
         background-color: lightcoral;
     }
 </style>
  • style结合v-bind使用：绑定行间样式
    • 1）赋值为对象：v-bind:style="{}",其中{} 为：{color: bluecol, fontSize: size+'px'},其中bluecol和size为变量；变量值为字符串；
    • 代码：
     //template
 <h1 v-bind:style="{color: bluecol, fontSize: size+'px'}">绑定行间样式</h1>
 //js
 data: {
     bluecol: "blue",
     size: "30"
 }
    • 2）赋值为变量名：v-bind:style="objdata"，其中objdata为变量；注：color赋值为字符串类型；
    • 代码：
     //template
 <h1 v-bind:style="objdata">绑定行间样式</h1>
 //js
 data: {
     objdata: {
         color: "blue",
         fontSize: "30px"
     }
 }
  • methods和v-on的使用
    • 绑定事件的方法
      • 代码：v-on:事件名="表达式 || 函数名"
        • 简写：@事件名="表达式 || 函数名"
      • 表达式：@click="isRed==!isRed"其中isRed为data中设置的变量；
      • 函数名：@click="changeCol()"其中changeCol为methods中设置的函数名；
        • 注：若函数名不需要传参，则可以省略()，即：@click="changeCol"
    • methods属性，属性值为一个对象
      • 对象：key是函数名，值是函数体；
    • data属性：属性值为一个函数体，函数体内返回值为一个对象；
    • 凡是在template中调用的变量或函数，不需要加this;
    • 在script中调用变量，必须加this；
  • v-for的使用
    • 遍历数组：v-for="(item,index) in stuAry"其中stuAry为data中设置的变量，变量值为数组；遍历后获得的item为数组元素，index为对应元素的索引；
    • 遍历对象：v-for="(val,key,index) in objs其中objs为data中设置的变量，变量值为对象；遍历后获得的val为对象中的属性值，key为对象中的属性名，index为属性名对应的索引值；
    • v-for使用时，配合ul,li使用，需注意的是，在每个遍历出的li中都要设置key属性，通过v-bind绑定，key值唯一，不能相同；
    • key：类似trank by的一个属性；
      • 作用：告诉vue.js中的元素，与页面之间的关联，当识别删除元素的时候，是单个元素的删除而不是整版替换，所以需要关联其关系；必须设置；
      • 注：2.2.0+的版本中，当组件中使用v-for时，必须设置key属性；
  • 小实例：列表的添加和删除
    • vue文件代码：
     <template>
     <div>
         <h1>英雄的武力值</h1>
         <ul>
             <li v-for="(item,index) in heros" :key="index" :class="{'A':'redcol','B':'bluecol','C':'greencol','D':'pinkcol'}[item.wu]">
                 {{item.name}},{{item.wu}}
                 <input type="button" style="margin-left: 200px;" @click="delBtn(index)" value="删除">
             </li>
         </ul>
         <h4>添加英雄</h4>
         <form>
             <label for="user">英雄：</label>
             <input type="text" id="user" name="user" v-model="heroname"/>
             <br>
             <label for="wuli">武力等级：</label>
             <input type="text" id="wuli" name="wulizhi" v-model="herowu"/>
             <br>
             <input type="button" style="background-color: deepskyblue;" @click="addBtn" value="添加">
         </form>
     </div>
 </template>
 <script>
     export default {
         data(){
             return {
                 heroname:"",
                 herowu:"",
                 heros:[
                     {
                         id:1,
                         name:"乔峰",
                         wu:"A"
                     },
                     {
                         id:2,
                         name:"段誉",
                         wu:"B"
                     },
                     {
                         id:3,
                         name:"虚竹",
                         wu:"C"
                     },
                     {
                         id:4,
                         name:"郭靖",
                         wu:"D"
                     }
                 ]
             }
         },
         methods:{
             addBtn(){
                 this.heros.push({
                     id:this.heros.length+1,
                     name:this.heroname,
                     wu:this.herowu
                 });
                 this.heroname="";
                 this.herowu=""
             },
             delBtn(index){
                 this.heros.splice(index,1);
             }
         }
     }
 </script>
 <style scoped>
     ul> li{
         width: 500px;
         height: 30px;
     }
     .redcol{
         background-color: red;
     }
     .bluecol{
         background-color: skyblue;
     }
     .greencol{
         background-color: yellowgreen;
     }
     .pinkcol{
         background-color: hotpink;
     }
 </style>
  • 父组件和子组件的使用
    • 父组件：使用其他组件的组件，为父组件；
    • 子组件：被使用的组件，为子组件；
    • 父组件引用子组件
      • 引入子组件对象；代码：import headerVue from "./xxx.vue"
      • 父组件声明子组件：在export default {}中设置components属性，声明子组件，声明结构为"子组件标签名"：子组件对象；
      • 引用子组件：在template中使用子组件标签名；
    • 代码：
     <template>
     <div>
         <h1>父组件和子组件</h1>
         <!--引入子组件-->
         <header-vue></header-vue>
         <body-vue></body-vue>
         <footer-vue></footer-vue>
     </div>
 </template>
 <script>
     //引入子组件对象
     import headerVue from "./components/header.vue";
     import bodyVue from "./components/body.vue";
     import footerVue from "./components/footer.vue";
 
     export default {
         //声明子组件
         components:{
             "header-vue":headerVue,
             "body-vue":bodyVue,
             "footer-vue":footerVue
         }
     }
 </script>
 <style>
 </style>
  • 全局组件创建和调用
    • 创建位置：在引入Vue模块的位置，一般在main.js中设置；
    • 方法：调用Vue类的静态方法component
    • 代码：Vue.component("组件名",组件对象)
    • 调用：可以在任何组件中调用；
    • 代码：main.js中创建全局组件
     import Vue from "vue";
 import App from "./app.vue";
 
 //引入全局组件对象
 import globalVue from "./components/global.vue";
 //创建全局组件
 Vue.component("global-vue",globalVue);
   
 new Vue({
     el: "#app",
     render(createEle){
         return createEle(App);
     }
 });
  • 父组件与子组件之间的数据传递
    • 父组件给子组件传递数据
      • 父组件：给子组件标签设置自定义属性
        • 属性值为常量：直接设置；
        • 属性值为变量：通过v-bind绑定；
      • 子组件：声明传递过来的属性名
        • 声明：在子组件对象中设置根属性props，属性值为数组，数组中元素为父组件设置的自定义属性名，要一一对应；
        • 调用：
          • 子组件template中调用，直接用{{xxx}}；
          • script中js调用，使用this.xxx;
      • 验证代码：
        • 父组件代码：
         <template>
     <div>
         <h1>验证父组件给子组件传递数据</h1>
         <!--设置常量值和变量值-->
         <!--属性值为常量，直接设置；为变量，用v-bind设置-->
         <header-vue constdata="漂亮的美人" :changedata="bigdata"></header-vue>
     </div>
 </template>
 
 <script>
     //引入子组件对象
     import headerVue from "./components/header.vue";
 
     export default {
         //声明子组件
         components: {
             "header-vue":headerVue,
         },
         //设置变量
         data(){
             return {
                 bigdata:"美好的世界",
             }
         }
     }
 </script>
 
 <style scoped>
 
 </style>
        • 子组件代码：
         <template>
     <div>
         <p>我是父组件传递过来的常量数据：{{constdata}}</p>
         <p @click="alertData">我是父组件传递过来的变量数据：{{changedata}}</p>
 
     </div>
 </template>
 <script>
     export default {
         //声明父组件传递过来的数据
         props:["constdata","changedata"],
         methods:{
             alertData(){
                 //js中调用传递来的数据，用this.xxx
                 alert(this.changedata);
             }
         }
     }
 </script>
 <style scoped>
     p{
         width: 500px;
         height: 200px;
         background-color: red;
     }
 </style>
    • 子组件向父组件传递参数数据(通信vuebus)
      • 思想：调用Vue类原型上的方法$on,$emit
      • 调用原型上的方法：封装一个js文件，返回vue实例对象；哪里使用引入到哪里
      • 父组件：
        • 绑定click事件，事件函数中，通过调用vue实例对象原型上方法$on，绑定一个监听事件，接收子组件发送的参数；
      • 子组件：
        • 绑定click事件，事件函数中，通过调用vue实例对象原型上的方法$emit，绑定同一个监听事件，发送子组件传递给父组件的参数；
      • 代码：
        • 父组件代码：
         <template>
     <div>
         <!--调用子组件-->
         <sub-vue></sub-vue>
         <button @click="parLis">父组件监听某个事件的运行</button>
     </div>
 </template>
 
 <script>
     //引入vue实例对象
     import con from "./connect.js";
     //引入子组件
     import subVue from "./components/header.vue";
     export default {
         name: "app",
         //声明子组件
         components: {
             "sub-vue": subVue,
         },
         methods: {
             parLis(){
                 //通过实例调用原型上的方法$on
                 //当事件触发后，父组件就监听toPhone事件，当自己发射时，就会触发；
                 con.$on("toPhone",function (sonarg) {
                     console.log(sonarg)
                 })
             }
         }
     }
 </script>
 
 <style scoped>
 
 </style>
        • 子组件代码：
         <template>
     <div>
         <p>我是子级组件</p>
         <button @click="sonLis">子组件发射事件</button>
     </div>
 </template>
 <script>
     //引入connect.js文件
     import con from "../connect.js";
 
     export default {
         methods:{
             sonLis(){
                 //调用vue实例原型上的$emit方法
                 con.$emit("toPhone","子组件传递给父组件的参数信息");
             }
         }
     }
 </script>
 <style scoped>
     p{
         width: 500px;
         height: 200px;
         background-color: red;
     }
 </style>

    • 父子组件传递数据图解：
      父子组件
  • Vue文档
    • VueAPI地址：API-Vue.js

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