一犁河、vue基礎(chǔ)語(yǔ)法

1.1 Vue新建項(xiàng)目語(yǔ)法

基本語(yǔ)法：

vue.js引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.2款筑、Vue實(shí)例化墓卦，代碼如下：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{mess}}
    </div>
    <script>
            //代碼實(shí)例化
            let app = new Vue({
            el: "#app",//用于掛在要管理的元素
            data: {  //定義數(shù)據(jù)
                mess: "您好"
            }
        });
    </script>
</body>
</html>

1.3禾嫉、循環(huán)列表

語(yǔ)法如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <div id="app">
    <ul>
        <li  v-for="item in list">{{item}}</li>
    </ul>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: { 
                list:['星際穿越','大話西游','少年派','盜夢(mèng)空間']
            }
        });
    </script>
</body> 
</html>

1.4、計(jì)數(shù)器Demo實(shí)例匈棘，代碼入如下：【按鈕事件的使用語(yǔ)法】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計(jì)數(shù)器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id ="app">
     <div>
         當(dāng)前數(shù)字為：{{num}}
     </div>
     <div>
        <button v-on:click="add">加</button>
        <button v-on:click="cut">減</button> 
     </div>
    </div>
    <script>
        let app= new Vue({
            el :"#app",
            data:{
                num:0
            },
            methods:{
                add:function()
                { 
                    this.num++;
                },
                cut:function()
                {
                  this.num--;
                }
            }
        });
    </script>
</body>
</html>

總結(jié)：使用了新的指令與新的屬性：

v-on:click：新的指令事件監(jiān)聽(tīng)

methods:{ .....} 新的屬性定義事件

1.5、Vue中的MVVM模式

M：Model V:View VM:ViewModel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計(jì)數(shù)器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body> 
    <!--View  層-->
    <div id ="app">
     <div>
         當(dāng)前數(shù)字為：{{num}}
     </div>
     <div>
        <button v-on:click="add">加</button>
        <button v-on:click="cut">減</button> 
     </div>
    </div>
    <script>
        let app= new Vue({  //ViewModel 層
            el :"#app",
            data:{
                num:0   //Model 層
            },
            methods:{
                add:function()
                { 
                    this.num++;
                },
                cut:function()
                {
                  this.num--;
                }
            }
        });
    </script>
</body>
</html>

1.6 析命、創(chuàng)建vue實(shí)例傳入的Options

el ：string 類型

作用：決定之后管理那個(gè)Dom對(duì)象

data： object | Function 在組件中data必須是個(gè)函數(shù)

作用：實(shí)例對(duì)應(yīng)的數(shù)據(jù)對(duì)象主卫，以及數(shù)據(jù)對(duì)象初始化

methods: function 方法里面是多個(gè)方法或函數(shù)

作用：定義屬于Vue的一些方法，可以在其他地方低啊用鹃愤，也可以在指令中使用簇搅，比兔 v-on:click ="方法名"宪郊。

1.7轨帜、Vue 的生命周期

生命周期的定義：一個(gè)事務(wù)從誕生到消亡的整個(gè)過(guò)程。

生命周期搪泳，如圖：

[圖片上傳失敗...(image-cc71ce-1628662180264)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id ="app"></div>
    <script>
        let app =new Vue({
            el:"#app",
            data :{

            },
            beforeCreate:function ()
            {
                console.log("執(zhí)行beforeCrete");
            },
            //用的最多的是 created mounted 做網(wǎng)絡(luò)請(qǐng)求  
            created:function ()
            {
                console.log("created");
            },
            mounted:function ()
            {
                console.log("mounted")
            }
        });
    </script>
</body>
</html>

總結(jié)：

beforeCreate：創(chuàng)建vue實(shí)例前用的鉤子函數(shù)

created：創(chuàng)建vue實(shí)例后用的鉤子函數(shù)

mounted：將編譯好的html頁(yè)面掛載到頁(yè)面完成后執(zhí)行的溝子函數(shù)

...........詳細(xì)請(qǐng)看上圖凹耙。

1.8鸟蟹、基本語(yǔ)法：

插值操作語(yǔ)法，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id = "app"> 
      {{mess}},小明 <br>
      {{FirstName+''+lastName}}   <br>
      {{counter*2}}

    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
              mess: "您好",
            FirstName: "李",
            lastName : "小明",
            counter :100
            }
        });
    </script>
</body>
</html>

總結(jié)：

Mustache 語(yǔ)法：也是雙大括號(hào)語(yǔ)法使兔，不僅僅可以寫(xiě)變量建钥，也可以寫(xiě)表達(dá)式

1.9、v-once 指令

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- v-once：數(shù)據(jù)初始化后虐沥，不允許修改數(shù)據(jù)-->
    <div id = "app"> 
    <h2 v-once>{{mess}}</h2>  
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
              mess: "您好"
            }
        });
    </script>
</body>
</html>

總結(jié)：

v-once：數(shù)據(jù)初始化后熊经，不允許修改數(shù)據(jù)

2.0、V-html指令

