亚洲色图成人在线,亚洲综合色图区

1、ES6

ECMAScript6.0（以下簡稱ES6，ECMAScript是一種由Ecma國際通過ECMA-262標(biāo)準(zhǔn)化的腳本），是JavaScript語言的下一代標(biāo)準(zhǔn)，2015年6月正式發(fā)布，從ES6開始的版本號采用年號，如ES2015，就是ES6。ES2016就是ES7。ECMAScript是規(guī)范，JS的規(guī)范的具體實(shí)現(xiàn)。

5.1.1 let&&const

var在{}之外也起作用
let在{}之外不起作用
var多次聲明同一變量不會報(bào)錯(cuò)，let多次聲明會報(bào)錯(cuò)，只能聲明一次。
var 會變量提升（打印和定義可以順序反）。let 不存在變量提升（順序不能反）
const聲明之后不允許改變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    

    <script>
       // var 聲明的變量往往會越域
       // let 聲明的變量有嚴(yán)格局部作用域
//         {
//             var a = 1;
//             let b = 2;
//         }
//         console.log(a);  // 1
//         console.log(b);  // ReferenceError: b is not defined

    // var 可以聲明多次
            // let 只能聲明一次
//         var m = 1
//         var m = 2
//         let n = 3
//       let n = 4
//         console.log(m)  // 2
//         console.log(n)  // Identifier 'n' has already been declared

        // var 會變量提升
        // let 不存在變量提升
//         console.log(x);  // undefined
//         var x = 10;
//         console.log(y);   //ReferenceError: y is not defined
//         let y = 20;

        // const
        // 1. const聲明之后不允許改變
        // 2. 一但聲明必須初始化，否則會報(bào)錯(cuò)
        const a = 1;
        a = 3; //Uncaught TypeError: Assignment to constant variable.
    
    </script>

</body>
</html>

5.1.2 解構(gòu)表達(dá)式

支持let arr = [1,2,3]; let [a,b,c] = arr;這種語法
支持對象解析：const { name: abc, age, language } = person; 冒號代表改名
字符串函數(shù)
支持一個(gè)字符串為多行
占位符功能 ${}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <script>
        //數(shù)組解構(gòu)
        // let arr = [1,2,3];
        // // let a = arr[0];
        // // let b = arr[1];
        // // let c = arr[2];

        // let [a,b,c] = arr;
        // console.log(a,b,c)

        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //         const name = person.name;
        //         const age = person.age;
        //         const language = person.language;

        //對象解構(gòu)
        const { name: abc, age, language } = person;
        console.log(abc, age, language)

        // 字符串?dāng)U展
        let str = "hello.vue";
        console.log(str.startsWith("hello"));//true
        console.log(str.endsWith(".vue"));//true
        console.log(str.includes("e"));//true
        console.log(str.includes("hello"));//true

        //字符串模板
        let ss = `<div>
                    <span>hello world<span>
                </div>`;
        console.log(ss);

        // 字符串插入變量和表達(dá)式。變量名寫在 ${} 中，${} 中可以放入 JavaScript 表達(dá)式。

        function fun() {
            return "這是一個(gè)函數(shù)"
        }

        let info = `我是${abc}，今年${age + 10}了, 我想說： ${fun()}`;
        console.log(info);

    </script>
</body>
</html>

5.1.3 函數(shù)優(yōu)化

