Vue基礎Day02判斷循環(huán)_其它指令_axios

最近在重寫 vue 基礎講義，歡迎大爺大娘們 留言 【批評斧正】
記得 留言點贊，愛你們，么么噠 ：）~~

一.核心內容

1.條件與循環(huán)指令

1.1 v-for(循環(huán))

可以用 v-for 遍歷 數(shù)據(jù)，并循環(huán) 生成 所在的標簽

1.1.1 遍歷數(shù)組
  • 語法：v-for="(item,index) in array
  • 參數(shù)：可選
    • item - 數(shù)組的元素
    • index - 元素的下標
  • 注意：參數(shù)名可自己取
<div id="app">
    <ul>
        <li>遍歷數(shù)組：</li>
        <li v-for="(item,index) in myArry">下標：{{index}} -> 值：{{item}}</li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            myArry: ['P城', 'Y城', '軍事基地', '研究所', 'G港']
        }
    });
</script>
  • 詳解：v-for 會 根據(jù)數(shù)組 中的 元素 生成 自己所在的標簽，添加到dom數(shù)中，在頁面上顯示
遍歷數(shù)組
1.1.2 遍歷對象
  • 語法： v-for="(value，key，index in object)
  • 參數(shù)：可選
    • value - 對象屬性值
    • key - 對象屬性名
    • index - 對象屬性序號(從0開始)
<div id="app">
    <ul>
        <li>遍歷對象：</li>
        <li v-for="(value,key,index) in dogObj">{{value}} -> {{key}} -> {{index}}</li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            dogObj: {
                name: "Ruiky",
                age: 2,
                gender: true
            }
        }
    });
</script>
1.1.3 遍歷字符串
  • 語法:v-for="(item,index) in array
  • 參數(shù)：可選
    • item - 數(shù)組的元素
    • index - 元素的下標
<div id="app">
    <ul>
        <li>遍歷字符串：</li>
        <li v-for="(str,index) in heroName">{{str}} ->{{index}}</li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            heroName:'RuikyPuppy'
        }
    });
</script>

1.2 條件判斷

有條件的渲染某些元素內容

1.2.1 v-if 指令
  • 語法：v-if="bool值 或 表達式"，如果 是 true，則顯示 當前標簽，否則不顯示
  • 需求：輸入年齡 >= 18 就 顯示 "正規(guī)盲人按摩"；否則隱藏。
v-if 指令
<div id="app">
    <input type="text" placeholder="請輸入年齡：" v-model="age">
    
    <div v-if="age>=18">正規(guī)盲人按摩</div>
    <div>嗯，我的存在就是為了避免你誤入歧途~~~</div>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 18
        }
    })
</script>
1.2.2 v-else 指令

  • 語法：v-else

  • 注意：上一個兄弟元素 必須 使用了 v-if 或 v-else-if

  • 效果：當 v-if 或 v-else-if 不成立時，則 顯示 v-else 所在的標簽

  • 需求：輸入年齡 >= 18 就 顯示 "正規(guī)盲人按摩"；否則顯示 "提示"

v-else
<div id="app">
    <input type="text" placeholder="請輸入年齡：" v-model="age">
    
    <div v-if="age>=18"><h1>正規(guī)盲人按摩</h1></div>
    <div v-else>嗯，我的存在就是為了避免你誤入歧途~~~</div>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 18
        }
    })
</script>
1.2.3 v-else-if 指令
  • 語法：v-else-if="bool值 或 表達式"，如果 是 true，則顯示 當前標簽，否則不顯示
  • 注意：上一個兄弟元素 必須 使用了 v-if 或 v-else-if
  • 需求：輸入成績，>=90 , >=70 , < 70 顯示不同文字
v-else-if
<div id="app">
    <input type="text" placeholder="請輸入相應成績" v-model="score">
    
    <div v-if="score>90">666，你一定見過凌晨4點的深圳~~</div>
    <div v-else-if="score>70">潛力巨大哦~~~</div>
    <div v-else>這次成績不理想，是不有脫單了？</div>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            score: 100
        }
    })
</script>

2.其他指令

