新手使用vue筆記

首先要new Vue實例()，后面要學(xué)的操作基本都是在傳參數(shù)對象上面

var vm = new Vue({
        el:app,//el 規(guī)定了當(dāng)前vue實例作用DOM范圍，他接受的值可以是一個css3選擇器，也可以是一個DOM源生對象
        data:{//data 定義當(dāng)前vue實例要用到的數(shù)據(jù)
            testData:"<b>這是一個測試數(shù)據(jù)</b>",
        }
    })

HTML 結(jié)構(gòu)如下
通過{{}}標(biāo)識(這種寫法稱為插值表達(dá)式)，可以把data數(shù)據(jù)渲染到標(biāo)簽內(nèi)
通過v-html指令做到識別參數(shù)內(nèi)容的標(biāo)簽的效果
通過v-bind指令做到對標(biāo)簽屬性的綁定

<div id="va">
    <span v-html="Note"></span>
    <p>{{Note1}} <b><i>{{Note2}}</i></b></p>//
    <a v-bind:href="target">{{Note2}}</a>
    <img v-bind:src="img1" alt="">
</div>

v-on

可以通過v-on語法為標(biāo)簽添加事件
也可以簡寫成@的形式

<div v-on:click= "testMethod">我是測試文本</div>
<div @click="testMethod">我是測試文本</div>

v-on綁定的事件上可以添加修飾符,代碼如下

<div v-on:click.right.stop = "testMethod">我是測試文本</div>

一些常用的修飾符如下
stop 阻止事件冒泡
prevent 阻止默認(rèn)事件
capture 在事件捕獲階段觸發(fā)監(jiān)聽事件
self 只有事件在自己身上觸發(fā)時才會監(jiān)聽，通過冒泡不會觸發(fā)
once 相當(dāng)于jq的one事件，只會觸發(fā)一次
passave 在滾動事件觸發(fā)時可以提高移動端的性能
enter/up/down/left/right 在添加鍵盤事件時，只有修飾符規(guī)定的按鍵才會觸發(fā)

v-block

v-bloak 指令，當(dāng)模板渲染完畢后會自動消失

<p v-cloak>{{testData}}</p>

v-if

v-if可傳入一個布爾值或變量，如果值是true，則將標(biāo)簽渲染在頁面上，如果是false則不渲染

<div @click="switchShow" v-if="isShow">點擊隱藏</div>

v-show

v-show它控制元素顯示或者隱藏，

<div @click="switchShow" v-show="isShow">點擊隱藏</div>

和v-if不同,v-show本質(zhì)是控制元素的css的display屬性，但是v-if是直接把標(biāo)簽去除。相比之下，v-show具有比較小的切換開銷，而v-if常用在不經(jīng)常做操作的元素，具有比較小的初始渲染開銷

v-else

v-else 必須依附于v-if或者v-else-if指令，當(dāng)v-if為false時，則v-else綁定的標(biāo)簽會渲染在頁面上

<div @click="switchShow" v-if="isShow">點擊隱藏</div>
<div class="web" v-else>當(dāng)上面div隱藏式時出現(xiàn)</div>

v-for

v-for指令，用來循環(huán)數(shù)據(jù)并渲染模板，如果v-for和v-if同時存在，v-for優(yōu)先級更高

<p v-for="item in obj">{{item()}}</p>

v-for對數(shù)組循環(huán)可以傳入兩個參數(shù),item和index
item表示數(shù)組里的值,index表示下標(biāo)值

<p v-for="item,index in testData" >{{item}}----{{index}}</button>

v-for對對象循環(huán)可以傳入三個參數(shù),item和key和index
item表示鍵值,key表示鍵名，index表示對象內(nèi)元素的下標(biāo)值

 <p v-for="item,key,index in testData">{{key}}:{{item}}---{{index}}</p>

vue實例上的方法

在vue實例上，我們能夠調(diào)用vue的方法來實現(xiàn)對數(shù)據(jù)的操作

new Vue({
      el:"app",
      data:{//這里可以定義變量
            testData:"我是一個測試數(shù)據(jù)",
            testData2:"我是另一個測試數(shù)據(jù)"
      },
      methods:{//這里可以定義函數(shù)
            changeData(function(){
                    console.log("我是測試changeData方法的");
            )
       },
      computed:{//聲明一個新的數(shù)據(jù)，計算屬性的值依賴于別人的值，注意最終值要return出來，計算屬性里面不允許有異步操作
             fullData:function(){
                    return this.testData+ this.testData2
             }
      },
      created:function{//聲明一個新的數(shù)據(jù)，計算屬性的值依賴于別人的值，注意最終值要return出來，計算屬性里面不允許有異步操作，watch可以
              alert("我是一個新的vue實例");
      }
})