原來想要函數(shù)默認(rèn)值得這么寫b = b || 1; 現(xiàn)在可以直接寫了function add2(a, b = 1) {
函數(shù)不定參數(shù)function fun(...values) {
支持箭頭函數(shù)（lambda表達(dá)式），還支持使用{}結(jié)構(gòu)傳入對象的成員

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <script>
        //在ES6以前，我們無法給一個(gè)函數(shù)參數(shù)設(shè)置默認(rèn)值，只能采用變通寫法：
        function add(a, b) {
            // 判斷b是否為空，為空就給默認(rèn)值1
            b = b || 1;
            return a + b;
        }
        // 傳一個(gè)參數(shù)
        console.log(add(10));


        //現(xiàn)在可以這么寫：直接給參數(shù)寫上默認(rèn)值，沒傳就會自動使用默認(rèn)值
        function add2(a, b = 1) {
            return a + b;
        }
        console.log(add2(20));


        //不定參數(shù)
        function fun(...values) {
            console.log(values.length)
        }
        fun(1, 2)      //2
        fun(1, 2, 3, 4)  //4

        //箭頭函數(shù)
        //以前聲明一個(gè)方法
        // var print = function (obj) {
        //     console.log(obj);
        // }
        var print = obj => console.log(obj);
        print("hello");

        var sum = function (a, b) {
            c = a + b;
            return a + c;
        }

        var sum2 = (a, b) => a + b;
        console.log(sum2(11, 12));

        var sum3 = (a, b) => {
            c = a + b;
            return a + c;
        }
        console.log(sum3(10, 20))


        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        function hello(person) {
            console.log("hello," + person.name)
        }

        //箭頭函數(shù)+解構(gòu)
        var hello2 = ({name}) => console.log("hello," +name);
        hello2(person);

    </script>
</body>
</html>

5.1.4 對象優(yōu)化

可以獲取map的鍵值對等Object.keys()、values、entries
Object.assgn(target,source1,source2) 合并
const person2 = { age, name } //聲明對象簡寫
…代表取出該對象所有屬性拷貝到當(dāng)前對象。let someone = { …p1 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        console.log(Object.keys(person));//["name", "age", "language"]
        console.log(Object.values(person));//["jack", 21, Array(3)]
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

        const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };

        //{a:1,b:2,c:3}
        Object.assign(target, source1, source2);

        console.log(target);//["name", "age", "language"]

        // 聲明對象簡寫
        const age = 23
        const name = "張三"
        const person1 = { age: age, name: name }

        const person2 = { age, name }//聲明對象簡寫
        console.log(person2);

        // 對象的函數(shù)屬性簡寫
        let person3 = {
            name: "jack",
            // 以前：
            eat: function (food) {
                console.log(this.name + "在吃" + food);
            },
            //箭頭函數(shù)this不能使用，對象.屬性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
                console.log(this.name + "在吃" + food);
            }
        }

        person3.eat("香蕉");
        person3.eat2("蘋果")
        person3.eat3("橘子");

        // 對象拓展運(yùn)算符

        //  拷貝對象（深拷貝）
        let p1 = { name: "Amy", age: 15 }
        let someone = { ...p1 }
        console.log(someone)  //{name: "Amy", age: 15}

        //  合并對象
        let age1 = { age: 15 }
        let name1 = { name: "Amy" }
        let p2 = {name:"zhangsan"}
        p2 = { ...age1, ...name1 } 
        console.log(p2)
    </script>
</body>
</html>

5.1.5 map和reduce

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <script>
        //數(shù)組中新增了map和reduce方法。
        //map()：接收一個(gè)函數(shù)，將原數(shù)組中的所有元素用這個(gè)函數(shù)處理后放入新數(shù)組返回。
         let arr = ['1', '20', '-5', '3'];
         
        //  arr = arr.map((item)=>{
        //     return item*2
        //  });
         arr = arr.map(item=> item*2);

        

         console.log(arr);
        //reduce() 為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素，
        //[2, 40, -10, 6]
        //arr.reduce(callback,[initialValue])
        /**
     1、previousValue （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
    2、currentValue （數(shù)組中當(dāng)前被處理的元素）
    3、index （當(dāng)前元素在數(shù)組中的索引）
    4、array （調(diào)用 reduce 的數(shù)組）*/
        let result = arr.reduce((a,b)=>{
            console.log("上一次處理后："+a);
            console.log("當(dāng)前正在處理："+b);
            return a + b;
        },100);
        console.log(result)

    
    </script>
</body>
</html>

5.1.6 promise

以前嵌套ajax的時(shí)候很繁瑣。

解決方案：
把Ajax封裝到Promise中，賦值給let p
在Ajax中成功使用resolve(data)，交給then處理，
失敗使用reject(err)，交給catch處理p.then().catch()

corse_score_10.json 得分
{
    "id": 100,
    "score": 90
}

user.json 用戶
{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}


user_corse_1.json 課程
{
    "id": 10,
    "name": "chinese"
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        //1、查出當(dāng)前用戶信息
        //2、按照當(dāng)前用戶的id查出他的課程
        //3、按照當(dāng)前課程id查出分?jǐn)?shù)
        // $.ajax({
        //     url: "mock/user.json",
        //     success(data) {
        //         console.log("查詢用戶：", data);
        //         $.ajax({
        //             url: `mock/user_corse_${data.id}.json`,
        //             success(data) {
        //                 console.log("查詢到課程：", data);
        //                 $.ajax({
        //                     url: `mock/corse_score_${data.id}.json`,
        //                     success(data) {
        //                         console.log("查詢到分?jǐn)?shù)：", data);
        //                     },
        //                     error(error) {
        //                         console.log("出現(xiàn)異常了：" + error);
        //                     }
        //                 });
        //             },
        //             error(error) {
        //                 console.log("出現(xiàn)異常了：" + error);
        //             }
        //         });
        //     },
        //     error(error) {
        //         console.log("出現(xiàn)異常了：" + error);
        //     }
        // });


        //1、Promise可以封裝異步操作
        // let p = new Promise((resolve, reject) => { //傳入成功解析，失敗拒絕
        //     //1、異步操作
        //     $.ajax({
        //         url: "mock/user.json",
        //         success: function (data) {
        //             console.log("查詢用戶成功:", data)
        //             resolve(data);
        //         },
        //         error: function (err) {
        //             reject(err);
        //         }
        //     });
        // });

        // p.then((obj) => { //成功以后做什么
        //     return new Promise((resolve, reject) => {
        //         $.ajax({
        //             url: `mock/user_corse_${obj.id}.json`,
        //             success: function (data) {
        //                 console.log("查詢用戶課程成功:", data)
        //                 resolve(data);
        //             },
        //             error: function (err) {
        //                 reject(err)
        //             }
        //         });
        //     })
        // }).then((data) => { //成功以后干什么
        //     console.log("上一步的結(jié)果", data)
        //     $.ajax({
        //         url: `mock/corse_score_${data.id}.json`,
        //         success: function (data) {
        //             console.log("查詢課程得分成功:", data)
        //         },
        //         error: function (err) {
        //         }
        //     });
        // })

        function get(url, data) { //自己定義一個(gè)方法整合一下
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        get("mock/user.json")
            .then((data) => {
                console.log("用戶查詢成功~~~:", data)
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("課程查詢成功~~~:", data)
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("課程成績查詢成功~~~:", data)
            })
            .catch((err)=>{ //失敗的話catch
                console.log("出現(xiàn)異常",err)
            });

    </script>
</body>

</html>

5.1.7 模塊化

模塊化就是把代碼進(jìn)行拆分，方便重復(fù)利用。類似于java中的導(dǎo)包，而JS換了個(gè)概念，是導(dǎo)模塊。
模塊功能主要有兩個(gè)命令構(gòu)成 export 和import
export用于規(guī)定模塊的對外接口
import用于導(dǎo)入其他模塊提供的功能

user.js
var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}

export {name,age,add}

hello.js
// export const util = {
//     sum(a, b) {
//         return a + b;
//     }
// }

export default {
    sum(a, b) {
        return a + b;
    }
}
// export {util}

//`export`不僅可以導(dǎo)出對象，一切JS變量都可以導(dǎo)出。比如：基本類型變量、函數(shù)、數(shù)組、對象。


main.js
import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);

2 Vue

MVVM思想

M：model 包括數(shù)據(jù)和一些基本操作
V：view 視圖，頁面渲染結(jié)果
VM：View-model，模型與視圖間的雙向操作（無需開發(fā)人員干涉）
視圖和數(shù)據(jù)通過VM綁定起來，model里有變化會自動地通過Directives填寫到視view中，
視圖表單中添加了內(nèi)容也會自動地通過DOM Listeners保存到模型中。

2.1 基礎(chǔ)案例

在VSCode中安裝vue 2 snippets語法提示插件，在谷歌瀏覽器中安裝vue.js devtools

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <input type="text" v-model="num">
        v-model實(shí)現(xiàn)雙向綁定
        <button v-on:click="num++">點(diǎn)贊</button>
        v-on:click綁定事件，實(shí)現(xiàn)自增
        <button v-on:click="cancel">取消</button>
        回到自定義的方法
        
        <h1> {{name}} ,非常帥，有{{num}}個(gè)人為他點(diǎn)贊{{hello()}}</h1>
    </div>

    <!-- 導(dǎo)入依賴 -->
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        //1、vue聲明式渲染
        let vm = new Vue({ //生成vue對象
            el: "#app",//綁定元素 div id="app"
            data: {  //封裝數(shù)據(jù)
                name: "張三",  // 也可以使用{} //表單中可以取出
                num: 1
            },
            methods:{  //封裝方法
                cancel(){
                    this.num -- ;
                },
                hello(){
                    return "1"
                }
            }
        });
        還可以在html控制臺vm.name

        //2、雙向綁定,模型變化，視圖變化。反之亦然。
        //3、事件處理

        //v-xx：指令

        //1、創(chuàng)建vue實(shí)例，關(guān)聯(lián)頁面的模板，將自己的數(shù)據(jù)（data）渲染到關(guān)聯(lián)的模板，響應(yīng)式的
        //2、指令來簡化對dom的一些操作。
        //3、聲明方法來做更復(fù)雜的操作。methods里面可以封裝方法。

    </script>
</body>
</html>

2.2 v-text、v-html.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   
    <div id="app">
        {{msg}}  {{1+1}}  {{hello()}}<br/>
        用v-html取內(nèi)容
        <span v-html="msg"></span>
        
        <br/>
        原樣顯示
        <span v-text="msg"></span>

        
    </div>
   
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"<h1>Hello</h1>",
                link:"http://www.baidu.com"
            },
            methods:{
                hello(){
                    return "World"
                }
            }
        })
    </script>
    
