全干工程師的自我修養(yǎng)---vue第二部分

1、組件

1.1 創(chuàng)建組件

在components里面放置我們自己寫的組件，例如在components文件夾里面創(chuàng)建一個Home組件。

創(chuàng)建好組件后，我們來看看組件由哪些組成呢卵蛉？

有模板 template script style

Home.vue

<template>
  <div class="header">
    <h2 class="word">{{msg}}</h2>
    <button class="btn" @click="run()">點(diǎn)擊顯示msg</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '我是一個header組件'
    }
  },
  methods: {
    run(){
      alert(this.msg);
    }
  },
}
</script>

1.2使用Home組件

在app.vue中引入組件并使用：

第一步：引入組件

第二部：掛載組件

第三部： 在模板中使用

app.vue

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!--使用組件-->
    <v-home></v-home>
   <!-- <router-view/>  -->
  </div>
</template>

<script>
// 引入組件
import Home from './components/Home.vue'
export default {
  name: 'App',
  data() {
    return {

    }
  },
  // 掛載組件
  components:{
    "v-home": Home
  }

}
</script>

<style>

</style>

接下來引入樣式

<style scoped>
  .header{
    background: pink;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .btn{
    border: 1px solid skyblue;
    padding: 2px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

  }
  .word{
    color: red;
  }
</style>

css樣式上面加上scoped,表示該樣式是在局部作用域上起作用

1.3 組件運(yùn)用

1、創(chuàng)建一個News.vue新聞組件

<template>
  <div>

     <h2>這是一個新聞組件</h2>
     <ul>
       <li>11111</li>
       <li>22222</li>
        <li>33333</li>
     </ul>
  </div>
</template>

<script>

</script>

<style  scoped>

</style>

2凯正、將Header組件引入News組件

<template>
  <div>
     <h2>這是一個新聞組件</h2>
     <ul>
       <li>11111</li>
       <li>22222</li>
        <li>33333</li>
     </ul>
  </div>
</template>

<script>
//引入header組件
import Header from './Home'
export default {
  data() {
    return {

    }
  },
  //掛載header組件
  components:{
    "v-header": Header,
  }
}
</script>

<style  scoped>

</style>

3毙玻、使用Header組件

<template>
  <div>
  <!--使用header組件-->
    <v-header></v-header>
     <h2>這是一個新聞組件</h2>
     <ul>
       <li>11111</li>
       <li>22222</li>
        <li>33333</li>
     </ul>
  </div>
</template>

4、將news組件引入并掛載到app.vue組件

<script>
// 引入組件
// import Home from './components/Home.vue'
import News from './components/News.vue'
export default {
  name: 'App',
  data() {
    return {

    }
  },
  // 掛載組件
  components:{
    // "v-home": Home,
    "v-news": News
  }

}
</script>

6廊散、使用組件

<template>
  <div id="app">
   <v-news></v-news>
  </div>
</template>

2桑滩、生命周期函數(shù)

定義：組件掛載及組件更新組件銷毀時(shí)觸發(fā)的一系列方法

示意圖：
Vue 實(shí)例生命周期

共有8個聲明周期函數(shù)，在這里，我們選取一些出來：

  mounted() {
    console.log("mounted")
  },
  beforeCreate() {
    console.log("before create")
  },
  beforeMount() {
    console.log("before mount")
  },
  beforeUpdate() {
    console.log("before update")
  },
  destroyed() {
    console.log("destoryed")
  },
  beforeDestroy() {
    console.log("before destroy")
  },
  created() {
    console.log("created")
  },
  updated(){
       console.log("updated")
  }

一運(yùn)行這些函數(shù)就會運(yùn)行：

before create
Life.vue?3ece:40 created
Life.vue?3ece:28 before mount
Life.vue?3ece:22 mounted

一修改數(shù)據(jù)：

before update
Life.vue?3ece:43 updated

最后還有銷毀运准，這個函數(shù)在銷毀的時(shí)候調(diào)用幌氮。

news，vue

<template>
  <div>
    <v-header></v-header>
     <h2>這是一個新聞組件</h2>
     <ul>
       <li>11111</li>
       <li>22222</li>
        <li>33333</li>
     </ul>
     <hr>
     <v-life v-if="flag"></v-life>
     <button @click="flag=!flag">掛載及卸載life組件</button>
  </div>
</template>

<script>
import Header from './Home.vue'
import Life from './Life.vue'
export default {
  data() {
    return {
      flag: true,

    }
  },
  components:{
    "v-header": Header,
    "v-life": Life
  }
}
</script>

<style  scoped>

</style>

life.vue

<template>
  <div>
      <p>生命周期的演示 ------{{msg}}</p>
      <button class="btn" @click="setMsg()" >change msg</button>
  </div>

</template>

<script>
export default {
  data() {
    return {
      msg: 'msg',

    }
  },
  methods: {
    setMsg(){
      this.msg = "我是改變后的msg"
    }
  },
  mounted() {
    console.log("mounted")
  },
  beforeCreate() {
    console.log("before create")
  },
  beforeMount() {
    console.log("before mount")
  },
  beforeUpdate() {
    console.log("before update")
  },
  destroyed() {
    console.log("destoryed")
  },
  beforeDestroy() {
    console.log("before destroy")
  },
  created() {
    console.log("created")
  },
    updated(){
       console.log("updated")
  }
}
</script>

<style scoped>

</style>

點(diǎn)擊卸載時(shí)胁澳，就會調(diào)用destory及beforeDestory方法该互。

3、請求數(shù)據(jù)模塊vue-source

3.1安裝vue-resource

第一步： 打開https://github.com/

第二步： 搜索vue-resource

第三部： 進(jìn)入https://github.com/pagekit/vue-resource

第四部： 查看文檔

進(jìn)入文檔后韭畸，我們可以看到要使用這個模塊得先安裝它宇智，具體安裝如下：

You can install it via yarn or NPM.

$ yarn add vue-resource
$ npm install vue-resource --save

CDN

Available on jsdelivr, unpkg or cdnjs.

<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

并且還有實(shí)例：

Example

{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}

3.2引入vue-resource

在main.js文件中:

import VueResouce from 'vue-resource'

接下來還要使用：

Vue.use(VueResouce)

然后創(chuàng)建我們自己的實(shí)例，幫助我們理解vue-resource的用法：

創(chuàng)建requestData.vue

<template>
  <div>
    <button class="btn" @click="getApiData()">請求api數(shù)據(jù)</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
     
    }
  },
  methods: {

    getApiData(){
      var api= 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
       // GET /someUrl
      this.$http.get(api).then(response => {

       
        console.log(response)

      }, response => {
        // error callback
        console.log("未訪問到數(shù)據(jù)")
      });
    }
  },
}
</script>

