11-vue_day05

day05內容

compyted 計算屬性
filters
watch 監聽
components
props

vue

1. 安裝
   下載，script
   sdn，script
   模塊化，npm
2. vue實例對象
   new Vue({
   el:’#app’,
   template:’’,
   data:{},
   methods:{},
   生命週期構子函數,
   computed:{},
   filters:{},
   watch:{},
   components:{}
   props:[]
   })

vue實例對象可以直接訪問data/methods/computed/中的屬性
在方法，生命週期鉤子函數this指向vue實例對象
3. 模板渲染

1. 雙大括號
   {{message}}

{{isNow?"":""}}   {{message.split('').reverse().join('')}}

2. 指令
   列表渲染
   v-for key
   條件渲染
   v-if=""
   v-else
3. 屬性動態綁定
   v-bind:key=“變量” 變量定義在data中
   簡寫
   :key=“變量”

style屬性的綁定
:style=“style”

{
data:{
style:{
color:‘red’;
display:‘none’
}
}
}

5. 事件綁定
   v-on:click=“變量” 變量定義在methods中
   簡寫
   @click=“變量”

@click.prevent=""

6. 計算屬性
7. 過濾器
8. 監聽
9. 組件(自定義標籤)

1. 定義組件
   Vue.component(‘my-alert’,{
   vue實例構造函數的參數
   template:’’,
   data(){
   return {

   }
   },
   props:[‘data’]
   })

2. 使用組件
   

理解：
組件定義實際上可以理解爲是函數的定義，組件的調用也類似於函數的調用，函數使用參數進行傳遞，組件是使用屬性進行傳遞

---

項目設計：

1. 框架的應用：
   vue 核心框架（數據驅動框架，採用mvvm模式）
   element-ui 組件庫
   jquery 數據交互
2. 需求
   看點資訊-資訊管理模塊
   發佈資訊
   修改資訊
   刪除資訊
   多條件符合查詢資訊