vue

什么是vue.js

  • Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）

  • Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

  • Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

基本指令

vue.min.js 官网下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <span>{{msg}}</span>
    </div>
</body>
<script type="text/javascript">
创建一个vue的实例,当页面引入vue.min.jshou,浏览器的内存中会存在一个vue的构造函数
new 出来的 vue对象就是 MVVM中的 VM调度者
var  vm = new Vue({

    el:'#app',当前的vue实例,会控制页面中id是app的区域
    data:{data属性中,存放的时el区域要用到的数据
        msg:'hello vue '

    }

})
</script>
</html>

v-cloak 指令

当引用的vue.js库没有完成加载时,html中的{{msg}}表达式就会展示成原始代码
可以在标签中加上 v-cloak,在style中设置display：none即可

<style type="text/css">
  [v-cloak]{
        display: none;
  }
</style>

<div id="app">
    <span v-cloak>{{msg}}</span>
</div>

插值表达式

  • {{msg}}
会出现上述表达式展示源码问题，但是该方式不会影响标签中除表达式外的其他内容
例：<span>这是{{msg}}的内容</span>
  • v-text="msg"
不会出现上述表达式展示源码问题，但是该方式会覆盖标签中的内容
例：<span v-text="msg">vue text</span>  
若msg是abc 则vue text将被替换成abc
  • v-html="msg"
如果需要向页面中写入HTML标签时,则需要使用 v-html

    <div id="app">
        <span v-html="msg1"></span>
    </div>

<script type="text/javascript">
var  vm = new Vue({
    el:'#app',
    data:{
        msg:'<h2>我是H2</h2>'
    }
})
</script>

v-bind 用于绑定属性的指令

var  vm = new Vue({
    el:'#app',
    data:{  
          value1:'按钮'
    }
})

<input type="button"  value="value1" name="" >

效果如下：


image.png
<input type="button"  v-bind:value="value1" name="" >

效果如下：


image.png

v-bind 简写方式, 效果一样

<input type="button"  :value="value1" name="" >

v-on:click 标签绑定单击事件

<script type="text/javascript">
var  vm = new Vue({
    el:'#app',
    data:{
        value1:'按钮',
    },
    methods:{在这里定义当前vue实例用到的函数
        show:function(){ alert("绑定点击事件") }
    }
})

<input type="button"  value="按钮1" name="" v-on:click="show" >

v-on： 简写方式 @

<input type="button"  value="按钮1" name="" @click="show" >

在methods中的函数如果想要获取data中定义的属性值
可以通过this.属性名获取,this.方法名

var  vm = new Vue({
    el:'#app',
    data:{
        msg:'hello vue ',
        value1:'按钮',
    },
    methods:{
        show:function(){ alert("绑定点击事件") },
        show2:function(){ alert(this.msg); }
    }
})

vue会监听data中属性值的变化,并且实时更新到页面中

    <div id="app">
        <span v-cloak>{{msg}}</span>    
        <input type="button"  value="按钮3" name="" @click="show3" >
    </div>

var  vm = new Vue({
    el:'#app',
    data:{
        msg:'hello vue ',
    },
    methods:{//在这里定义当前vue实例用到的函数
        show3:function(){ this.msg='msg value changed'; }
    }
})

  • 点击按钮3之前页面展示


    image.png

  • 点击按钮3之后页面展示


    image.png

事件修饰符

  • stop 阻止事件冒泡
var  vm = new Vue({
    el:'#app',
    data:{
        msg:'hello vue ',
        msg1:'<h2>我是H2</h2>',
        value1:'按钮',
    },
    methods:{
        show4:function(){ alert('4'); },
        show5:function(){ alert('5'); }
       
    }
})

<div  @click="show5">
    <input type="button"  value="按钮4" name="" @click.stop="show4" >
</div>
  • capture 监听捕获事件
var  vm = new Vue({
    el:'#app',
    data:{
        msg:'hello vue ',
        msg1:'<h2>我是H2</h2>',
        value1:'按钮',
    },
    methods:{
        show4:function(){ alert('4'); },
        show5:function(){ alert('5'); }
       
    }
})

<div  @click.capture="show5">
    <input type="button"  value="按钮4" name="" @click.stop="show4" >
</div>

结果： 【点击按钮4,会先弹出5 ,再弹出4.】

  • self 只有元素本身可以触发绑定的事件
var  vm = new Vue({
    el:'#app',
    data:{
        msg:'hello vue ',
        msg1:'<h2>我是H2</h2>',
        value1:'按钮',
    },
    methods:{
        show4:function(){ alert('4'); },
        show5:function(){ alert('5'); }
       
    }
})

<div  @click.self="show5">
    <input type="button"  value="按钮4" name="" @click="show4" >
