-
開發(fā)環(huán)境
vue cli插件
查看全部 -
?<div?v-for="item?in?list1"> ????????????<div?v-if="item.age>30" ?????????????????:class="{'active':true}"??<!--添加class名為active--> ?????????????????:> ????????????????{{item.name}} ????????????</div> ????????????<div?v-else> ????????????????{{item.age}} ????????????</div> ????????</div> ????</div> <script> ????var?app=new?Vue({ ????????el:'.app', ????????data:{ ????????????msg:'hello?vue!', ????????????styleMsg:{ ????????????????color:'red', ????????????????'text-shadow':'0?0?5px?#232323'//有橫線的要用單引號(hào)框起來 ????????????}, ????????????list:[1,2,3,4,5], ????????????list1:[ ????????????????{???name:'xiaozhang', ????????????????????age:32 ????????????????}, ????????????????{???name:'liming', ????????????????????age:22 ????????????????} ????????????],查看全部 -
//模板語法 var?att='test' var?app=new?Vue({ ????el:'.app',//綁定方式，這里采用id綁定 ????data:{?//data為給vue這個(gè)對(duì)象所使用到頁面上的數(shù)據(jù) ????????msg:'hello?vue!', ????????another:'another', ????????test:'000' ????}, ????method:{ ????}, ????watch:{//監(jiān)聽(通常監(jiān)聽一個(gè)變量或者一個(gè)數(shù)組) ????????msg:function?(newval,oldval)?{//當(dāng)msg值有變化時(shí)執(zhí)行 ????????????console.log('newval?is:'+newval) ????????????console.log('oldval?is:'+oldval) ????????} ????}, ????computed:{//數(shù)據(jù)聯(lián)動(dòng)(可以監(jiān)聽很多變量，但是這些變量一定要是在本實(shí)例里的) ????????//msg1當(dāng)所涉及到的本對(duì)象內(nèi)部變量改變時(shí)，才會(huì)重新寫 ????????msg1:function(){ ????????????return?'compute:'+this.msg+','+this.another+att ????????} ????}查看全部 -
<body> ????<div?class="bg"> ????????hello?world ????????{{msg}} ????????<!--用雙括弧包住變量可顯示在此模塊,若出現(xiàn)多個(gè)相同綁定， ????????則只顯示在第一個(gè)綁定模塊中；若只有一個(gè)綁定，綁定模塊中所有變量均可顯示--> ????</div> <script> ????new?Vue({ ????????el:'.bg',//綁定方式，這里采用class綁定 ????????data:{?//data為給vue這個(gè)對(duì)象所使用到頁面上的數(shù)據(jù) ????????????msg:'hello?vue!' ????????} ????}) </script>查看全部 -
啟動(dòng)運(yùn)行項(xiàng)目
查看全部 -
創(chuàng)建vue-工程項(xiàng)目
查看全部 -
class?綁定
后邊可以是一個(gè)對(duì)象，對(duì)象的值可以是js的判斷
也可以是一個(gè)數(shù)組，添加多個(gè)class
查看全部 -
style綁定
<div v-bind:></div>
或
<div v-bind:></div>
<script>
new Vue({
data:{
style：{
color:'red',
textShadow:'0 0 5px green'? //駝峰式
}
}
})
</scritpt>
查看全部 -
computed & watch
查看全部 -
源碼 https://github.com/kanlidy/vue-lessons-demo
查看全部 -
1312321321321
查看全部 -
開發(fā)工作流
查看全部 -
testtesttesttest
查看全部 -
計(jì)算屬性：computed
偵聽器：watch
查看全部 -
vue知識(shí)架構(gòu)
查看全部
舉報(bào)
0/150
提交
取消