代碼如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <!-- v-html：-->
    <div id="app"> 
        <h2 v-html="mess"></h2>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "<div>您好</div>"
            }
        });
    </script>
</body> 
</html>

2.1欲险、v-text 指令

語(yǔ)法如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <!-- v-text：-->
    <div id="app">  
        <h2 v-text="mess"></h2>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "<div>您好</div>"
            }
        });
    </script>
</body> 
</html>

總結(jié)：v-text：顯示純文本信息镐依，不經(jīng)常使用，如果h2 標(biāo)簽中有內(nèi)容天试，它將會(huì)覆蓋標(biāo)簽中的內(nèi)容槐壳。

2.2、v-pre指令【用的比較少】

代碼如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <!-- v-pre指令：是將{{mess}}字符串顯示出來(lái)喜每，不需要vue進(jìn)行解析-->
    <div id="app">  
        <h2>{{mess}}</h2>
        <h2 v-pre>{{mess}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好"
            }
        });
    </script>
</body> 
</html>

總結(jié)：v-pre指令：是將{{mess}}字符串顯示出來(lái)务唐，不需要vue進(jìn)行解析

2.3雳攘、v-cloak 指令：

代碼如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <!-- v-cloak指令：
    作用：在vue解析之前有一個(gè)屬性v-cloak指令；
    在vue解析后就沒(méi)有這個(gè)v-cloak指令-->
    <div id="app">  
        <h2 v-cloak>{{mess}}</h2> 
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好"
            }
        });
    </script>
</body> 
</html>

總結(jié)：v-cloak指令：【不經(jīng)常使用】作用：在vue解析之前有一個(gè)屬性v-cloak指令枫笛；在vue解析后就沒(méi)有這個(gè)v-cloak指令

2.4吨灭、v-bind 指令

代碼如下：

 <!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <!-- v-ding指令：動(dòng)態(tài)綁定屬性，也就是請(qǐng)求服務(wù)器刑巧，
        響應(yīng)后將返回的數(shù)據(jù)綁定到屬性上喧兄，比如：圖片  src屬性等等
        全寫(xiě)：v-bind：屬性=""
        縮寫(xiě)：  :屬性：=""
    -->
    <div id="app">  
         <!--全寫(xiě)-->
        <img v-bind:src ="imgurl" alt="圖片"></img>
        <!-- 簡(jiǎn)寫(xiě) -->
        <img :src ="imgurl" alt="圖片"></img>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好",
                imgurl:"https://img1.baidu.com/it/u=2496571732,442429806&fm=26&fmt=auto&gp=0.jpg"
            }
        });
    </script>
</body> 
</html>

總結(jié)：v-ding指令：動(dòng)態(tài)綁定屬性，也就是請(qǐng)求服務(wù)器啊楚，響應(yīng)后將返回的數(shù)據(jù)綁定到屬性上吠冤，比如圖片 src屬性等等全寫(xiě)：v-bind：屬性="" 縮寫(xiě)： :屬性：=""

2.5、v-bind 綁定 class

代碼如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<style>
.active{
    color:red
}
</style>
<body>
    <!-- v-ding指令：動(dòng)態(tài)綁定屬性恭理，也就是請(qǐng)求服務(wù)器咨演，
        響應(yīng)后將返回的數(shù)據(jù)綁定到屬性上，比如：圖片  src屬性等等
        全寫(xiě)：v-bind：屬性=""
        縮寫(xiě)：  :屬性：=""
    -->
    <div id="app"> 
        <!-- 第一種  -->
        <div class="active">
            {{mess}}
        </div>
        <div :class="active">
            {{mess}}
        </div>
        <!-- 第二種  綁定對(duì)象 {類名：bool值}  bool值為true,加載 類名的樣式 --> 
        <div :class="{active:isactive,line:isline}">
            {{mess}}
        </div>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好",  
                active:"active",
                isactive:false,
                isline:true
            }
        });
    </script>
</body> 
</html>

總結(jié)：1）蚯斯、在vue創(chuàng)建的實(shí)例中可動(dòng)態(tài)加載視圖中的樣式薄风。

2）、綁定對(duì)象語(yǔ)法 {類名：bool值} bool值為true,加載類名的樣式

如果div中有兩個(gè)class拍嵌，一個(gè)是自定義的class遭赂，一個(gè)是動(dòng)態(tài)綁定的class ，vue內(nèi)部會(huì)將這兩個(gè)class進(jìn)行合并横辆。

2.6撇他、v-bind 動(dòng)態(tài)綁定class 用方法動(dòng)態(tài)綁定樣式

使用方法動(dòng)態(tài)綁定樣式，代碼如下：

<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><style>    .active {        color: red    }    .Line {        font-size: 40px;    }</style> <body>    <div id="app" :class ="getClass()">        {{mess}}    </div>    <script>        let app = new Vue({            el: "#app",            data: {                mess: "您好",                isActive:true,                isLine:true            },            methods:{                getClass:function ()                {                   return {active:this.isActive,Line:this.isLine};                }            }        });    </script></body> </html>