2.1 v-show 指令(了解)

  • 作用：根據(jù)條件 控制 標簽是否顯示 (display:none)
<div id="app">
    <button @click="isShow=!isShow">隱藏或顯示</button>
    <h1 v-show="isShow">我眼睛比你好看，因為，我的眼里有你~~</h1>
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: true
        }
    })
</script>

  • 圖解：


    v-show

2.2 v-show 和 v-if 區(qū)別

  • 特點：
    • v-show：在頁面加載時 就創(chuàng)建 dom ，只是 通過 display 控制顯示與否
    • v-if ：只有遇到 true 時，才 創(chuàng)建 dom ；變成 false 后，又 會移出 dom
  • 優(yōu)劣
    • v-if 會 銷毀 和 重建，開銷比較大
    • v-show 只會創(chuàng)建一次，且 不會真的被銷毀，開銷比較小
* 課堂小彩蛋

當需要頻繁切換 顯示 和 異常 一個 div 時，我們用 哪個比較好呢？

a.v-show

b.v-if

  • 經驗：當需要頻繁顯示隱藏時，使用 v-show 比較好。

2.3 v-cloak 指令(了解)

瀏覽器 加載 vue.js 執(zhí)行 的過程 有可能 花較長時間，這時 頁面上的 {{胡子語法}} 就會被普通用戶看到。
我們可以通過 v-cloak 先把 包含胡子語法的標簽隱藏起來。等 Vue.js 加載并執(zhí)行完后，會再顯示。

  • 問題：網絡延遲，頁面會顯示 {{loverName}} 出來~~！
  • 效果：
不使用v-cloak
<div id="app">
    <h1>{{loverName}}，我眼睛比你好看，因為，我的眼里有你~~</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            loverName: 'Lucy'
        }
    })
</script>
  • 解決
    • 添加 v-cloak 屬性選擇器
    • 為 包含 {{}} 的標簽 添加 v-cloak 屬性

    • 效果：


      v-cloak
<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <h1 v-cloak>{{loverName}}，我眼睛比你好看，因為，我的眼里有你~~</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            loverName: 'Lucy'
        }
    })
</script>
  • 原理：vue.js 加載完畢后，會在處理完數(shù)據(jù)后，移除 所有 元素中 的 v-cloak 屬性，此時，胡子語法已經變成數(shù)據(jù)了。
image.png

2.4 v-once 指令(了解)

vue 的特點是雙向綁定，但偶爾有時候，某個元素的內容，只要在第一次 根據(jù) data 數(shù)據(jù)生成；
之后 不管 data數(shù)據(jù)怎么改，都不要更新到 元素中。

  • 語法：v-once 為標簽添加后，該標簽只會被 vue 根據(jù) data 渲染一次，之后 脫離 vue 管理
<div id="app">
    <input type="text" v-model="loverName" />
    
    <!-- 只在 vue 第一次加載時，從 data 中取出數(shù)據(jù)，之后，不管怎么改data，此標簽內容都不會變-->
    <h1 v-once>{{loverName}}，我眼睛比你好看，因為，我的眼里有你~~</h1>
    
    <!-- 改data，此標簽內容會變-->
    <h1>{{loverName}}，我眼睛比你好看，因為，我的眼里有你~~</h1>
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            loverName: 'Lucy'
        }
    });
</script>

2.5 v-pre 指令(了解)

直接 跳過 標簽中的 胡子語法

  • 語法： v-pre 
<div id="app">
    <!--跳過 胡子語法-->
    <h1 v-pre>{{loverName}}，我眼睛比你好看，因為，我的眼里有你~~</h1>
    <!--解析 胡子語法-->
    <h1>{{loverName}}，我眼睛比你好看，因為，我的眼里有你~~</h1>
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            loverName: 'Lucy'
        }
    })
</script>

  • 結果：


    v-pre

3.axios 基本使用

