-
其他 阿達大
查看全部 -
父組件通過屬性向子組件傳值；
子組件通過發布$emit向父組件傳值；
查看全部 -
vue?入門導圖
查看全部 -
Git 簡單實用教程
查看全部 -
一、條件渲染
1、v-if，v-else ， v-else-if?
2、v-show?
二、列表渲染
1、v-for ： v-for="item in list"
三、Class和Style綁定
1、v-bind: -->簡寫 ?:style
查看全部 -
查看全部
-
git checkout -b 分支名? ?在主分支上創建一個新的分支
git checkout 分支名 切換到對應分支
git breach -a 查看所有分支
合并分支，首先切換到主分支，使用git merge 本地分支名，再在主分支上進行git push 提交到遠程
git branch -D dev 刪除本地名為dev的分支，然后使用
git push origin? :dev 注意:dev的冒號前為空
git reset --hard head^ 退回到之前的版本
git log 查看日志
git reflog 之前的提交日志
使用git reset --hard HEAD@{1}或者git reset --hard 44c2edc即可再找到對應的版本
查看全部 -
console.log()
console.error()
alert()阻塞式，執行完才會執行后續代碼
debugger 斷點
chrome瀏覽器中console的使用
chrome瀏覽器vue組件
選項卡一：可以看到頁面用到了哪些組件，組件中用到了用哪些屬性
選項卡二：監視調試vue中的vuex
Network：查看頁面上加載的項
? ? ? ? ? ? ? ? ?XHR：頁面上發起的請求
? ? ? ? ? ? ? ? ?JS? CSS IMG：頁面中對應用到的文件
? ? ? ? ? ? ? ? 最右側online選項當需要調試頁面上交互可以選擇Slow 3G（較慢的網速），看加載的順序速度loading交互
mounted是vue的生命周期，當頁面掛載完成后執行
可以在mounted中定義window.vue=this，然后在chrome瀏覽器中，console選項卡中使用，window.vue.屬性名，或者window.vue.方法名進行調試
可以將vue賦值給一個全局變量，從而取到其中的值
例如 ： var app = new Vue({
? ? ? ? ? ? el:'#app',
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? msg: 'Hello'
? ? ? ? ? ? }
? ? ? ? ? })
在console調試頁面，就可使用app.msg獲取到msg的值
查看全部 -
state : 組件的狀態（需要管理的或者組件公用的）
mutations : 定義改變狀態的方法集
使用vuex，首先定義一個store這樣的js文件，在文件中引入vuex
Vue.use(Vuex),定義state和mutations
在組件中使用vuex
首先，使用import引入store(定義了vuex的js文件)。然后在組件的default中引用stroe，在組件中提交或修改，使用store.commit('store中定義的方法名')。使用公共的狀態，同樣需要引入和在default引用，在data中引用，例如，msg: store.state.屬性名。
查看全部 -
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。<div id="app">????<div v-if="Math.random() > 0.5">??????Sorry????</div>????<div v-else>??????Not sorry????</div></div>?----------<div id="app">????<div v-if="type === 'A'">??????A????</div>????<div v-else-if="type === 'B'">??????B????</div>????<div v-else-if="type === 'C'">??????C????</div>????<div v-else>??????Not A/B/C????</div></div>查看全部 -
VUE入門查看全部
-
組件化
獨立的、可復用的、整體化的
組件化的原因
實現功能模塊的復用、高執行效率、開發單頁面復雜應用
拆分原則
300行原則（包括樣式、邏輯等所有代碼）、復用原則（經常去使用，比如頭部導航和底部版權）、業務復雜性原則
查看全部 -
:class="['active','more',{'another': item.age<30}]"
當item.age小于30時，有class名another
:
在vue的data中
styleMsg: {
color: 'red',
textShadow: '0 0 5px green'
}
注意，像text-shadow這種帶-的css屬性名，應用以下寫法
'text-shadow': '',
'textShadow':''? ?(駝峰法)
查看全部 -
computed:{
msg1: function(){
return 'computed:'+this.msg+arr
}
}
注：this.msg為vue實例中data中的msg屬性值，arr為vue實例外的變量值
只改變arr，msg1的值不發生變化
改變arr后改變msg，msg1的值中的this.msg和arr同時獲取最新的值，發生重新渲染
watch:{
msg:function(newval,oldval){
console.log(newval)
console.log(oldval)
}
}
watch監聽屬性，當msg值發生改變時觸發
watch通常監聽一個變量或常量
computed可監聽多個變量或常量但一定都是在vue的實例中
查看全部
舉報