<style scoped>

</style>

將它注冊到app.vue組件上面去胰丁。

點(diǎn)擊請求按鈕：獲得json數(shù)據(jù):

Response {url: "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1", ok: true, status: 200, statusText: "OK", headers: Headers, …}
body: {result: Array(20)}
bodyText: "{"result":[{"aid":"499","catid":"20","username":"admin","title":"\u3010\u56fd\u5185\u9996\u5bb6\u3011\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u9891\u6559\u7a0b\u514d\u8d39\u4e0b\u8f7d","pic":"portal\/201610\/13\/211832yvlbybpl3rologrr.jpg","dateline":"1476364740"},{"aid":"498","catid":"20","username":"admin","title":"ionic\u57df\u8d44\u6e90\u5171\u4eab CORS \u8be6\u89e3","pic":"","dateline":"1472952906"},{"aid":"497","catid":"20","username":"admin","title":"\u79fb\u52a8\u7aef\u89e6\u6478\u6ed1\u52a8js\u63d2\u4ef6_html5\u624b\u673a\u7aef\u8f6e\u64ad\u63d2\u4ef6","pic":"portal\/201606\/28\/211604ullzo5arr4iurnum.jpg","dateline":"1467119820"},{"aid":"496","catid":"20","username":"admin","title":"\u672a\u6765\u7a0b\u5e8f\u5458\u4f1a\u88ab\u673a\u5668\u4eba\u53d6\u4ee3\u5417\uff1f","pic":"portal\/201606\/02\/221818eafffffm4srfdf4s.jpg","dateline":"1464874140"},{"aid":"495","catid":"20","username":"admin","title":"\u9524\u5b50\u5b89\u5168\u9524_\u9524\u5b50\u771f\u7684\u51fa\u4e86\u4e2a\u201c\u9524\u5b50\u201d\uff1a\u8f66\u5145\uff0b\u5b89\u5168\u9524","pic":"portal\/201605\/20\/213752f6i56f1e0hbfzhkb.jpg","dateline":"1463751505"},{"aid":"494","catid":"20","username":"admin","title":"html5\u80fd\u505a\u4ec0\u4e48_html5\u80fd\u505a\u54ea\u4e9b\u5f00\u53d1\uff1f","pic":"","dateline":"1463664540"},{"aid":"493","catid":"20","username":"admin","title":"\u5e73\u5b89\u53e3\u888b\u94f6\u884cApp\u91c7\u7528-Cordova\u6df7\u5408\u5f00\u53d1","pic":"","dateline":"1463294580"},{"aid":"492","catid":"20","username":"admin","title":"JavaScript Emoji \u8868\u60c5\u5e93_js \u7c7b\u4f3c\u4e8eqq\u5fae\u4fe1\u7684\u8868\u60c5\u5e93","pic":"portal\/201604\/25\/084907r2e3im3dvd1q3f7z.jpg","dateline":"1461545392"},{"aid":"491","catid":"20","username":"admin","title":"cordova\u70ed\u66f4\u65b0\u63d2\u4ef6-\u4e0d\u53d1\u5e03\u5e94\u7528\u5e02\u573a\u52a8\u6001\u66f4\u65b0APP\u6e90\u7801","pic":"portal\/201604\/12\/152638zaxz5xz3t58bfts2.png","dateline":"1460446140"},{"aid":"490","catid":"20","username":"admin","title":"\u592e\u884c\u65b0\u89c4\uff01\u652f\u4ed8\u5b9d\u3001\u5fae\u4fe1\u7528\u6237\u522b\u5fd8\u505a\u8fd9\u4ef6\u4e8b","pic":"portal\/201603\/29\/144942tcnnenueefagukfk.jpg","dateline":"1459234206"},{"aid":"471","catid":"20","username":"admin","title":"HTML5 \u79fb\u52a8app\u5f00\u53d1\u6846\u67b6\u8be5\u5982\u4f55\u9009\u62e9","pic":"portal\/201511\/15\/163112q4kz6k2rgcgpi1tc.jpg","dateline":"1457771160"},{"aid":"488","catid":"20","username":"admin","title":"\u7eafCSS3\u52a8\u753b\u6309\u94ae\u6548\u679c,\u53ef\u7528\u4e8e\u79fb\u52a8wap app\u5f00\u53d1","pic":"portal\/201603\/09\/202742r1kngyt17na7n1nk.jpg","dateline":"1457526780"},{"aid":"487","catid":"20","username":"admin","title":"\u4eac\u4e1c\u6bcf\u5929\u4e8f\u4e0a\u4ebf_\u4e0d\u4f1a\u6284\u88ad\u3001\u527d\u7a83?\u5fc5\u5c06\u6b7b\u5728\u4e92\u8054\u7f51\u4e0b\u4e00\u7ad9\u7684\u8d77\u70b9\u4e0a! ...","pic":"portal\/201603\/02\/155825h28zxs2vsxjccv4c.jpg","dateline":"1456905746"},{"aid":"486","catid":"20","username":"admin","title":"ionic react-native\u548cnative\u5f00\u53d1\u79fb\u52a8app\u90a3\u4e2a\u597d","pic":"portal\/201602\/25\/193433dtzfvlzl1oavhljy.jpg","dateline":"1456398960"},{"aid":"484","catid":"20","username":"admin","title":"\u8fd912\u884c\u4ee3\u7801\u5206\u5206\u949f\u8ba9\u4f60\u7535\u8111\u5d29\u6e83\u624b\u673a\u91cd\u542f","pic":"","dateline":"1453426595"},{"aid":"483","catid":"20","username":"admin","title":"\u7f57\u632f\u5b87\u7f57\u6c38\u6d69\u96f7\u519b\u4eec\u7684\u6f14\u8bb2 \u4f60\u559c\u6b22\u54ea\u4e00\u4e2a","pic":"","dateline":"1452226800"},{"aid":"482","catid":"20","username":"admin","title":"ionic-native-transitions\u8ba9\u4f60\u7684Ionic\u5e94\u7528\u6bd4\u539f\u751f\u8fd8\u5feb","pic":"portal\/201601\/07\/135529z4r7gwglv4rw8l74.jpeg","dateline":"1452145500"},{"aid":"481","catid":"20","username":"admin","title":"ionic 1.2.4 \u53d1\u5e03\uff0c\u6700\u597d\u7684html5\u79fb\u52a8app\u5f00\u53d1\u6846\u67b6","pic":"portal\/201601\/05\/132107h9bllr7li74zoh49.jpg","dateline":"1451971293"},{"aid":"480","catid":"20","username":"admin","title":"phonegap\u53d1\u5e03\u5e94\u7528\u5230appstore","pic":"portal\/201601\/05\/122115yhh22i77sqn2ijc6.jpg","dateline":"1451967910"},{"aid":"479","catid":"20","username":"admin","title":"HTML5\u4eff\u82f9\u679c\u5e94\u7528\u7684\u52a8\u753b","pic":"portal\/201601\/04\/220252ycyddectvivr55pq.png","dateline":"1451916189"}]}"
headers: Headers {map: {…}}
ok: true
status: 200
statusText: "OK"
url: "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"
data: (...)
__proto__: Object