2.7狈蚤、v-bing 動(dòng)態(tài)綁定style樣式表

對(duì)象語(yǔ)法代碼如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
    <div id="app" :style ="getStyle()">
        {{mess}}
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好",
                size:'100px',
                co:'red'
            } ,
            methods :
            {
                getStyle:function(){
                    return {fontSize:this.size,color:this.co};
                }
            }
        });
    </script>
</body> 
</html>

總結(jié)：將style樣式文件寫(xiě)成一個(gè)對(duì)象放在方法中困肩，直接綁定style樣式。

2.8脆侮、計(jì)算屬性的使用【computed】

代碼如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計(jì)算屬性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<!-- 計(jì)算屬性: -->
<div id="app">
   全名： {{fullName}}<br>
書(shū)的總價(jià)格：{{sumPrice}}
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            mess: "您好",
            firstName: '李',
            lastName: '大明',
            books:[
                {id:110,name:'編程藝術(shù)',price:112},
                {id:111,name:'深入了解計(jì)算機(jī)原理',price:112}
            ] 
        },
        computed: {
            fullName: function () {
                return this.firstName + '' + this.lastName;
            },
            sumPrice:function()
            {
                let result = 0;
                //第一種方法
                for(let i=0;i<this.books.length;i++)
                {
                    result += this.books[i].price;
                }
              return result;
            }
        }
    });
</script>
</body> 
</html>

總結(jié)：計(jì)算屬性是有緩存的锌畸，一次用到調(diào)用后，二次用到后就不需要調(diào)用靖避。

2.9潭枣、計(jì)算屬性setter與getter使用

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{mess}}
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                firstName:"李",
                lastName:"曉明"
            },
            computed:{
                fullName:
                {
                    //如果想更改值，在set中操作
                    set:function(newValue)
                    {

                    },
                    //獲取值
                    get:function()
                    {
                      return thi.firstName+""+this.lastName;
                    }
                }
            }
        });
    </script>
</body> 
</html>

總結(jié)：定義的計(jì)算屬性幻捏，其實(shí)是個(gè)對(duì)象盆犁，而這個(gè)對(duì)象中有兩個(gè)函數(shù)，一個(gè)set函數(shù)篡九，另一個(gè)是get函數(shù)谐岁，set函數(shù)獲取新值并賦值給其他變量，而get方法是返回值；一般開(kāi)發(fā)過(guò)程中不使用set函數(shù)伊佃，只使用get函數(shù)窜司，也就是只讀，不可編輯锭魔。

3.0例证、計(jì)算屬性與methods的對(duì)比

代碼如下：

<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head> <body>    <div id="app">        <div>            fullName計(jì)算屬性： {{fullName}}            fullName 計(jì)算屬性： {{fullName}}            fullName 計(jì)算屬性： {{fullName}}            fullName 計(jì)算屬性： {{fullName}}        </div>        <div>            getfullName 方法：{{getfullName}}            getfullName 方法：{{getfullName}}            getfullName 方法：{{getfullName}}            getfullName 方法： {{getfullName}}        </div>    </div>    <script>        let app = new Vue({            el: "#app",            data: {                firstName: "李",                lastName: "曉明"            },            //函數(shù)            methods: {             getfullName:function()             {                 console.log("getfullName");                return thi.firstName + "" + this.lastName;             }            },            //計(jì)算屬性            computed: {                fullName: function () {                    console.log("fullName");                    return thi.firstName + "" + this.lastName;                }            }        });    </script></body> </html>

總結(jié)：計(jì)算屬性有緩存機(jī)制而methods方法沒(méi)有緩存機(jī)制路呜，以上面的代碼為例迷捧，計(jì)算屬性如果值沒(méi)有發(fā)生的變的話，只會(huì)輸出1次console.log("fullName")胀葱，而methods方法會(huì)輸出4次 console.log("getfullName")漠秋，也就是說(shuō)計(jì)算屬性的性能要比方法高。

3.1抵屿、塊級(jí)作用于 let與var ES6

總結(jié)：

ES5之前的if for 是沒(méi)有塊級(jí)作用域的庆锦，我們只能借助function的作用域來(lái)解決應(yīng)用外面變量的問(wèn)題，

let是ES6的語(yǔ)法轧葛，它是有塊級(jí)作用域的搂抒。

3.2、const使用以及注意點(diǎn)

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{mess}}
    </div>
    <script>
        //named的值不可修改
        const name ="大明";
        //對(duì)象屬性是可以修改
        const da={
            mess: "您好"
        }
        da.mess="再見(jiàn)";
        let app = new Vue({
            el: "#app",
            data: da
        });
    </script>
</body>
</html>

總結(jié)：

const ：常量尿扯，不可修改值求晶。

在開(kāi)發(fā)過(guò)程中優(yōu)先使用const，只有需要改變某一個(gè)標(biāo)識(shí)符時(shí)候使用let衷笋。

注意點(diǎn)：一旦使用const修飾的標(biāo)示符被賦值之后芳杏，就不能再修改值。

使用const定義標(biāo)識(shí)符的時(shí)候辟宗，必須賦值爵赵。

常量的含義是指向?qū)ο蟛荒苄薷模强梢愿淖儗?duì)象內(nèi)部的屬性泊脐。

