-
{{number}} 這種語(yǔ)法我們稱之為“插值表達(dá)式”
查看全部 -
掛載點(diǎn)：
<div id="root">{{msg}}</div>
這個(gè)div標(biāo)簽就是底下Vue實(shí)例的掛載點(diǎn)
也就是el屬性對(duì)應(yīng)id的dom結(jié)構(gòu)
模板：
掛載點(diǎn)內(nèi)部的內(nèi)容，可以放在Vue實(shí)例中的template里面
查看全部 -
new?Vue({ ????el:"#root"; ????data:?{ ????????msg:?"hello?world" ????} }) el?element?通過(guò)el進(jìn)行綁定 通過(guò)vue，不會(huì)有任何dom的操作，直接對(duì)數(shù)據(jù)進(jìn)行操作查看全部 -
vuejs的導(dǎo)入最好放在head部分
查看全部 -
v-for 用來(lái)控制一組數(shù)據(jù)，通過(guò)這組數(shù)據(jù)來(lái)循環(huán)顯示dom結(jié)構(gòu)
<li v-for="(item, index) of list" :key="index">{{item}}</li>
查看全部 -
v-if會(huì)把dom刪除掉,控制dom的存在與否
v-show會(huì)更改css屬性，display=none，控制dom的顯示與否
查看全部 -
簡(jiǎn)單todolist
查看全部 -
watch 偵聽(tīng)器，偵聽(tīng)某一個(gè)數(shù)據(jù)的變化，發(fā)生變化時(shí)，會(huì)執(zhí)行函數(shù)實(shí)現(xiàn)相應(yīng)的邏輯
查看全部 -
computed 計(jì)算屬性，它的性能是比較高的，只有當(dāng)他依賴的屬性發(fā)生變化時(shí)，它的值才會(huì)發(fā)生改變，否則使用上一次的緩存值
查看全部 -
v-bind:? ? 屬性綁定，可簡(jiǎn)寫為": "（之前講過(guò)v-on：可簡(jiǎn)寫成@，這是第二個(gè)指令簡(jiǎn)寫）
<div v-bind:title="content"></div>
查看全部 -
當(dāng)在export default {}中寫一個(gè)data ，data變成了一個(gè)函數(shù)
查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Title</title> ????<script?src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div?id="div"> ????<input?type="text"?v-model="message"></br> ????<input?type="button"?value="提交"?@click="test"> ?{{message}} ????<ul> ????????<li?v-for="(item,index)?of?list">{{item}}</li> ????</ul> </div> <script> ?var?app?=?new?Vue({ ????????el:?"#div", ?data:?{ ????????????list:?[], ?message:?"" ?}, ?methods:?{ ????????????test:?function?()?{ ????????????????this.list.push(this.message); ?this.message?=""; ?} ????????} ????}) </script> </body> </html>查看全部 -
應(yīng)用組件
<ul> ????<todo-item?v-for="(item,?index)?of?list" ???????????????:key="index" ????:content="item"> ????</todo-item>
定義組件
Vue.component('todo-item',?{ ????props:?['content'], ????template:?'<li>{{content}}</li>' });查看全部 -
計(jì)算屬性與偵聽(tīng)器 computed:?{ ????fullName:?function?()?{ ????????return?this.firstName?+?'?'?+?this.lastName; ????} }, watch:?{ ????fullName:?function()?{ ????????this.count++ ????} }查看全部 -
計(jì)算屬性
computed:{
??? fullName: function() {
??????? return this.firstName + ' ' + this.lastName;
??? }
}
查看全部
舉報(bào)