最后随橘，對數(shù)據(jù)進(jìn)行封裝展示：

在data屬性里面添加一個集合接收數(shù)據(jù)：list:[]

在response里獲取數(shù)據(jù)列表賦值給list

  data() {
    return {
      resultList: []
    }
  },

  // console.log(response)
        this.resultList = response.data.result;

將數(shù)據(jù)展示到頁面上：

 <hr>
    <div class="details">
      <h2>api獲取數(shù)據(jù)展示</h2>
        <ul>
          <li v-for="(item, index) in resultList" :key="index">title : {{item.title}}</li>
        </ul>
    </div>

顯示數(shù)據(jù)如下：

api獲取數(shù)據(jù)展示
title : 【國內(nèi)首家】微信小程序視頻教程免費(fèi)下載
title : ionic域資源共享 CORS 詳解
title : 移動端觸摸滑動js插件_html5手機(jī)端輪播插件
title : 未來程序員會被機(jī)器人取代嗎？
title : 錘子安全錘_錘子真的出了個“錘子”：車充＋安全錘
title : html5能做什么_html5能做哪些開發(fā)锦庸？
title : 平安口袋銀行App采用-Cordova混合開發(fā)
title : JavaScript Emoji 表情庫_js 類似于qq微信的表情庫
title : cordova熱更新插件-不發(fā)布應(yīng)用市場動態(tài)更新APP源碼
title : 央行新規(guī)机蔗！支付寶、微信用戶別忘做這件事
title : HTML5 移動app開發(fā)框架該如何選擇
title : 純CSS3動畫按鈕效果,可用于移動wap app開發(fā)
title : 京東每天虧上億_不會抄襲甘萧、剽竊?必將死在互聯(lián)網(wǎng)下一站的起點(diǎn)上! ...
title : ionic react-native和native開發(fā)移動app那個好
title : 這12行代碼分分鐘讓你電腦崩潰手機(jī)重啟
title : 羅振宇羅永浩雷軍們的演講 你喜歡哪一個
title : ionic-native-transitions讓你的Ionic應(yīng)用比原生還快
title : ionic 1.2.4 發(fā)布萝嘁，最好的html5移動app開發(fā)框架
title : phonegap發(fā)布應(yīng)用到appstore
title : HTML5仿蘋果應(yīng)用的動畫

