1. 技術棧
vue 元件化編碼
父子元件資料互動 $parent
watch 深度監視
本地快取 localstorage
js高階函式靈活使用
按鍵修飾符使用
2. 編碼
="todo-container"
>
<
/header>
"todos"
>
<
/todos>
<
/footer>
<
/div>
<
/template>
import header from
"./components/header/header"
;import todos from
"./components/todos/todos"
;import footer from
"./components/footer/footer"
;export
default},
// 深度監視 todos資料變化
watch :}}
, components:
}<
/script>
"less"
>
.todo-container
<
/style>
="header"
>
"text" placeholder=
"請新增任務" @keyup.enter=
"addtodo" v-model=
"currenttodo"
>
<
/div>
<
/template>
export
default},
methods:);
this
.currenttodo ='';
}}}<
/script>
"less"
>
.header
}<
/style>
="content"
>
="item" v-
for=
"(item, index) in todos"
:key=
"index"
>
"checkbox"
:checked=
"item.complate" @click=
"item.complate = !item.complate"
>
}<
/span>
"deletetodo(index)"
>刪除<
/button>
<
/div>
<
/div>
<
/template>
export
default},
methods:}}
<
/script>
"less"
>
.content
button}}
<
/style>
="bottom"
>
="selectall"
>
"checkbox" id=
"select" v-model=
"selectall"
>
="select"
> 全選 / 全不選 <
/label>
<
/div>
="complate"
>
已完成}/ 總任務
}<
/span>
<
/div>
"deletecomplated"
>清空已完成<
/button>
<
/div>
<
/template>
export
default},
methods:)}
},computed :,0
)}, selectall :
,set
(value))}
}}}<
/script>
"less"
>
.bottom
.complate
button
}<
/style>
vue元件與元件化
元件化是當今最為流行的一種可復用性增加的方法，隨著當今前端開發的複雜度更加，這個元件化變得越來越流行 vue.js通過vue.extend 方法來擴充套件元件的使用 vue.extend options 裡面的options引數和 vue options 的options引數幾乎是一致的 new v...
vue 子元件給父元件傳值demo
子元件向父元件傳值 1.子元件通過自定義事件向父元件傳遞資訊 傳送給爸爸資料 2.父元件監聽子元件的事件 總結 子元件向父元件傳值 子元件觸發乙個自定義事件父元件同時去監聽該自定義事件當子元件觸發自定義事件的時候，會把自定義事件拋向父元件，父元件觸發自定義事件的時候會執行對應的事件 爸爸頁面 爸爸的...
vue封裝左側導航欄元件demo
示例demo的樣式 然後說一下布局元件的呼叫邏輯 這裡我使用覆蓋element的樣式的方式，達到專案需求，這裡學到了很多如何定位dom元素的樣式，使用css陰影，如何覆蓋樣式，如何使用css3的偽類，如何通過滑鼠移動事件找到dom元素等 首先使用layout元件並設定樣式，其作為左側元件的容器，在專...