</body>
</html>

2.3 插值表達(dá)式

花括號：只能寫在標(biāo)簽體內(nèi)，不能用在標(biāo)簽內(nèi)。用v-bind解決
{{}}必須有返回值

2.4 單向綁定v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <!-- 給html標(biāo)簽的屬性綁定 -->
    <div id="app"> 

        <a v-bind:href="link">gogogo</a>

        <!-- class,style  {class名：加上？}-->
        <span v-bind:class="{active:isActive,'text-danger':hasError}"
          :style="{color: color1,fontSize: size}">你好</span>


    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                link: "http://www.baidu.com",
                isActive:true,
                hasError:true,
                color1:'red',
                size:'36px'
            }
        })
    </script>

</body>
</html>

2.5 雙向綁定v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <!-- 表單項(xiàng)，自定義組件 -->
    <div id="app">

        精通的語言：
            <input type="checkbox" v-model="language" value="Java"> java<br/>
            <input type="checkbox" v-model="language" value="PHP"> PHP<br/>
            <input type="checkbox" v-model="language" value="Python"> Python<br/>
        選中了 {{language.join(",")}}
    </div>
    
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                language: []
            }
        })
    </script>

</body>
</html>

2.6 v-on

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
                
        <!--事件中直接寫js片段-->
        <button v-on:click="num++">點(diǎn)贊</button>
        <!--事件指定一個(gè)回調(diào)函數(shù)，必須是Vue實(shí)例中定義的函數(shù)-->
        <button @click="cancel">取消</button>
        <!--  -->
        <h1>有{{num}}個(gè)贊</h1>


        <!-- 事件修飾符 -->
        <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                小div <br />
                <a  @click.prevent.stop="hello">去百度</a>
            </div>
        </div>



        <!-- 按鍵修飾符： -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />

        提示：

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods:{
                cancel(){
                    this.num--;
                },
                hello(){
                    alert("點(diǎn)擊了")
                }
            }
        })
    </script>