這一節(jié)的代碼：

requestData.vue:

<template>
  <div>
    <button class="btn" @click="getApiData()">請求api數(shù)據(jù)</button>
    <hr>
    <div class="details">
      <h2>api獲取數(shù)據(jù)展示</h2>
        <ul>
          <li v-for="(item, index) in resultList" :key="index">title : {{item.title}}</li>
        </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      resultList: []
    }
  },
  methods: {

    getApiData(){
      var api= 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
       // GET /someUrl
      this.$http.get(api).then(response => {

        // get body data

        // console.log(response)
        this.resultList = response.data.result;

      }, response => {
        // error callback
        console.log("未訪問到數(shù)據(jù)")
      });
    }
  },
}
</script>

<style scoped>

</style>

app.vue:

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!--使用組件-->
    <!-- <v-home></v-home>  -->
   <!-- <router-view/>  -->
  <!-- <v-news></v-news> -->
  <request-data></request-data>
  </div>
</template>

<script>
// 引入組件
// import Home from './components/Home.vue'
// import News from './components/News.vue'
import RequestData from './components/requestData.vue'
export default {
  name: 'App',
  data() {
    return {

    }
  },
  // 掛載組件
  components:{
    // "v-home": Home,
    // "v-news": News
    "request-data": RequestData
  }

}
</script>

<style>

</style>

3.3本節(jié)總結(jié)

使用vue-resource的步驟：

