vue.js是什麼

vue.js也稱為vue,讀音/vju/

• 是一個構建使用者介面的框架
• 是一個輕量級MVVM(Model-view-viewModel)框架，和angular，react類似，其實就是所謂的資料雙向繫結
• 資料驅動+元件化的前端開發(核心思想)
• 通過簡單的API實現響應式的資料繫結和組合的檢視元件

為什麼要使用VUE？

Vue.js一直以輕量級，易上手被開發者稱道。

使用Vue，使我們無須再像使用Angular.js和React.js時那樣關心DOM的操作。

vue的指令以v-xxx開頭
vue2.0和1.0相比，最大的變化是引入了Virtual DOM(虛擬DOM),頁面更新效率更高，速度更快。

先瞅一瞅vue例項

                var vm=new Vue({    //建立一個vue的例項傳入json
                    el:'#box',//指定關聯的選擇器
                    data:{//物件儲存資料
                        sjd:'holle world',
                        name:'tom'
                    }
                });

         <div id="box">
             {{sjd}}
 
<!-- 兩隊大括號稱為模板 -->
         </div>

雙向資料繫結

v-model 一般用於表單元素

            使用者名稱:<input type="text" v-model="name" />
            <br>
            <p>我叫{{name}}</p>

vue data中的name為空：且表單輸入什麼 p標籤顯示什麼

常用的指令

v-for 對陣列進行迴圈

                new Vue({
                    el:
 
'#angs',
                    data:{
                        arr:[1,21,14,45,54],
                        user:{id:12345,name:'秋香',age:25}
                    }
                })

<li v-for="value in arr">{{value}}</li><!-- 迴圈陣列 -->

迴圈user陣列

<li v-for="value in user">{{value}}</li><!-- 只是迴圈了值，物件的索引key沒有

鍵值迴圈

<li v-for="(v,k) in user">{{k}}={{v}}</li>

迴圈包含重複資料的集合 可以通過指定:key屬性繫結唯一key,當更新元素可以重用元素，提高效率。

arr2:[12,21,14,45,54,12]

<li v-for="(v,k) in arr2" :key='k'>{{v}}</li>

迴圈物件陣列。

                        users:[//物件陣列
                            {id:1111,name:'唐伯虎',age:25},
                            {id:2222,name:'老鱉',age:22},
                            {id:3333,name:'奧力給',age:23}
                        ]

<li v-for="user in users">{{user.id}},{{user.name}},{{user.age}}</li><!-- 迴圈物件陣列 -->

如果想要索引

<!-- user加上一個索引，index從0開始 -->
<li v-for="(user,index) in users">{{index+1}},{{user.id}},{{user.name}},{{user.age}}</li>

v-on:事件名稱

用來繫結事件的用法 可以用@代表來簡寫

例如：

點選按鈕時向陣列中新增一個元素

                new Vue({
                    el:'#itany',
                    data:{    //儲存資料
                        arr:[12,21,215,46],
                    },
                    methods:{ //儲存方法
                        add(){
                            // arr.push(666);預設不能直接訪問
                            this.arr.push(666);//使用this訪問當前例項中的成員
                            this.fname();
                        }
                    }
                })

<button type="button" v-on:click="add()">向陣列中新增一個元素</button>

v-show/v-if

用來顯示或者隱藏元素，v-show是通過display實現,v-if是每次刪除後再重新建立

例如：

點選按鈕隱藏div

                    methods:{
                        change(){
                            this.flag=!this.flag;
                        }
                    }

             <button type="button" v-on:click="change()">隱藏div</button>
             <hr >
             
             <div class="" style="width: 100px; height: 100px; background-color: red;" v-show="flag">
             </div>

v-show是通過display設定none屬性實現隱藏

             <button type="button" v-on:click="change()">隱藏div</button>
             <hr >
            <div class="" style="width: 100px; height: 100px; background-color: red;" v-if="flag">
            </div>

v-if是每次刪除程式碼後再重新建立

在 <template> 元素上使用 v-if 條件渲染分組

v-if是一個指令，所以必須將它新增到一個元素上。

此時可以把一個<template>元素當做不可見的包裹元素，並在上面使用v-if。

最終的渲染結果將不包含<template>元素。

<div id="app">
----
<template v-if="ok">
  <h1>標題</h1>
  <p>段落 1</p>
  <p>段落 2</p>
</template>
----
</div>
<script>
var vm = new Vue({
    el:'#app',
    data:{
        ok: 1
    }
});
</script>

事件的簡寫

v-on:click點選事件可簡寫為@click

事件物件$event

包含事件相關資訊，如事件源，事件型別，偏移量