3.3空幻、ES6對(duì)象的字面量增強(qiáng)寫(xiě)法

代碼如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body> 
    <script>
        //屬性的增強(qiáng)寫(xiě)法
        const name = "您好";
        const age = 13;
        const height = 1.88;
        let value =
        {
            name,
            age,
            height
        }
        console.log(value);
        //函數(shù)的增強(qiáng)寫(xiě)法
        const func = {
            add(){
              console.log ("函數(shù)的增強(qiáng)寫(xiě)法");
            }
        };
        console.log(func.add());
    </script>
</body> 
</html>

總結(jié):

屬性的增強(qiáng)寫(xiě)法與函數(shù)的增強(qiáng)寫(xiě)法看以上代碼示例。

3.4容客、v-on的基本使用氛悬、語(yǔ)法糖、傳參以及修飾符

介紹：

作用：綁定事件監(jiān)聽(tīng)器

簡(jiǎn)寫(xiě)：@

參數(shù)：event

預(yù)期：Function | InlineStatement | Object

代碼如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 無(wú)參  @click的方法名可以不加花括號(hào) -->
        <!-- 標(biāo)準(zhǔn)寫(xiě)法 -->
        <button v-on:click="add">無(wú)參</button>
        <!-- 簡(jiǎn)寫(xiě) -->
        <button @click="add">無(wú)參</button>
        <!-- 有參  如果函數(shù)有參數(shù)耘柱，但是沒(méi)有傳遞參數(shù)如捅，Vue默認(rèn)會(huì)傳遞一個(gè)瀏覽器自動(dòng)生成event事件對(duì)象作為參數(shù)傳遞到函數(shù)中-->
        <button @click="add1(10)">有參1</button>
        <!-- 方法定義時(shí)，我們需要event參數(shù)调煎，也需要其他參數(shù)
             在調(diào)用方法時(shí)镜遣，如何手動(dòng)獲取瀏覽器自動(dòng)生成的event事件，前面加個(gè)$符號(hào)：$event
        -->
        <button @click="add2(10,$event)">有參2</button>
        <!-- 如果傳遞的參數(shù)為變量 -->
        <button @click="add3(mess)">有參3</button>
        <!-- v-on修飾符  .stop 為click的修飾符；
            如果不加這個(gè)修飾符悲关，則會(huì)觸發(fā)兩個(gè)事件谎僻，一個(gè)是：cli_div  另一個(gè)是 decorate，加上修飾符后寓辱，則只會(huì)觸發(fā)  decorate 事件-->
        <div @click="cli_div">
            <button @click.stop="decorate">修飾符</button>
        </div>
        <!-- prevent修飾符是阻止默認(rèn)事件    應(yīng)用場(chǎng)景為提交form表單-->
        <form action="www.baidu.com">
            <div>
                <button @click.prevent="submit">提交form表單</button>
            </div>
        </form>
        <!-- 監(jiān)聽(tīng)某個(gè)按鍵的事件 -->
        <div>
            <!-- 當(dāng)按下鍵盤(pán)松開(kāi)后觸發(fā)的事件-->
            <input type="text" @keyup="keyup">
            <div>
                <!-- 當(dāng)按下回車(chē)鍵觸發(fā)的事件-->
                <input type="text" @keyup.enter="keyup">
            </div>
        </div>
        <div>
            <!-- 只觸發(fā)一次修飾符 -->
            <button @click.once="once">只觸發(fā)一次</button>

        </div>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好"
            },
            methods: {
                add() {
                    console.log("觸發(fā)add事件");
                },
                add1(num) {
                    console.log(num);
                },
                add2(num, event) {
                    console.log(num + "-----" + event);
                },
                add3(mess) {
                    console.log(mess);
                },
                decorate() {
                    console.log("觸發(fā)修飾符按鈕");
                },
                cli_div() {
                    console.log("觸發(fā)div事件");
                },
                submit() {
                    console.log("觸發(fā)表單事件");
                },
                keyup() {
                    console.log("keyup事件");
                },
                once()
                {
                    console.log("once事件");
                }
            }
        });
    </script>
</body>

</html>

總結(jié)：v-on:click 可以簡(jiǎn)寫(xiě)為@click艘绍，無(wú)參可以不加花括號(hào)。

有參：如果函數(shù)有參數(shù)秫筏，但是沒(méi)有傳遞參數(shù)诱鞠，Vue默認(rèn)會(huì)傳遞一個(gè)瀏覽器自動(dòng)生成event事件對(duì)象作為參數(shù)傳遞到函數(shù)中；在調(diào)用方法時(shí)这敬，如何手動(dòng)獲取瀏覽器自動(dòng)生成的event事件航夺，前面加個(gè) $符號(hào)：$ event

訪問(wèn)修飾符的使用：