1、安裝vue-resouce

cnpm install vue-source --save

2扬卷、main.js引入及使用vue-resouce

import VueResource from 'vue-source'
Vue.use(VueResource)

3牙言、組件中使用

this.$http.get(api).then(res=>{
    //成功后返回的res
},res=>{
    //失敗后的callback
})

4、axios的使用

4.1安裝axios

npm install axios --save

4.2哪里引入哪里使用

具體使用請看: https://github.com/axios/axios

我們這里根據(jù)官網(wǎng)編寫了一個測試實(shí)例:

header.vue

app.vue

<template>
  <div id="app">
    <v-header></v-header>
  </div>
</template>

<script>
import Header from './components/Header.vue'
export default {
  name: 'App',
  components:{
    "v-header": Header
  }
  
}
</script>

<style>

</style>

點(diǎn)擊按鈕,顯示可得到和vue-resource一樣的結(jié)果

5 父向子組件傳值

5.1 傳值

首先創(chuàng)建2個組件,一個時(shí)Home.vue,一個時(shí)Header.vue,Home.vue里面引入Header組件,即形成了父子組件關(guān)系,

在模板里傳入給子組件的值,然后在子組件里使用prop['值'],然后就可以在子組件里使用父組件傳的值了.

好了,話不多說,直接上代碼:

Home.vue

<template>
    <div>
        <v-header :title="title" :run="run"></v-header>
        <p>我是home組件</p>
        
    </div>
</template>
<script>
import Header1 from './Header1.vue'
export default {
    data(){
        return{
            msg: '我是一個home組件',
            title: '首頁'
        }
    },
    methods:{
        run(data){
            alert('我是父組件的run方法'+data)
        }
    },
    components:{
        "v-header": Header1,
    }


}
</script>

Header.vue

<template>
    <div>
        <p>我是Header組件 ----{{title}}</p>
        <button @click="run('123')">執(zhí)行父組件的run方法</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    props:['title','run']
}
</script>

顯示如下:

5.2 小節(jié)

父組件給子組件傳值:

  1. 綁定動態(tài)屬性 : 如上面的 :title
  2. 子組件通過props接收父組件傳來的值

6 父組件自動獲取子組件的值

父組件自動獲取子組件的數(shù)據(jù)的方法:

1.調(diào)用子組件的時(shí)候定義一個ref

2.在父組件里通過

this.$ref.header.屬性
this.$ref.header.方法

子組件自動獲取父組件的數(shù)據(jù)和方法:

this.$parent.數(shù)據(jù)
this.$parent.方法

代碼如下:

Home.vue

<template>
    <div>
        <v-header ref="header"></v-header>
        <p>我是home組件</p>
        <button @click="getChildData()">獲取子組件的數(shù)據(jù)</button>
        <button @click="getChildrun()">獲取子組件的方法</button>
    </div>
</template>
<script>
import Header1 from './Header1.vue'
export default {
    data(){
        return{
            msg: '我是一個home組件',
            title: '首頁'
        }
    },
    methods:{
        // 獲取子組件的數(shù)據(jù)
        getChildData(){
            alert(this.$refs.header.msg);
        },
        getChildrun(){
            this.$refs.header.run();
        }
    },
    components:{
        "v-header": Header1,
    }


}
</script>

header.vue

<template>
    <div>
        <p>我是Header組件</p>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: '子組件的msg'
        }
    },
    methods:{
        run(){
            alert("子組件的run方法")
        }
    }

}
</script>

這樣就可以使父組件自動獲取子組件的值了.

同理,要使子組件自動獲取父組件的值,只需要在子組件里使用this.$parent.數(shù)據(jù)/方法就行了.

還有非父子組件傳值:

7 路由

參考:https://router.vuejs.org/zh/

  1. 安裝路由組件

    cnpm install vue-router --save

  2. 引入

    創(chuàng)建一個router目錄,在里面放置一個index.js

    import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  3. 使用方法

    // 0. 如果使用模塊化機(jī)制編程邀泉，導(dǎo)入Vue和VueRouter嬉挡，要調(diào)用 Vue.use(VueRouter)

// 1. 定義 (路由) 組件。
// 可以從其他文件 import 進(jìn)來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個路由應(yīng)該映射一個組件汇恤。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器，
// 或者拔恰，只是一個組件配置對象因谎。
// 我們晚點(diǎn)再討論嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 創(chuàng)建 router 實(shí)例颜懊，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧财岔。
const router = new VueRouter({
  routes // (縮寫) 相當(dāng)于 routes: routes
})