小巧易用的 http 請求 框架，它的 ajax 封裝的 比 jquery 更優(yōu)秀~~~

  • 官網：http://www.axios-js.com/zh-cn/docs/

  • 庫地址：https://unpkg.com/axios/dist/axios.min.js

  • 特點：

    • 原生 ajax 太麻煩
    • jquery 功能太豐富（渣男），axios 只做 請求，無dom/bom操作（純男）
    • axios 功能少，文件體積小，網絡加載快；
    • axios 專注請求，關于請求的功能豐富（請求攔截、數(shù)據(jù)返回攔截等，以后講）
    • axios 支持 promise
    • axios 支持 瀏覽器端 和 nodejs服務端

3.1 get請求

  • 測試地址：https://autumnfish.cn/api/joke/list?num=10
  • 語法：
    • 不帶參數(shù) axios.get(url).then( ).catch( )
    • 帶參數(shù)
      • axios.get(url?參數(shù)).then( ).catch( )
      • axios.get(url,{ 參數(shù)對象 }).then( ).catch( )
//get請求
axios.get('請求接口路徑', 
         {
            params: { ID: 12345 }
         })
    .then(res=>{
        console.log(res.data);
    })  
    .catch(err=>{
        console.log(err.message);
    });
  • 注意：如果不用 箭頭函數(shù)，那么 函數(shù)中的 this 將 得不到 Vue實例對象

3.2 post請求

  • 測試地址：https://autumnfish.cn/api/user/reg 參數(shù): username
  • 語法：
    • 不帶參數(shù) axios.post(url).then( ).catch( )
    • 帶參數(shù) axios.get(url,{ 參數(shù)對象 }).then( ).catch( ) 
//post請求
axios.post('請求接口路徑',          
           {
            firstName: 'James',
            lastName: 'Zou'
           })
    .then(res=>{
        console.log("成功");
    })  
    .catch(err=>{
        console.log("失敗：" + err.message);});

3.3 config配置模式

  • 語法：axios({配置信息對象}).then( ).catch( )
  • 配置信息對象：
    • method : 請求方式 get/post/...
    • url: 請求路徑
    • data: post 參數(shù)
    • params：get 參數(shù)
//axios(config)模式  
axios({
        method: '請求方法如:post.get',
        url: '請求接口路徑',
        data: {}, // post 數(shù)據(jù)
        params: {}  // get 數(shù)據(jù)
}).then(response=>{
    console.log("成功的處理");
})  
  .catch(error=>{
    console.log("錯誤的處理");
});

建議 以后開發(fā)時 使用 配置模式，企業(yè)多用此方式，比較靈活

4.Vue生命周期

4.1 生命周期圖

每個 Vue 實例 都有自己的生命 - 誕生到銷毀，這個過程 就叫做 生命周期

Vue 實例 生命周期圖

4.2 生命周期中的鉤子

“每個 Vue 實例 的生命中，都要要經過一系列的初始化過程——例如，需要設置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等”

“同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了開發(fā)者在不同階段添加自己的代碼的機會。”

  • Vue生命周期 8 大鉤子，今天先學 第1個 和 第2個
Vue生命周期 8 大鉤子
  • 語法：直接 將鉤子函數(shù) 添加到 Vue 對象中
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {},
        beforeCreated(){
            // ....
        },
        created(){
            // ....
        }
        // 其他鉤子函數(shù)....
    })
</script>
4.2.1 beforeCreate
  • Vue實例 創(chuàng)建前調用
  • 特點：此時 el,data,methods... 都是undefined，所以還不能訪問
  • 執(zhí)行次數(shù)：只執(zhí)行 1 次
<div id="app">
    <ul>
        <li>遍歷數(shù)組：</li>
        <li v-for="(item,index) in myArry">下標：{{index}} -> 值：{{item}}</li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            myArry: ['P城', 'Y城', '軍事基地', '研究所', 'G港']
        },
        beforeCreate() {
            console.log('---beforeCreate------');
            console.log(this.myArry); // undefined
        }
    });
</script>
4.2.2 created(重要)
  • Vue實例 創(chuàng)建后調用
  • 特點：此時 el,data,methods... 都以創(chuàng)建賦值完畢，可以訪問
  • 執(zhí)行次數(shù)：只執(zhí)行 1 次