</body>

</html>

2.7 v-for

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <ul>
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
                <!-- 1、顯示user信息：v-for="item in items" -->
               當(dāng)前索引：{{index}} ==> {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} <br>
                <!-- 2、獲取數(shù)組下標(biāo)：v-for="(item,index) in items" -->
                <!-- 3、遍歷對象：
                        v-for="value in object"
                        v-for="(value,key) in object"
                        v-for="(value,key,index) in object" 
                -->
                對象信息：
                <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
                <!-- 4、遍歷的時(shí)候都加上:key來區(qū)分不同數(shù)據(jù)，提高vue渲染效率 -->
            </li>

            
        </ul>

        <ul>
            <li v-for="(num,index) in nums" :key="index"></li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳巖', gender: '女', age: 21 },
                { name: '張三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '劉亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    </script>
</body>
</html>

2.8 v-if和v-show

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
        v-if，顧名思義，條件判斷。當(dāng)?shù)玫浇Y(jié)果為true時(shí)，所在的元素才會被渲染。
        v-show，當(dāng)?shù)玫浇Y(jié)果為true時(shí)，所在的元素才會被顯示。 
    -->
    <div id="app">
        <button v-on:click="show = !show">點(diǎn)我呀</button>
        <!-- 1、使用v-if顯示 -->
        <h1 v-if="show">if=看到我....</h1>
        <!-- 2、使用v-show顯示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>

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

