vue.js基礎筆記

html中解析普通變量使用兩個大括号，若是需要插入html内容則使用三個大括号

資料綁定文法

var vm = new Vue({
    el:'.app'//id名或者class名
    data：{
        name:'hello vue',//執行個體化vue對象，裡面的data屬性的值是一個對象
        classobj:{
        'class-a': true,
            'class-b': false
        },
        styleobj:{
            color:'red';
            }
        }，
        lists:[
            {a:'111'},
            {a:'2222'}

        ]
})
           

<div class="app">//v-if條件需在綁定的class屬性裡面才能進行判斷
<div>{{name}}</div>
<div>{{name + 12345}}</div>//vue拼接
<div>{{name ?'yes':no}}</div>//三元運算判斷name是否定義
<div>{{name | capitalize }}</div>//使用過濾器對參數進行過濾，比如轉換時間戳轉換字母大小寫
<p v-if="name">{{name}}</p>//根據name屬性是否存在判斷是否顯示p标簽
<a v-bind:href="url">vue連結</a>//等同 href="{{url}}"
<a v-on:click="doSomething"> //堅挺dom事件
</div>
           

class與style綁定

<p class="test" v-bind:class="{'class-a':name,'class-b':statu}"></p>//根據name和status屬性是否存在進行添加class屬性
<p class="test" v-bind:class="classobj"></p>根據data裡面的classobj對象添加class屬性，這個對象需要data屬性值得同一級
綁定style屬性
<p class="test" v-bind:class="[name,test]"></p>//使用數組模式添加class屬性，這裡的值是在VUe對象中的data内的屬性名
<p class="test" v-bind:class="styleobj"></p>//使用obj對象更改style樣式
<p class="test" v-bind:class="styleobj"></p>//使用數組形式添加樣式
           

v-if、v-else

<p v-if="name">yes</p>//判斷name是否存在，存在就顯示此處的p标簽
<p v-else>no</p>/變量值為false時走此條,需要添加v-else的時候，需要立即追加在v-if後面
           

清單渲染