<div id="app">
    <ul>
        <li>遍歷數(shù)組：</li>
        <li v-for="(item,index) in myArry">下標：{{index}} -> 值：{{item}}</li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            myArry: ['P城', 'Y城', '軍事基地', '研究所', 'G港']
        },
        beforeCreate() {
            console.log('---beforeCreate------');
            console.log(this.myArry); // undefined
        },
        created() {
            console.log('---create------');
            console.log(this.myArry); // Array
        }
    });
</script>
4.2.3 二者功能場景

  • beforeCreate：一般用在 加載子組件 時 的 loading... 效果

  • created：等vue準備好后，可以用于取數(shù)據(jù)，比如 url 上參數(shù)，接口取值等

    ? 相當于 window.onload ，目前進入頁面接口在這調用最合適

三.擴展內容

1.includes 方法

用于判斷 數(shù)組 或者 字符串 中是否包含 某個值，包含 返回 true，不包含 返回 false

  • 用于數(shù)組
    • let res = arr.includes('元素');
    • arr 包含 '元素'，res 為 true
    • arr 不包含 '元素'，res 為 false
  • 用于字符串與數(shù)組一樣
    • let resStr = str.includes('子字符串');
    • str 包含 '子字符串'，resStr 為true
    • str 不包含 '子字符串'，resStr 為false

2.filter和map方法

2.1 filter篩選方法

  • 作用：
    • 根據(jù)條件篩選 出 原數(shù)組 中的元素，并添加到一個 新數(shù)組 中返回
    • 不會改變原始數(shù)組，只是把符合條件的元素 添加到一個新數(shù)組中
  • 語法：array.filter(回調函數(shù)( currentValue,index,arr ))
    • 參數(shù)
      • value - 當前元素值
      • index - 當前元素下標
    • arr - 當前數(shù)組
    • 返回值：
    • 返回包含符合條件的元素的數(shù)組
    • 沒有符合條件的元素，則返回 空數(shù)組。
  • 本質：內部其實就是 對 數(shù)組做循環(huán)，并把原數(shù)組中符合條件的元素添加到新數(shù)組中返回
  • 例子：篩選 常量數(shù)組
//1.返回 list 數(shù)組中 大于2的元素
let list = [1, 2, 3, 4];

let list2 = list.filter((v, i) => {
    return v > 2;
});

console.log(list2); // 輸出: [ 3, 4 ]
array.filter
  • 例子：篩選 對象數(shù)組：
//2.返回 list3 中 age >22 的 對象
let list3 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list4 = list3.filter((v, i) => {
    return v.age > 22;
});
console.log(list4);
/* 輸出:
[
  { name: 'm', age: 32 },
  { name: 'e', age: 42 },
  { name: 's', age: 52 }
]
*/

2.2 map 方法

  • 作用： 返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調用函數(shù)處理后的值
    • 遍歷 原數(shù)組 中的元素并調用回調函數(shù)，將回調函數(shù)返回值添加到一個 新數(shù)組 中返回
    • 不會改變原始數(shù)組，只是 把回調函數(shù)返回值 添加到新數(shù)組
  • 語法：array.map(回調函數(shù)( currentValue,index,arr ))
    • 參數(shù)
      • value - 當前元素值
      • index - 當前元素下標
      • arr - 當前數(shù)組
    • 返回值：
    • 將遍歷數(shù)組 時每次調用 回調函數(shù) 的返回值 添加到新數(shù)組 返回
  • 本質：對數(shù)組做循環(huán)，并取出元素傳入回調函數(shù)，將回調函數(shù)返回值添加到新數(shù)組返回
  • 例子：遍歷對象，將每個對象的 age 添加到新數(shù)組 返回
let list5 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list6 = list5.map((v, i) => {
    return v.age;
});
console.log(list6); // [ 12, 22, 32, 42, 52 ]
array.map

3.v-key指令

Vue為了能提高性能，都盡可能重用 dom 對象，但有時候，開發(fā)者 不希望它重用 dom對象。

  • 語法：v-key="id值" 簡寫 :key="id值"
  • 如：
    • 兩個 文本框，如果 不加 v-key 指令，則 Vue 內部 只會產生 一個 dom對象，復用。
    • PS：輸入文字后，不管怎么切換，都會顯示相同的文字，因為 Vue 在 重用 同一個文本框 