</div>

结果： 【点击div时,只会弹出5 ,不再弹出4.】

v-model 实现数据双向绑定；只能用于表单元素

var  vm = new Vue({
    el:'#app',
    data:{
        msg:'hello vue ',
    }
})

<input type="text"  value="按钮7" name="" v-model="msg" >

结果：【当文本框中的值改变时,data中的msg也随之改变】

v-once 如果展示的信息后续不需要再修改,可以使用该指令,可以提高性能

vue中样式的操作

  • :class="['类选择器','类选择器',..]" 括号中的类选择器一定要有单引号括起来
  • 如果没有单引号,则会被当做data中的属性，例如案例代码中的 flag
  • 括号中可以使用表达式
<style type="text/css">
        div{
           width: 300px;
           height: 100px;
        }
       .showStyle1{

           color:blue;
       }
       .showStyle2{

           font-size:30px;
       }
       .showStyle3{

           background-color: green;
       }
</style>

<div :class="['showStyle1','showStyle2',flag?'showStyle3':'']">
    div中的内容
</div>

var  vm = new Vue({
    el:'#app',
    data:{
        flag:true,
    }
})

  • 当flag为true时，效果如下 （请自行忽略我的程序员配色）


    image.png

  • 当flag为false时，效果如下


    image.png

简写方式,效果相同

<div :class="['showStyle1','showStyle2',{showStyle3:flag}]">
    div中的内容
</div>

:class={样式名：boolean,样式名：boolean,...} 效果同上

<style type="text/css">
        div{
           width: 300px;
           height: 100px;
        }
       .showStyle1{

           color:blue;
       }
       .showStyle2{

           font-size:30px;
       }
       .showStyle3{

           background-color: green;
       }
</style>

<div :class="{showStyle1:true, showStyle2:true, showStyle3:false}">
    div中的内容
</div>

:class="data中属性" 效果同上

var  vm = new Vue({
    el:'#app',
    data:{
        styleObj:{showStyle1:true, showStyle2:true, showStyle3:false}
    }
})

<div :class="styleObj"> div中的内容 </div>

v-for 指令 用于遍历数组、集合

ar  vm = new Vue({
    el:'#app',
    data:{
        list1:['一班','二班','三班','四班','五班']
    },
    methods:{//在这里定义当前vue实例用到的函数
    }
})

item 是数组或集合中的每个实例，只是一个变量名称，写法不是固定的

<p v-for="item in list1">{{item}}</p>

v-for="(item,i) in List" i 是每个实例的下标,从 0 开始

遍历复杂集合

var  vm = new Vue({
    el:'#app',
    data:{
        list2:[
            {id:'1' ,name :'zsa1'},
            {id:'2' ,name :'zsa2'},
            {id:'3' ,name :'zsa3'}
        ]
    },
    methods:{//在这里定义当前vue实例用到的函数
    }
})

<p v-for="user in list2">编号：{{user.id}},姓名：{{user.name}}</p>

遍历对象

<p v-for="(key,val,i) in userInfo">{{key}} -- {{val}} -- {{i}}</p>

var  vm = new Vue({
    el:'#app',
    data:{
        userInfo:{
                id:"1",
                name:"jack"
            }
    },
    methods:{//在这里定义当前vue实例用到的函数
    }
})

当list对象发生变化，vue-model会重新加载

<div>
            id:<input type="text" v-model="id" > name:<input type="text" v-model="name">
            <input type="button" value="add" v-on:click="add">
        </div>

var  vm = new Vue({
    el:'#app',
    data:{
        list1:[
                {id:'1' ,name :'zsa1'},
                {id:'2' ,name :'zsa2'},
                {id:'3' ,name :'zsa3'}
            ],
           
            id:"",
            name:""
    },
    methods:{//在这里定义当前vue实例用到的函数
          add(){
                var info = {"id":this.id,"name":this.name};
                this.list1.push(info);
            }
    }
})

v-for中的key

<div id="app">
        <input type="button" value="add" v-on:click="add">
        <p v-for="(item,i) in list " :key="item.id">
            <input type="checkbox">  {{item.id}} -- {{item.name}}
        </p>
    </div>
</body>
<script>
     var vue = new Vue({
        el:"#app",
        data:{
            list:[
                {id:"1",name:"jack"},
                {id:"2",name:"tom"},
                {id:"3",name:"alen"}
            
            ]
            
        },
        methods: {
            add(){
                var info = {id:"4",name:"Json"};
                this.list.unshift(info);
               
            }
        }
     })
</script>

删除列表中的元素