stop修飾符：只觸發(fā)當(dāng)前自己事件，父級(jí)的事件不觸發(fā)崔涂。

prevent修飾符：阻止默認(rèn)事件的觸發(fā)阳掐，應(yīng)用場(chǎng)景為：form表單，可以阻止默認(rèn)的事件表單提交冷蚂。

keyup.* 某個(gè)鍵盤(pán)鍵的觸發(fā)修飾符缭保，比如：Enter

once修飾符:只觸發(fā)一次事件。

3.5蝙茶、v-if v-els-if v-else基本使用

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       值： {{mess}}
       <p v-if="source>90">優(yōu)秀</p> 
       <p v-else-if="source>=80">良好</p>
       <p v-else>及格</p> 
    <p ></p>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好",
                source:50
            }
        });
    </script>
</body>
</html>

總結(jié)：

如果有多個(gè)v-else-if 就不建議在標(biāo)簽上判斷艺骂，直接用計(jì)算屬性來(lái)判斷。

3.6尸闸、v-show與v-if的區(qū)別

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       值： {{mess}}
       <p v-if="isshow">優(yōu)秀</p> 
       <p v-show="isshow">良好</p> 
    <p ></p>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好",
                isshow:true
            }
        });
    </script>
</body>
</html>

總結(jié)： v-if條件為false時(shí)彻亲，包含v-if指令的元素，根本就不存在dom中吮廉，

v-show條件為false時(shí)苞尝，v-show只是給我們的元素添加了一個(gè)行內(nèi)樣式 dispaly：none

開(kāi)發(fā)中我們?nèi)绾芜x擇：

當(dāng)需要在顯示與隱藏之間切換頻繁是，則是使用v-show 性能高

當(dāng)只有一次切換時(shí)宦芦，通過(guò)使用v-if

7宙址、v-for的基本使用

代碼如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 官方推薦我們使用v-for的時(shí)候，給對(duì)應(yīng)的元素或者組件添加上一個(gè):key 屬性调卑。 -->
        <!-- 遍歷數(shù)組 item :值   index：索引 -->
        <ul>
            <li v-for ="(item,index) in list">{{index}}----{{item}}</li>
        </ul>
        <!-- 遍歷對(duì)象  value:屬性值  key：屬性名   index：索引值 -->
        <ul>
            <li v-for ="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
        </ul>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
              list:['海王','阿里巴巴'],
              info:{
                  name:"曉明",
                  age:18,
                  height:1.99
              }
            }
        });
    </script>
</body> 
</html>

總結(jié)：

官方推薦我們使用v-for的時(shí)候抡砂，給對(duì)應(yīng)的元素或者組件添加上一個(gè):key 屬性。

目的是更好的復(fù)用恬涧。

3.8注益、數(shù)組中哪些方式是響應(yīng)式

代碼如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
        <div><button @click="btn_click">提交</button></div>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                list: ['海王', '阿里巴巴', 'aaaaa', 'bbbbb']
            },
            methods: {
                btn_click() {
                    //數(shù)組添加元素
                    //可添加多個(gè)或者一個(gè)，添加到尾部
                    //  this.list.push('aaa','bbbb');
                    //刪除數(shù)組的最后一個(gè)元素
                    // this.list.pop();
                    //刪除數(shù)組中的第一個(gè)元素
                    // this.list.shift();
                    //在數(shù)組最前面添加元素溯捆，可添加一個(gè)或者多個(gè)
                    // this.list.unshift('aaaa','bbbb','cccc');
                    //  splice 的作用是刪除丑搔、插入、替換元素
                    //刪除元素：splice(start，要?jiǎng)h除幾個(gè)元素) 第二個(gè)參數(shù)書(shū)要?jiǎng)h除幾個(gè)元素啤月，如果沒(méi)有傳煮仇，就刪除后面所有的元素
                    //this.list.splice(1,2);//刪除兩個(gè)元素
                    //this.list.splice(1);//刪除處開(kāi)始的第一個(gè)元素外的所有元素
                    //替換元素：splice(start，要替換幾個(gè)元素谎仲，替換元素值)浙垫；第二個(gè)參數(shù)表示要替換幾個(gè)元素，第三個(gè)參數(shù)是要替換的值
                    //  this.list.splice(1,3,'a','b','c');
                    //插入元素  第二個(gè)參數(shù)是0郑诺，并且后面跟上插入值
                    // this.list.splice(2,0,'ddd','eee');
                }
            }

        });
    </script>
</body> 
</html>

總結(jié)：

push : 數(shù)組元素添加夹姥，可以添加一個(gè)或者多個(gè)元素且元素放在最后。

pop：刪除數(shù)組的最后一個(gè)元素间景。

shift：刪除數(shù)組的第一個(gè)元素佃声。

unshift：數(shù)組元素添加艺智，可以添加一個(gè)或者多個(gè)元素且放在元素的最前面倘要。

splice:刪除/插入/替換元素。

刪除元素語(yǔ)法如下： start:要從第幾個(gè)開(kāi)始是刪除十拣；num：刪除幾個(gè)元素封拧，如果只有一個(gè)start，那么會(huì)刪除start后的所有元素