<div id="app">
    <button @click="isShow=!isShow">切換</button>
        <input v-if="isShow" type="text" placeholder="請輸入姓名">
        <input v-else type="text" placeholder="請輸入密碼" >
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: true
        },
        methods: {

        }
    })
</script>
  • 兩個 文本框，如果 加 v-key 指令，則 Vue 內部會產生 兩個 dom對象。
  • PS：輸入文字后，切換后 會顯示另一個 文本框，因為 Vue 創(chuàng)建了 兩個 文本框。
<div id="app">
    <button @click="isShow=!isShow">點我切換</button>
        <input  v-if="isShow" type="text" placeholder="請輸入姓名" key="1">
        <input v-else type="text" placeholder="請輸入密碼"  key="2">
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: true
        }
    })
</script>

4.v-if 和 v-for 一起使用

  • 不推薦 在同一個標簽上 同時使用他們倆
  • 但如果一起使用， v-for 比 v-if 優(yōu)先級 更高！

5.自己實現(xiàn) filter和map *

5.1 myfilter

  • *思考擴展：自己模仿一個數(shù)組的 filter 方法，返回符合條件的元素組成的新數(shù)組
// 為數(shù)組 原型 添加一個 myfilter 方法
Array.prototype.myfilter = function (fn) {
    let newArr = [];
    // 遍歷當前數(shù)組
    for (let i = 0; i < this.length; i++) {
        // 調用回調函數(shù)，傳入 當前元素，下標，原數(shù)組本身，獲取 bool返回值
        if (fn(this[i], i, this)) {
            // 將 元素 添加到 新數(shù)組
            newArr.push(this[i]);
        }
    }
    return newArr;
}
// 調用測試：
let list9 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list10 = list9.myfilter((v, i) => {
    return v.age > 22;
});

console.log(list10);

5.2 mymap

  • *思考擴展：自己模仿一個數(shù)組的 map 方法，返回 由 回調函數(shù) return元素 組成的新數(shù)組
// 為數(shù)組 原型 添加一個 mymap 方法
Array.prototype.mymap = function (fn) {
    let newArr = [];
    // 遍歷當前數(shù)組
    for (let i = 0; i < this.length; i++) {
        // 調用回調函數(shù)，傳入 當前元素，下標，原數(shù)組本身
        let newEle = fn(this[i], i, this);
        // 將 返回值 添加到 新數(shù)組
        newArr.push(newEle);
    }
    return newArr;
}
// 調用測試：
let list7 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list8 = list7.mymap((v, i) => {
    return v.age;
});

console.log(list8);
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,786評論 6贊 534
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,656評論 3贊 419
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,697評論 0贊 379
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,098評論 1贊 314
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,855評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 55,254評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,322評論 3贊 442
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,473評論 0贊 289
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
    沈念sama閱讀 49,014評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,833評論 3贊 355
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,016評論 1贊 371
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,568評論 5贊 362
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 44,273評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,680評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,946評論 1贊 288
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,730評論 3贊 393
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,006評論 2贊 374

推薦閱讀更多精彩內容

  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設計架構和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 2,945評論 1贊 4
  • vue概述sd 在官方文檔中，有一句話對Vue的定位說的很明確：Vue.js 的核心是一個允許采用簡潔的模板語法來...
    去年的牛肉閱讀 4,072評論 0贊 1
  • 一、了解Vue.js 1.1.1 Vue.js是什么？ 簡單小巧、漸進式、功能強大的技術棧 1.1.2 為什么學習...
    蔡華鵬閱讀 3,357評論 0贊 3
  • 1. Vue 實例 1.1 創(chuàng)建一個Vue實例 一個 Vue 應用由一個通過 new Vue 創(chuàng)建的根 Vue 實...
    王童孟閱讀 1,028評論 0贊 2
  • 33、JS中的本地存儲 把一些信息存儲在當前瀏覽器指定域下的某一個地方（存儲到物理硬盤中）1、不能跨瀏覽器傳輸：在...
    萌妹撒閱讀 2,088評論 0贊 2