<div id="app">
        <table>
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>
                     // prevent  阻止默认事件
                    <a href="" @click.prevent="del(item.id)">删除</a>
                    <a href="" @click.prevent="del1(item.id)">删除1</a>
                </td>
            </tr>
        </table>
        
    </div>

var mv = new Vue({
        el:"#app",
        data:{
            list:[
                {id:'1' ,name :'zsa1'},
                {id:'2' ,name :'zsa2'},
                {id:'3' ,name :'zsa3'}
            ]
        },
        methods:{
            del(id){
                
                for(let i=0;i<this.list.length ;i++){
                    if(this.list[i].id == id){
                        this.list.splice(i,1);
                        break;
                    }
                }
            },
            del1(id){
                var index = this.list.findIndex(function(item){
                    return item.id == id;
                })
                this.list.splice(index,1);
            }
        }
    })

跟进内容查询过滤集合数据

<div id="app">
        
        <input type="text" value="" @change="search" v-model="searchName">
        <p v-for="item in  search(searchName)" :key="item.id">
            <input type="checkbox">   {{item.name}}
        </p>
    </div>

<script>
     var vue = new Vue({
        el:"#app",
        data:{
            list:[
                {id:"1",name:"jack"},
                {id:"2",name:"tom"},
                {id:"3",name:"alen"},
                {id:"4",name:"jackson"}
            
            ],
            searchName:""
            
        },
        methods: {
            
            search(searchNameParam){
                return this.list.filter(item => {
                    return item.name.indexOf(searchNameParam) != -1;
                });
            }
        }
     })
</script>

如果 in 后面是一个数字 ,count则从1 开始

<p v-for="count in 10">{{count}}</p>

分支结构

  • 只有表达式符合成立的标签才会展示
var  vm = new Vue({
    el:'#app',
    data:{
        score:'69'
    },
    methods:{//在这里定义当前vue实例用到的函数
    }
})

   <div id="app">
        <p v-if="score>80 && score<90">良好</p>
        <p v-else-if="score>80 && score<100">优秀</p>
        <p v-else="score<80">及格</p>
    </div>

v-show 功能与v-if相同，区别在于v-show的条件表达式为false时，实际上标签已经存在网页中，只不过设置成display:none
而v-if 并不会将标签画出

var  vm = new Vue({
    el:'#app',
    data:{
        showFlag:false
    },
    methods:{//在这里定义当前vue实例用到的函数
    }
})

    <div id="app">
        <div v-show="showFlag">演示v-show</div>
    </div>

  • 查看网页源码


    image.png

v-for 与 v-if 集合使用

<p v-if="user.id=='2'" v-for="user in list2">编号：{{user.id}},姓名：{{user.name}}</p>

vue 的常用特性

  • 表单特性 ：表单中的组件都是基于v-model进行数据绑定的
  1. 单选框,复选框,下拉选不需要配置相同的name组,只要绑定相同的v-model即可
<input type="radio" name="" value="1" v-model="sex"> 男
<input type="radio" name="" value="2" v-model="sex"> 女 

var  vm = new Vue({
    el:'#app',
    data:{
        sex:'1'
    },
    methods:{//在这里定义当前vue实例用到的函数
    }
})
  • sex 初始值时1 ,页面则默认选择男
  • 注意： 下拉选的v-model 绑定在<select> 标签中

表单修饰符

  • v-model.number 将字符串转为数字
  • v-model.trim 去除字符串两边的空白字符

Vue.js——vue-resource全攻略

Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。

vue-resource特点

1. 体积小

vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

2. 支持主流的浏览器

和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。

3. 支持Promise API和URI Templates

Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

4. 支持拦截器

拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：```
// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
    // 响应成功回调
}, function(response){
    // 响应错误回调
});


// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
    // 响应成功回调
}, (response) => {
    // 响应错误回调
});

支持的HTTP方法

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

发送get请求：

<body>
    <div id="app">
        <input type="button" v-on:click="get" value="get">
        <p v-model="getInfo">{{getInfo}}</p>
    </div>
    
</body>
<script>
    var vue = new Vue({
       el:"#app",
       data:{
           getInfo:"aa"
           
       },
       methods: {
           
           get(){
            this.$http.get('http://www.liulongbin.top:3005/api/getlunbo').then(res => {
                console.log(res.body);
            })
           }
       }
    })
</script>

发送post请求：

postInfo() {
            var url = 'http://www.liulongbin.top:3005/api/post';
            // post 方法接收三个参数：
            // 参数1： 要请求的URL地址
            // 参数2： 要发送的数据对象
            // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
            this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
                console.log(res.body);
            });
            }

发送JSONP请求获取数据：

jsonpInfo() { // JSONP形式从服务器获取数据
var url = 'http://www.liulongbin.top:3005/api/jsonp';
this.$http.jsonp(url).then(res => {
 console.log(res.body);
});
}

通过接口获取产品信息集合

<body>
    <div id="app">
        <input type="button" @click="getprodlist" value="getprodlist">
        <p v-for="item in list" :key="item.id">
            {{item.id}} --  {{item.name}} -- {{item.ctime}}
        </p>
    </div>
</body>
<script>
    var vue = new Vue({
       el:"#app",
       data:{
           list:[]
           
       },
       methods: {
           
          getprodlist(){
            this.$http.get('http://www.liulongbin.top:3005/api/getprodlist').then(res => {
                //status message
                console.log(res.body);
                if(res.body.status == 0){
                   this.list = res.body.message;
                }
            })
           }
       }
    })
</script>

什么是组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用 vue-cli 创建 .vue 模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

  <div id="app">
        <beixi></beixi>
    </div>
     <script>
        //注册组件
         Vue.component("beixi",{
             template:'<li>hello</li>'
         });
         var app = new Vue({
             el:"#app",
         });
     </script>

Vue.component()：注册组件
beixi：自定义组件的名字
template：组件的模板

使用 props 属性动态传递参数

v-for=“item in items”：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件
v-bind:value=“item”：将遍历的 item 项绑定到组件中 props 定义的名为 value属性上；= 号左边的 value 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值

<body>
    <div id="app">
        <!--组件：使用props把值传递给组件-->
        <blog-post v-for="item in items" v-bind:value="item"></blog-post>
    </div>
     <script>
         Vue.component("blog-post",{
             props:['value'],
             template:'<li>{{value}}</li>'
         });
         var app = new Vue({
             el:"#app",
             data:{
                 items:['beixi','jzj','贾志杰']
             }
         });
     </script>
</body>

什么是Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信

为什么要使用 Axios

由于 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery，因为它操作Dom太频繁！

在线引入axios。在项目开发中会安装axios组件(npm install axios)
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    axios.get("http://localhost:9001/vue/get").then(function (response) {
        console.log(response.data);
    });

    axios.post("http://localhost:9001/vue/post",{
        name:"jack",
        age:"23"
    }).then(function (response) {
        //console.log(response);
    });


@RestController
@RequestMapping("vue")
public class VueTestController {

    @RequestMapping("/get")
    public User gerUser(){
        User user = new User();
        user.setName("jack");
        user.setAge(12);
        return user;
    }

    @PostMapping("/post")
    public void setUser(@RequestBody User paramUser){
        System.out.println(paramUser.getName());
        System.out.println(paramUser.getAge());
    }
}

并发请求

将多个请求同时发送，由服务端统计处理。

   function getVue() {
        axios.get("http://localhost:9001/vue/get").then(function (response) {
            console.log(response.data);
        });
    }

    function postVue() {
        axios.post("http://localhost:9001/vue/post",{
            name:"jack",
            age:"23"
        }).then(function (response) {
            //console.log(response);
        });
    }
     //返回结果处理
     axios.all([getVue(),postVue()]).then(axios.spread(function (res1,res2) {
        console.log(res1.data);
        console.log(res2.data);
    }));

什么是计算属性

当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护

computed主要的作用:

分离逻辑(模板和数据分离)
  缓存值
  双向绑定(getter,setter)

<body>
    <div id="app">
        <input type="text"  v-model="num1"/><input type="text" v-model="num2"/>
        <p>求和结果{{result}}</p>
    </div>
    
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{num1:1,num2:2},
        computed:{//计算属性
           result:function(){
               return parseInt(this.num1)+parseInt(this.num2);
           }
        }
    })
</script>

npm安装vue ,vue-cli

安装node.js

https://nodejs.org/en/

从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了

image.png

-- 镜像加速
npm config set registry=http://registry.npm.taobao.org

image.png

安装vue

image.png

安装vue-cli

image.png

初始化vue项目目录

image.png

启动vue

image.png

安装webpack


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

推荐阅读更多精彩内容

  • VUE 简介
    基本用法 一、vuejs简介 是一个构建用户界面的框架 是一个轻量级的MVVM（Model-View-ViewMo...
    深度剖析JavaScript阅读 18,166评论 0赞 8
  • Vue.js入门指南
    最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容...
    忘川慕白阅读 5,819评论 7赞 113
  • 狂神说vue笔记整合
    狂神说Vue笔记 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本...
    华夏天骄阅读 698评论 0赞 0
  • vue 学习总结
    # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,480评论 0赞 6
  • # vue
    编码步骤 引入vue.js文件 定义一个vue的管理范围 vue1.0里面vue的管理区域的id可以定义在...
    Ht_何甜阅读 951评论 0赞 1