30道Vue面试题,内含详细讲解（涵盖入门到精通,自测Vue掌握程度）.pdf

30Vue

Vue

Vue

Vue

Vue

Vue

~~~

1SPA

SPAsingleapplicationWeb

HTMLJavaScriptCSSSPA

HTMLUI

SPA

Web

JavaScriptCSS

SEO

SEO

2v-showv-if

v-if

——

v-show——

CSS“display”

v-if

v-show

3ClassStyle

Class

divv-bind:class={active:isActive,text-danger:hasError}/div

data:{

isActive:true,

hasError:false

}

divv-bind:class=[isActive?activeClass:,errorClass]/div

data:{

activeClass:active,

errorClass:text-danger

}

Style

divv-bind:style={color:activeColor,fontSize:fontSize+px}

data:{

activeColor:red,

fontSize:30

}

divv-bind:style=[styleColor,styleSize]/div

data:{

styleColor:{

color:red

},

styleSize:{

fontSize:23px

}

}

4Vue

propprop

prop

prop

prop

Vue

$emit

prop

prop

dataprop

props:[initialCounter],

data:function(){

return{

counter:this.initialCounter

}

}

prop

prop

props:[size],

computed:{

normalizedSize:function(){

returnthis.size.trim().toLowerCase()

}

}

5computedwatch

computedcomputed

computed

computed

watch

computedcomputed

watchwatch(

API)

6Vue

JavaScriptVue

vm.items[indexOfItem]=newValue

vm.items.length=newLength

//Vue.set

Vue.set(vm.items,indexOfItem,newValue)

//vm.$setVue.set

vm.$set(vm.items,indexOfItem,newValue)

//Atotype.splice

vm.items.splice(indexOfItem,1,newValue)

//Atotype.splice

vm.items.splice(newLength)

7Vue

Vue

Dom--

Vue

beforeCreate

dom$el

created

beforeMountrender

mountedelvm.$el

beforeUpdateDOM

update

activitedkeep