-
public 是公共的
main.js入口文件
new?Vue({ ??router, ??store, ??render:?h?=>?h(App), }).$mount('#app');實(shí)例化之后綁定#app
route 是安裝的路由
store 是安裝的vuex? 管理組件直接的狀態(tài)??
el 綁定?
查看全部 -
vue ui??
create 項(xiàng)目
查看全部 -
npm run serve 開啟項(xiàng)目
查看全部 -
代碼規(guī)則 更優(yōu)雅
選擇? eslint + airbnb config
選擇? eslint + standard config
保存的時候?qū)Υa進(jìn)行檢查，
保存到未來的項(xiàng)目，建議選擇no,
選擇yes 將來的項(xiàng)目 會安裝之前的安裝方式進(jìn)行
查看全部 -
選擇manually select features 為了學(xué)習(xí)不使用default 默認(rèn)的安裝方式。
用空格 選擇需要安裝的組件
查看全部 -
npm?install?npm@latest?-g???更新npm包?最新 npm?uninstall?vue-cli?-g??卸載?2.X?舊版本 npm?install?-g?@vue/cli???vue/cli?3 https://cli.vuejs.org/zh/guide/installation.html https://cn.vuejs.org/v2/guide/installation.html ???小程序
查看全部 -
?<div?v-for="item?in?list"> ????????<div?v-if="item?>?5"?:> ????????????大于5：{{item}} ????????</div> ????????<div?v-else?:class="['ac','add','more']"> ????????????{{item}} ????????</div> ????</div> ????<div?v-for="item?in?multi"> ????????<div?v-if="item.age?==?18"?v-bind:> ????????????{{item.name}}:{{item.age}} ????????</div> ????????<div?v-else?:class="{'activity':true}"> ????????????{{item.name}}:{{item.age}} ????????</div> ????</div> </div> <script> ????var?app?=?new?Vue({ ????????el:?'#bg', ????????data:?{ ????????????count:0, ????????????list:[1,2,3,4,5,6,8,7,9], ????????????multi:[{ ????????????????name:'張藝興', ????????????????age:28 ????????????},{ ????????????????name:'李健', ????????????????age:18 ????????????},{ ????????????????name:'鄧倫', ????????????????age:27 ????????????}], ????????????styleCss:{ ????????????????color:?'red', ????????????????textShadow?:?'0?0?5px?#232323' ????????????} ????????}, ????})查看全部 -
?<div?v-for="item?in?multi"> ????????<div?v-if="item.age?==?18"?v-bind:> ????????????{{item.name}}:{{item.age}} ????????</div> ????????<div?v-else> ????????????{{item.name}}:{{item.age}} ????????</div> ????</div> </div> <script> ????var?app?=?new?Vue({ ????????el:?'#bg', ????????data:?{ ????????????count:0, ????????????list:[1,2,3,4,5,6,8,7,9], ????????????multi:[{ ????????????????name:'張藝興', ????????????????age:28 ????????????},{ ????????????????name:'李健', ????????????????age:18 ????????????},{ ????????????????name:'鄧倫', ????????????????age:27 ????????????}], ????????????styleCss:{ ????????????????color:?'red', ????????????????textShadow?:?'0?0?5px?#232323' ????????????} ????????}, ????})查看全部 -
<div?id="bg"> ????<div?class="bg"?v-if="count?<?0?"> ????????hello?:?{{count}}個 ????</div> ????<div?class="bg"?v-else-if="count?<?0?&&?count?>?-3"> ????????hello2:?{{count}} ????</div> ????<div?class="bg"?v-else> ????????hello3:?{{count}} ????</div> ????<div?class="bg"?v-show="count?==?-1"> ????????????hello4:?{{count}} ????????</div> </div> <script> ????var?app?=?new?Vue({ ????????el:?'#bg', ????????data:?{ ????????????count:0 ????????}, ????}) </script>查看全部 -
<div?id="bg"> ????<div?class="bg"?v-if="count?>?0"> ????????hello?:?{{count}}個 ????</div> ????<div?class="bg"?v-else> ???????小于0:?{{count}} ????</div> </div> <script> ????var?app?=?new?Vue({ ????????el:?'#bg', ????????data:?{ ????????????count:0 ????????}, ????}) </script>查看全部 -
條件渲染：根據(jù)時間 或者一些什么需求 進(jìn)行渲染（v-if? ?v-else? ,v-else-if? ?v-show）
列表渲染： for 循環(huán)
class 與style 綁定
查看全部 -
計(jì)算屬性與偵聽器
watch 通常監(jiān)聽一個變量 或一個常量? 單一變量 或是數(shù)組
computed 可以監(jiān)聽多個變量 并且變量是在vue實(shí)例中
查看全部 -
watch? 只監(jiān)聽當(dāng)前 需要監(jiān)聽的值
computed 監(jiān)聽所有的值本實(shí)例中的值
var?arr?=?'outside?arr' var?app?=?new?Vue({ ????el:?'#bg', ????data:?{ ????????msg:?'hello?aurora', ????????another:?'computed?is?another!' ????}, ????watch:?{ ????????msg:?function?(newVal,?oldVal)?{ ????????????console.log('newVal:'?+?newVal); ????????????console.log('oldVal:'?+?oldVal); ????????} ????}, ????computed:?{ ????????msg1:?function?()?{ ????????????return?'Computed:'?+?this.msg?+?'=.='?+?this.another?+?'-----'?+?arr; ????????} ????} })查看全部 -
<body> ????<div?id="bg"> ????????<div?class="bg"> ????????????hello?world ????????????{{msg}} ????????</div> ????</div> <script> ????var?app?=?new?Vue({ ????????el:'#bg', ????????data:{ ????????????msg:'hello?aurora', ????????}, ????????watch:{ ????????????msg:function(newVal,?oldVal)?{ ????????????????console.log('newVal:'+newVal); ????????????????console.log('oldVal:'+oldVal); ????????????} ????????}, ????????computed:{ ???????????? ????????} ????})查看全部 -
?{{count}} ????????{{?(count+1)*10?}} ????????<br/> ????????{{template}} ????????<div?v-html="template"> ????????</div> ????????<a?v-bind:href="url">百度</a> ????????<a?:href="url">百度</a> ????????<button?type="button"?v-on:click="submit()">加數(shù)字</button> ????</div> <script> ????new?Vue({ ????????el:'#bg', ????????data:{ ????????????msg:'hello?aurora', ????????????count:0, ????????????template:'<div>hello?template</div>', ????????????url:'http://www.baidu.com', ????????????bg1:"id-bind" ????????}, ????????methods:{ ????????????submit:function(){ ????????????????this.count++ ????????????} ????????}查看全部
舉報
0/150
提交
取消