</body>

</html>

2.9 v-else和v-else-if

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button v-on:click="random=Math.random()">點(diǎn)我呀</button>
        <span>{{random}}</span>

        <h1 v-if="random>=0.75">
            看到我啦？！ &gt;= 0.75
        </h1>

        <h1 v-else-if="random>=0.5">
            看到我啦？！ &gt;= 0.5
        </h1>

        <h1 v-else-if="random>=0.2">
            看到我啦？！ &gt;= 0.2
        </h1>

        <h1 v-else>
            看到我啦？！ &lt; 0.2
        </h1>

    </div>


    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>         
        let app = new Vue({
            el: "#app",
            data: { random: 1 }
        })     
    </script>
</body>
</html>

2.10 計(jì)算屬性和偵聽器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 某些結(jié)果是基于之前數(shù)據(jù)實(shí)時(shí)計(jì)算出來的，我們可以利用計(jì)算屬性。來完成 -->
        <ul>
            <li>西游記； 價(jià)格：{{xyjPrice}}，數(shù)量：<input type="number" v-model="xyjNum"> </li>
            <li>水滸傳； 價(jià)格：{{shzPrice}}，數(shù)量：<input type="number" v-model="shzNum"> </li> 
            <li>總價(jià)：{{totalPrice}}</li>
            {{msg}}
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        //watch可以讓我們監(jiān)控一個(gè)值的變化。從而做出相應(yīng)的反應(yīng)。
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
                }
            },
            watch: {
                xyjNum(newVal,oldVal){
                    if(newVal>=3){
                        this.msg = "庫存超出限制";
                        this.xyjNum = 3
                    }else{
                        this.msg = "";
                    }
                }
            },
        })
    </script>
</body>
</html>

2.11 過濾器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 過濾器常用來處理文本格式化的操作。過濾器可以用在兩個(gè)地方：雙花括號插值和 v-bind 表達(dá)式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
                {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>

        Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "男~~~";
            } else {
                return "女~~~";
            }
        })

        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                 filters 定義局部過濾器，只可以在當(dāng)前vue實(shí)例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>
</html>

2.12 組件化

在大型應(yīng)用開發(fā)的時(shí)候，頁面可以劃分成很多部分。往往不同的頁面，也會有相
同的部分。
例如可能會有相同的頭部導(dǎo)航。
但是如果每個(gè)頁面都自開發(fā)，這無疑增加了我們開發(fā)的成本。所以我們會把頁面
的不同分拆分成立的組件，然后在不同頁面就可以共享這些組件，避免重復(fù)開發(fā)。
在vue里，所有的vue實(shí)例都是組件
組件其實(shí)也是一個(gè)vue實(shí)例，因此它在定義時(shí)也會接收：data、methods、生命周期函等

