vue基礎用法

vue.js是什麼

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

• 是一個構建用戶界面的框架
• 是一個輕量級MVVM(Model-view-viewModel)框架，和angular，react相似，其實就是所謂的數據雙向綁定
• 數據驅動+組件化的前端開發(核心思想)
• 經過簡單的API實現響應式的數據綁定和組合的視圖組件

指令以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是每次刪除代碼後再從新建立

 

 

 事件的簡寫

v-on:click點擊事件可簡寫爲@click

 

事件對象$event

包含事件相關信息，如事件源，事件類型，偏移量

 

事件冒泡 （往上傳播）

阻止事件冒泡使用 .stop

 

阻止事件默認行爲.prevent

原生js方式，依賴於事件對象

 

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

 

關於鍵盤事件

簡寫 不須要事件對象 按鍵別名或按鍵的值

@keydown.ctrl或@keydown.13

 

屬性

屬性的綁定和簡寫
v-bind:屬性='' 簡寫:src

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>