this.數(shù)組.splice (start,num);

替換元素語(yǔ)法如下： start:要從第幾個(gè)開(kāi)始替換 num:要替換幾個(gè)元素：value：要替換的元素值夭问，可以是多個(gè)泽西。

this.數(shù)組.splice (start,num,value1,value2......);

插入元素語(yǔ)法如下 start:要從第幾個(gè)開(kāi)始插入 0：為默認(rèn)值 value：要插入的值，可以是多個(gè)缰趋。

this.數(shù)組.splice (start,0,value1,value2......);

3.9捧杉、javascript 高階函數(shù)

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <div id="app">{{mess}}</div>
    <script>
        let aqpp = new Vue({
            el: "#app",
            data: {
                mess: "你好"
            }
        });
        //高階函數(shù)
        let num = [1, 2, 3, 4]
        //過(guò)濾  返回小于5
        //filter中的函數(shù)有一個(gè)要求：必須返回一個(gè)bool值
        //當(dāng)返回true時(shí)，函數(shù)內(nèi)會(huì)自動(dòng)將這次的回調(diào)函數(shù)的值加入到新的數(shù)組中秘血。
        //當(dāng)返回FALSE時(shí)味抖，函數(shù)內(nèi)部會(huì)過(guò)濾到這次的n
        //newnum：為新的數(shù)組
        let newnum = num.filter(function (n) {
            return n < 3;
        });
        // map函數(shù)：是元素的值發(fā)生變化時(shí)使用map函數(shù)  將newnum過(guò)濾的數(shù)據(jù)，每個(gè)元素乘以2 【加  減 乘 除】灰粮，并且返回一個(gè)新的數(shù)組
       let newnum1= newnum.map(function(n){
        return n*2;
        });
        //reduce 函數(shù)  作用：對(duì)數(shù)組中所有的元素進(jìn)行匯總仔涩。
        //provalue:上一次返回的值
        //n:數(shù)組中的元素
        //0：為初始值
        newnum.reduce(function(provalue,n){
           return  provalue + n;
        },0);  
    </script>
</body> 
</html>

總結(jié)：

filter 過(guò)濾函數(shù)：當(dāng)回調(diào)函數(shù)返回值為true時(shí)，它將會(huì)符合邏輯條件的數(shù)組元素返回給一個(gè)新數(shù)組中粘舟，也是上述代碼中的 newnum熔脂，則返回值為false時(shí)，不添加到新的數(shù)組中柑肴。

map 函數(shù)：當(dāng)數(shù)值中元素的值發(fā)生變化是霞揉，使用map函數(shù)，回調(diào)函數(shù)返回的一個(gè)發(fā)生變化后的值晰骑，然后添加到新的數(shù)組中适秩。

reduce 函數(shù)：將數(shù)組中的元素進(jìn)行匯總【加減乘除】，回調(diào)函數(shù)中有兩個(gè)參數(shù)，一個(gè)參數(shù)是：匯總后上一次的返回值隶症，另個(gè)參數(shù)為：數(shù)組元素中的值政模。

4.0、v-model表單綁定雙向綁定

代碼如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!--  input  基本語(yǔ)法 -->

        基本語(yǔ)法:<input type="text" name="na" v-model="mess"><br>
        <!-- v-model 原理 -->
        v-model 原理:<input type="text" name="na" :value="mess" @input="mess = $event.target.value">
        <div>
            {{mess}}
        </div>

        <!-- radio 綁定語(yǔ)法 -->
        radio 綁定語(yǔ)法:
        <input type="radio" id="nan" name="sex" value="男" v-model="sex"> 男
        <input type="radio" id="nv" name="sex" value="女" v-model="sex"> 女
        <br>
        <h2>{{sex}}</h2>

        <!-- 復(fù)選框的綁定語(yǔ)法 -->
        單選框：<input type="checkbox" name="agree" v-model="isAgree"> 同意協(xié)議<br>
        您當(dāng)前的選擇為：{{isAgree}}<br>
        <button :disabled="!isAgree">提交</button> <br>
        <!-- 多個(gè)單選框的語(yǔ)法 -->
        <input type="checkbox" v-model="list" value="籃球">籃球
        <input type="checkbox" v-model="list" value="足球">足球
        <input type="checkbox" v-model="list" value="排球">排球 <br>
        您當(dāng)前的選擇：{{list}}<br>
        <!-- 下拉列表   -->
         下拉列表  選擇單個(gè) :
        <select  name = "fruit" v-model="fruit">
            <option value="蘋(píng)果">蘋(píng)果</option>
            <option value="香蕉">香蕉</option>
            <option value="橙子">橙子</option>
        </select> <br>
        您選擇的水果是：{{fruit}}<br>
        下拉列表選擇多個(gè) :
        <select  name = "fruits" v-model="fruits" multiple>
            <option value="蘋(píng)果">蘋(píng)果</option>
            <option value="香蕉">香蕉</option>
            <option value="橙子">橙子</option>
        </select> <br>
        您選擇的水果是：{{fruits}}<br>
    <br>
    </div>
    <script>
        let aqpp = new Vue({
            el: "#app",
            data: {
                mess: "你好",
                sex: "男",
                isAgree: false,
                list: [],
                fruit:"蘋(píng)果",
                fruits:[] 
            }
        });
    </script>