不同的是組件不會與頁面的元素綁定，否則就無法復(fù)用了，因此沒有el屬性。
但是組件渲染需要html模板，所以增加了template屬性，值就是HTML模板
全局組件定義完畢，任何vue實(shí)例都可以直接在HTML中通過組件名稱來使用組了
data必須是一個(gè)函數(shù)，不再是一個(gè)對象。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <button v-on:click="count++">我被點(diǎn)擊了 {{count}} 次</button>

        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>

        <button-counter></button-counter>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>


    <script>
        //1、全局聲明注冊一個(gè)組件
        Vue.component("counter", {
            template: `<button v-on:click="count++">我被點(diǎn)擊了 {{count}} 次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });

        //2、局部聲明一個(gè)組件
        const buttonCounter = {
            template: `<button v-on:click="count++">我被點(diǎn)擊了 {{count}} 次~~~</button>`,
            data() {
                return {
                    count: 1
                }
            }
        };

        new Vue({
            el: "#app",
            data: {
                count: 1
            },
            components: {
                'button-counter': buttonCounter
            }
        })
    </script>
</body>
</html>

2.13 生命周期鉤子函數(shù)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span id="num">{{num}}</span>
        <button @click="num++">贊！</button>
        <h2>{{name}}，有{{num}}個(gè)人點(diǎn)贊</h2>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "張三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("=========beforeCreate=============");
                console.log("數(shù)據(jù)模型未加載：" + this.name, this.num);
                console.log("方法未加載：" + this.show());
                console.log("html模板未加載：" + document.getElementById("num"));
            },
            created: function () {
                console.log("=========created=============");
                console.log("數(shù)據(jù)模型已加載：" + this.name, this.num);
                console.log("方法已加載：" + this.show());
                console.log("html模板已加載：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("=========beforeMount=============");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("=========mounted=============");
                console.log("html模板已渲染：" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("=========beforeUpdate=============");
                console.log("數(shù)據(jù)模型已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("=========updated=============");
                console.log("數(shù)據(jù)模型已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            }
        });
    </script>
</body>
</html>

2.14 使用Vue腳手架進(jìn)行開發(fā)

全局安裝webpack
1 npm install webpack -g
全局安裝vue腳手架
2 npm install -g @vue/cli-init
3 初始化vue項(xiàng)目
vue init webpack appname:vue腳手架使用webpack模板初始化一個(gè)appname項(xiàng)目
4 啟動vue項(xiàng)目
項(xiàng)目的package.json中有scripts,代表我們能運(yùn)行的命令
npm start = npm run dev: 啟動項(xiàng)目
npm run build:將項(xiàng)目打包

2.15 使用element-ui

推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S

在 main.js 中寫入以下內(nèi)容：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

前端知識點(diǎn)

前端知識點(diǎn)

1、ES6

5.1.1 let&&const

5.1.2 解構(gòu)表達(dá)式

5.1.3 函數(shù)優(yōu)化

5.1.4 對象優(yōu)化

5.1.5 map和reduce

5.1.6 promise

5.1.7 模塊化

2 Vue

2.1 基礎(chǔ)案例

2.2 v-text、v-html.html

2.3 插值表達(dá)式

2.4 單向綁定v-bind

2.5 雙向綁定v-model

2.6 v-on

2.7 v-for

2.8 v-if和v-show

2.9 v-else和v-else-if

2.10 計(jì)算屬性和偵聽器

2.11 過濾器

2.12 組件化

2.13 生命周期鉤子函數(shù)

2.14 使用Vue腳手架進(jìn)行開發(fā)

2.15 使用element-ui

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

前端知識點(diǎn)

1、ES6

5.1.1 let&&const

5.1.2 解構(gòu)表達(dá)式

5.1.3 函數(shù)優(yōu)化

5.1.4 對象優(yōu)化

5.1.5 map和reduce

5.1.6 promise

5.1.7 模塊化

2 Vue

2.1 基礎(chǔ)案例

2.2 v-text、v-html.html

2.3 插值表達(dá)式

2.4 單向綁定v-bind

2.5 雙向綁定v-model

2.6 v-on

2.7 v-for

2.8 v-if和v-show

2.9 v-else和v-else-if

2.10 計(jì)算屬性和偵聽器

2.11 過濾器

2.12 組件化

2.13 生命周期鉤子函數(shù)

2.14 使用Vue腳手架進(jìn)行開發(fā)

2.15 使用element-ui

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、ES6