// 4. 創(chuàng)建和掛載根實(shí)例。
// 記得要通過 router 配置參數(shù)注入路由河爹，
// 從而讓整個應(yīng)用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現(xiàn)在匠璧，應(yīng)用已經(jīng)啟動了

還有導(dǎo)航守衛(wèi)等等知識點(diǎn),具體青去https://router.vuejs.org/zh/

獲取更多內(nèi)容

獲取更多內(nèi)容請?jiān)L問： https://juntech.top/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市咸这，隨后出現(xiàn)的幾起案子夷恍，更是在濱河造成了極大的恐慌，老刑警劉巖媳维，帶你破解...
    沈念sama閱讀 211,042評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件酿雪，死亡現(xiàn)場離奇詭異遏暴，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)指黎，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2贊 384
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門朋凉，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人醋安，你說我怎么就攤上這事杂彭。” “怎么了吓揪？”我有些...
    開封第一講書人閱讀 156,674評論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵盖灸，是天一觀的道長。 經(jīng)常有香客問我磺芭，道長赁炎，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,340評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任钾腺，我火速辦了婚禮徙垫，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘放棒。我一直安慰自己姻报，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布间螟。 她就那樣靜靜地躺著吴旋，像睡著了一般。 火紅的嫁衣襯著肌膚如雪厢破。 梳的紋絲不亂的頭發(fā)上荣瑟，一...
    開封第一講書人閱讀 49,749評論 1贊 289
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音摩泪，去河邊找鬼笆焰。 笑死，一個胖子當(dāng)著我的面吹牛见坑，可吹牛的內(nèi)容都是我干的嚷掠。 我是一名探鬼主播，決...
    沈念sama閱讀 38,902評論 3贊 405
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼荞驴，長吁一口氣：“原來是場噩夢啊……” “哼不皆！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起熊楼，我...
    開封第一講書人閱讀 37,662評論 0贊 266
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤霹娄，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體项棠，經(jīng)...
    沈念sama閱讀 44,110評論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡悲雳，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了香追。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片合瓢。...
    茶點(diǎn)故事閱讀 38,577評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖透典，靈堂內(nèi)的尸體忽然破棺而出晴楔，到底是詐尸還是另有隱情，我是刑警寧澤峭咒，帶...
    沈念sama閱讀 34,258評論 4贊 328
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布税弃，位于F島的核電站，受9級特大地震影響凑队，放射性物質(zhì)發(fā)生泄漏则果。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一漩氨、第九天 我趴在偏房一處隱蔽的房頂上張望西壮。 院中可真熱鬧，春花似錦叫惊、人聲如沸款青。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0贊 21
  • 一樁弒父案霍狰，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽抡草。三九已至，卻和暖如春蔗坯，著一層夾襖步出監(jiān)牢的瞬間康震，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來泰國打工步悠， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留签杈，地道東北人。 一個月前我還...
    沈念sama閱讀 46,271評論 2贊 360
  • 代替公主和親
    正文 我出身青樓鼎兽，卻偏偏與公主長得像，于是被迫代替她去往敵國和親铣除。 傳聞我的和親對象是個殘疾皇子谚咬，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評論 2贊 348

推薦閱讀更多精彩內(nèi)容

  • Vue八個生命周期 beforeCreate【創(chuàng)建前】created【創(chuàng)建后】 beforeMount【載入前】 ...
    艾薩克菊花閱讀 1,307評論 0贊 12
  • vue是什么？ vue是構(gòu)建數(shù)據(jù)驅(qū)動的web界面的漸進(jìn)式框架尚粘。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)...
    九四年的風(fēng)閱讀 8,697評論 2贊 131
  • _________________________________________________________...
    fastwe閱讀 1,367評論 0贊 0
  • SPA單頁應(yīng)用 傳統(tǒng)的項(xiàng)目大多使用多頁面結(jié)構(gòu)祈噪，需要切換內(nèi)容的時(shí)候我們往往會進(jìn)行單個html文件的跳轉(zhuǎn)，這個時(shí)候受網(wǎng)...
    視覺派Pie閱讀 11,815評論 1贊 55
  • vue-cli搭建項(xiàng)目 確保安裝了node與npm 再目標(biāo)文件夾下打開終端 執(zhí)行cnpm i vue-cli -g...
    Akiko_秋子閱讀 3,215評論 1贊 22