事件冒泡 （往上傳播）

阻止事件冒泡使用 .stop

阻止事件預設行為並執行指定函式.prevent

原生js方式，依賴於事件物件

事件修飾符 只觸發一次 .once

關於鍵盤事件

簡寫 不需要事件物件 按鍵別名或按鍵的值

@keydown.ctrl或@keydown.13

屬性

屬性的繫結和簡寫
v-bind:屬性=''簡寫:屬性

例如：

    data:{
        url:'www.360.com'
    }

<a :href="url">360首頁</a>

v-bind可以直接訪問vue中的資料，不需要使用{{}}

例如：

                let vm = new Vue({
                    el:'#box1',
                    data:{
                        src1:'//atts.w3cschool.cn/attachments/cover/cover_erlang.png?imageView2/1/w/64/h/64&t=1542019173',
                        w:'200px',//寬度
                        h:'100px',//高度
                    },
                    methods:{
                        
                    }
                });

src1為連結

<img :src="src1" :width="w" :height="h"><!-- 簡寫直接加上: -->

class和style屬性

        <style type="text/css">
            .aa{
                background: #0062CC;/* 背景色 */
            }
            .bb{
                color: red;/* 字型顏色 */
                font-size: 20px;/* 字型大小 */
            }
            .vv{
                font-family: "宋體";/* 字型樣式 */
                text-align: center;/* 居中 */
            }
        </style>

繫結單個樣式若要用多個樣式，則用陣列形式

<p :class="cc">我的世界</p>

陣列形式繫結多個樣式

在vue的data中給樣式賦值別名

                let vm = new Vue({
                    el:'#box1',
                    data:{
                        w:'200px',//寬度
                        h:'100px',//高度
                        cc:'aa',
                        dd:'bb',
                        ss:'vv',
                    },
                    methods:{
                        
                    }
                });

<p :class="[cc,dd,ss]">我的世界</p>

json形式繫結

                    data:{
                        flag:true,
                        num:-1,
                    }

             <p :class="{aa:true,bb:flag}">我的世界</p>
             <p :class="{aa:num>0}">我的世界</p><!-- 大於零為true -->

變數引用json

                    data:{
                        holle:{aa:true,bb:true,vv:true}
                    }

<p :class="holle">引用變數json</p>

模板語法

文字

資料繫結最常見的形式就是使用“Mustache”語法{{}}(雙大括號) 的文字插值

v-once 指令

能執行一次性地插值，當資料改變時，插值處的內容不會更新。

例如點選按鈕更改文字內容

    data:{
        msg:'打打怪',
        
    },
    methods:{
        textH1(){
            this.msg = '灰太狼';
        }
    }

        <div id="app">
            <h1 >{{msg}}</h1>
            <h1 v-once>{{msg}}</h1>//once值繫結一次不會改變
            <button type="button" @click="hyyj()">點選</button>
        </div>

綁定了v-once指令的值未改變

原始HTML

雙大括號會將資料解釋為普通文字，而非 HTML 程式碼。為了輸出真正的 HTML，需要使用v-html指令

    data:{
        rawHtml: '<span style="color:blue">這裡要顯示藍色</span>'
    },

            <h2 >{{rawHtml}}</h2>
            <h2 v-html="rawHtml"></h2>

結果：

v-bind

渲染一個動態的id這種情況應該使用v-bind 指令,{{ }} (雙括號)不能作用在 HTML 特性上。

使用JavaScript表示式

對於所有的資料繫結，都可以完全使用JavaScript表示式。

例如：

{{ number + 1 }}   <!-- 計算 -->
{{ ok ? 'YES' : 'NO' }}   <!-- 單表示式選擇 -->
{{ message.split('').reverse().join('') }}  <!-- 單表示式運算 -->
<div v-bind:id="'list-' + id"></div>  <!-- 字串拼接 -->

這些表示式會在所屬 Vue 例項的資料作用域下作為 JavaScript 被解析。有個限制就是，每個繫結都只能包含單個表示式。

再例如：

<span v-bind:class="status == 'fail' ? 'off': 'on'">狀態</span><!-- 當status 等於fail得時候 class樣式為off 否則為on -->

    data:{
        status:'fail'
    }

動態引數

從 Vue 2.6.0 開始，可以用方括號括起來的 JavaScript 表示式作為一個指令的引數

例如：

    data:{
        ename: 'click'
    }

<a v-bind:[ename]="alert"> ... </a>//屬性表示點選事件
需要注意的是動態引數需要避免使用大寫字元來命名而且在動態引數表示式裡無法使用空格和引號，放在HTML屬性名裡是無效的