</body>

</html>

總結(jié)：

v-model的基本語(yǔ)法：v-model = "變量名"蚂会。

原理：?jiǎn)雾?xiàng)綁定 input的value屬性淋样，然后通過(guò) input事件監(jiān)聽(tīng)，對(duì)mess進(jìn)行修改胁住。

radio單選按鈕的使用趁猴，單選按鈕顧名思義的就是多個(gè)單選按鈕只能選中一個(gè)，需要加name=value ,value必須是一致的彪见，如果有v-model綁定的value值儡司，那么可以將name屬性去掉。

checkbox復(fù)選框：當(dāng)個(gè)復(fù)選框余指，選中并v-model綁定后捕犬，返回的類型為bool，多個(gè)復(fù)選框選中并v-model綁定后酵镜，返回的是一個(gè)數(shù)組碉碉。

select 下拉列表：要注意的是：v-model要綁定在select上，單選和多選的區(qū)別是：?jiǎn)芜x：只返回一個(gè)值淮韭，多選是返回一個(gè)數(shù)組垢粮，并且在select上添加 multiple 屬性。

4.1靠粪、input 修飾符

代碼如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- input  修飾符：lazy 修飾符：懶加載    當(dāng)用戶輸入完成失去焦點(diǎn)后蜡吧，在加載到對(duì)象屬性mess中-->
        lazy 修飾符： <input type="text" v-model.lazy="mess">
       <h2>{{mess}}</h2><br>
        <!-- input  修飾符：number 修飾符：數(shù)字  只能輸入數(shù)字，不能輸入字符串-->
        number 修飾符： <input type="text" v-model.number="age">
       <h2>{{age}}</h2><br>
         <!-- trim  修飾符：去掉兩邊的空格-->
         number 修飾符： <input type="text" v-model.trim="name">
         <h2>{{name}}</h2><br>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "",
                age:0,
                name:""
            }
        });
    </script>
</body>

</html>

總結(jié)：

lazy：可以讓數(shù)據(jù)失去焦點(diǎn)或者回車(chē)才會(huì)更新對(duì)象中的屬性值占键。

number：只能讓input文本框輸入數(shù)字昔善，不能輸入文字。

trim：將用戶在文本框輸入的空格去掉捞慌。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末耀鸦，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子啸澡，更是在濱河造成了極大的恐慌袖订，老刑警劉巖，帶你破解...
沈念sama閱讀 222,252評(píng)論 6贊 516
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件嗅虏，死亡現(xiàn)場(chǎng)離奇詭異洛姑，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)皮服，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,886評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)楞艾，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)参咙，“玉大人，你說(shuō)我怎么就攤上這事硫眯≡滩啵” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 168,814評(píng)論 0贊 361
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵两入，是天一觀的道長(zhǎng)净宵。經(jīng)常有香客問(wèn)我，道長(zhǎng)裹纳，這世上最難降的妖魔是什么择葡？我笑而不...
開(kāi)封第一講書(shū)人閱讀 59,869評(píng)論 1贊 299
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮剃氧，結(jié)果婚禮上敏储，老公的妹妹穿的比我還像新娘。我一直安慰自己朋鞍，他們只是感情好已添，可當(dāng)我...
茶點(diǎn)故事閱讀 68,888評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著番舆，像睡著了一般酝碳。火紅的嫁衣襯著肌膚如雪矾踱。梳的紋絲不亂的頭發(fā)上恨狈，一...
開(kāi)封第一講書(shū)人閱讀 52,475評(píng)論 1贊 312
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音呛讲，去河邊找鬼禾怠。笑死，一個(gè)胖子當(dāng)著我的面吹牛贝搁，可吹牛的內(nèi)容都是我干的吗氏。我是一名探鬼主播，決...
沈念sama閱讀 41,010評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼雷逆，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼弦讽！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起膀哲，我...
開(kāi)封第一講書(shū)人閱讀 39,924評(píng)論 0贊 277
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤往产，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后某宪，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體仿村，經(jīng)...
沈念sama閱讀 46,469評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,552評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年兴喂，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蔼囊。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片焚志。...
茶點(diǎn)故事閱讀 40,680評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖畏鼓，靈堂內(nèi)的尸體忽然破棺而出酱酬，到底是詐尸還是另有隱情，我是刑警寧澤云矫，帶...
沈念sama閱讀 36,362評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布岳悟，位于F島的核電站，受9級(jí)特大地震影響泼差，放射性物質(zhì)發(fā)生泄漏贵少。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,037評(píng)論 3贊 335
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一堆缘、第九天我趴在偏房一處隱蔽的房頂上張望滔灶。院中可真熱鬧，春花似錦吼肥、人聲如沸录平。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,519評(píng)論 0贊 25
一樁弒父案缀皱，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)斗这。三九已至，卻和暖如春啤斗，著一層夾襖步出監(jiān)牢的瞬間表箭，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,621評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工钮莲，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留免钻，地道東北人。一個(gè)月前我還...
沈念sama閱讀 49,099評(píng)論 3贊 378
代替公主和親
正文我出身青樓崔拥，卻偏偏與公主長(zhǎng)得像极舔，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子链瓦，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,691評(píng)論 2贊 361

一、vue基礎(chǔ)語(yǔ)法

一犁河、vue基礎(chǔ)語(yǔ)法

1.1 Vue新建項(xiàng)目語(yǔ)法

1.2款筑、Vue實(shí)例化墓卦，代碼如下：

1.3禾嫉、循環(huán)列表

1.4、計(jì)數(shù)器Demo實(shí)例匈棘，代碼入如下：【按鈕事件的使用語(yǔ)法】

1.5、Vue中的MVVM模式

1.6 析命、創(chuàng)建vue實(shí)例傳入的Options

methods: function 方法里面是多個(gè)方法或函數(shù)

1.7轨帜、Vue 的生命周期

1.8鸟蟹、基本語(yǔ)法：

1.9、v-once 指令

2.0、V-html指令

2.1欲险、v-text 指令

2.2、v-pre指令【用的比較少】

2.3雳攘、v-cloak 指令：

2.4吨灭、v-bind 指令

2.5、v-bind 綁定 class

2.6撇他、v-bind 動(dòng)態(tài)綁定class 用方法動(dòng)態(tài)綁定樣式

2.7狈蚤、v-bing 動(dòng)態(tài)綁定style樣式表

對(duì)象語(yǔ)法代碼如下：

2.8脆侮、計(jì)算屬性的使用【computed】

2.9潭枣、計(jì)算屬性setter與getter使用

3.0例证、計(jì)算屬性與methods的對(duì)比

3.1抵屿、塊級(jí)作用于 let與var ES6

3.2、const使用以及注意點(diǎn)

3.3空幻、ES6對(duì)象的字面量增強(qiáng)寫(xiě)法

3.4容客、v-on的基本使用氛悬、語(yǔ)法糖、傳參以及修飾符

3.5蝙茶、v-if v-els-if v-else基本使用

3.6尸闸、v-show與v-if的區(qū)別

7宙址、v-for的基本使用

3.8注益、數(shù)組中哪些方式是響應(yīng)式

3.9捧杉、javascript 高階函數(shù)

4.0、v-model表單綁定雙向綁定

4.1靠粪、input 修飾符

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

一犁河、vue基礎(chǔ)語(yǔ)法

1.1 Vue新建項(xiàng)目語(yǔ)法

1.2款筑、Vue實(shí)例化墓卦，代碼如下：

1.3禾嫉、循環(huán)列表

1.4、計(jì)數(shù)器Demo實(shí)例匈棘，代碼入如下：【按鈕事件的使用語(yǔ)法】

1.5、Vue中的MVVM模式

1.6 析命、創(chuàng)建vue實(shí)例傳入的Options

methods: function 方法 里面是多個(gè)方法或函數(shù)

1.7轨帜、Vue 的生命周期

1.8鸟蟹、基本語(yǔ)法：

1.9、v-once 指令

2.0、V-html指令

2.1欲险、v-text 指令

2.2、v-pre指令 【用的比較少】

2.3雳攘、v-cloak 指令：

2.4吨灭、v-bind 指令

2.5、v-bind 綁定 class

2.6撇他、v-bind 動(dòng)態(tài)綁定class 用方法動(dòng)態(tài)綁定樣式

2.7狈蚤、v-bing 動(dòng)態(tài)綁定style樣式表

對(duì)象語(yǔ)法代碼如下：

2.8脆侮、計(jì)算屬性的使用 【computed】

2.9潭枣、計(jì)算屬性setter與getter使用

3.0例证、計(jì)算屬性與methods的對(duì)比

3.1抵屿、塊級(jí)作用于 let與var ES6

3.2、const使用以及注意點(diǎn)

3.3空幻、ES6對(duì)象的字面量 增強(qiáng)寫(xiě)法

3.4容客、v-on的基本使用氛悬、語(yǔ)法糖、傳參以及修飾符

3.5蝙茶、v-if v-els-if v-else基本使用

3.6尸闸、v-show與v-if的區(qū)別

7宙址、v-for的基本使用

3.8注益、數(shù)組中哪些方式是響應(yīng)式

3.9捧杉、javascript 高階函數(shù)

4.0、v-model表單綁定 雙向綁定

4.1靠粪、input 修飾符

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

methods: function 方法里面是多個(gè)方法或函數(shù)

2.2、v-pre指令【用的比較少】

2.8脆侮、計(jì)算屬性的使用【computed】

3.3空幻、ES6對(duì)象的字面量增強(qiáng)寫(xiě)法

4.0、v-model表單綁定雙向綁定