[vue]mvc模式和mvvm模式及vue學習思路(廢棄)

很久不寫東西了,感受收生疏了, 學習使用以思路爲主, 記錄筆記爲輔做用.

v-if: http://www.cnblogs.com/iiiiiher/p/9025532.html
    v-show
    template

v-bind: http://www.cnblogs.com/iiiiiher/p/9025764.html
    style
    class
    屬性值
    
v-on: http://www.cnblogs.com/iiiiiher/p/9025935.html

computed: http://www.cnblogs.com/iiiiiher/p/9025253.html
    依賴項觸發get

bootstrap佈局

bootstrap-table基於bootstrap的表格插件
Ant Design Pro基於react, 這裏能夠了解一下網頁的組件

• 佈局
• 表單
• 列表

- bootstrap
1.柵格化佈局 默認12列(有一些框架多是24列)
    <div class="container">
        <div class="row">

2.常見的樣式 基本樣式 + 加強樣式

<table class="table table-hover table-bordered">
<button class="btn btn-danger" @click="remove(product)">刪除</button>

注意: default 灰色 success 綠色 danger 紅色 warning 警告色 info淺藍色 primary 藍色

js

• ajax
• 數據綁定

- vue的ui框架
iview,mintui,elementui

- js基礎板塊

原型--原型鏈繼承--實例化過程--全部函數都是Fucntion的一個實例
                    私有this
                    prototype裏的this

json
    數據綁定
        1.逐次加
        2.一次加
            迴流 重繪
        3.文檔碎片

        
- vue板塊

1.模板
    v-text(v-once)
    v-html
    v-model
        修飾符: .number .lazy .trim
    
    v-bind: 冒號
    v-on: @
        @keyup.enter.ctrl

2.表單
    綁定值
    綁定數組
    

select選擇: category
select多選,標籤

checbox單選: 置頂
checkbox多選: 多選題
radio單選: 單選題

3.事件


todo: vue-router
      vuex

keyup.enter
onclick
onchange
onsubmit


arr.map
arr.filters
    栗子:刪除按鈕
    remove(p){ // p表明的是當前點擊的這一項 [xxx,ooo,qqq,ppp,p]
      this.products = this.products.filter(item=>item!==p);
    },
    
arr.reduce
    栗子: 計算總價格
    return  this.products.reduce((prev,next)=>{
      console.log(1000000);
      if(!next.isSelected)return prev; // 若是當前沒被選中，就不加當前這一項
      return prev+next.productPrice*next.productCount;
    },0);
              
arr.forEach
    栗子: 全選/反選(set)(computed)
    set(val){ //val是給checkAll 賦予值的時候傳遞過來的
        this.products.forEach(item=>item.isSelected = val );
    }
arr.every
    找false,若有返回false,如無返回true.
    栗子:
        全選/反選(get)(computed)

computed的緩存特性:

通常computed裏只會有get,不會set. 若是隻有get,能夠省略不寫get.

學習vue的時候,會有mvvm的概念, 就先理解下mvc環狀模型
從Script到Code Blocks、Code Behind到MVC、MVP、MVVM-寫的不錯,涉及到一些哲學思想

理解網站設計的mvc數據單向循環模式

參考

vue思路

1,框架和庫


2, vue全家桶:

vuejs: (基於es5)
    vue-router: 客戶端路由
    vuex: 大規模狀態管理
    axios: ajax獲取數據
    vue-cli: 構建工具
-

3,特色
響應的變化
    數據改變,視圖自動更新
    MVC:
        model: 模型
        view: 數據
        controller: 控制器
    MVVM:
        model: 模型
        view: 視圖
        view-model: 視圖模型
-
組合的視圖組件
    
4,體驗
    1.npm安裝
    2.綁定數據
        vm.msg改變
    3.雙向綁定
        input textarea  select checkbox radio
    
view <-- model

view --> model(view-model)
    前端發生
    前端的model至關於data部分
    前端的view至關於input等表單


1,4個指令
    v-model
    v-once
    v-text 代替{{}},解決閃爍問題
        <style>
            {display: none}
        </style>
        <div id="app" v-cloak>
        </div>
    v-html

2,arr的監控(修改data)

不可監控: 修改arr的某一項
    1.經過下標識
    2.經過長度
可監控: pop/push shift/unshift sort/reverse splice reduce/filter

3.arr的遍歷
    v-for: 替代innerHTML

4.函數

4.1 定義: method的2種寫法
    1.
    寫data裏
    寫methods裏
    
    2. v-on === @ 兩種寫法
        <div v-on:mousedown="fn">1.查看幫助...</div>
        <div @mousedown="fn2">2.查看幫助...</div>
4.2 調用
    第一個位置參數默認是event.
    fn2()               fn2()
    fn3(event)          fn3()
    fn4(event, age)     fn4($event, 22)


5.簡易todo
    1.v-model: 雙向綁定
    2.v-for:   arr遍歷
    3.v-on:    函數
    input --> v-model
    button--> v-on    @event
    arr   --> v-for

回車添加
寫完清空

事件觸發條件:
@keyup.13="add"
@keyup.enter="add"
@keyup.a="add"
@keyup.contrl.a="add"



v-model:
    input
    checkbox
        1.checkbox要加value屬性
        2.且data字典要是arr類型
    select單選
        <select v-model="msg">
            <option value="" disabled>請選擇</option>
            <option value="kanshu">看書</option>
            <option value="pashan">登山</option>
            <option value="youyong">打球</option>
        </select>
        1,msg默認爲空
            請選擇不容許點
        2,若是value不寫,msg默認取的是><之間的.
        
    select多選: 數據類型須要是數組
        <select name="" id="" multiple v-model="arr">
            <option value="kanshu">看書</option>
            <option value="pashan">登山</option>
            <option value="youyong">打球</option>
        </select>
        

    互斥: select單/checkbox
        數據類型str, 加value
    多選: select多選
        數據類型,arr

箭頭函數:
1, 無關鍵字
2, 若是1個參數, 則能夠省掉小括號
3, 無this, this指向上一級做用域的this

// function fn(age) {
//     console.log(age);
// }

fn = age => console.log(age);
fn(20);


1.axios獲取數據
2.綁定
    bootstrap表單佈局
    綁定數據
        1.充當屬性數據
            <img :src="product.productCover" :title="product.productName">
        2,小計
            <td><input type="number" v-model.number.lazy="product.productCount"></td>
        3,計算
            <td>{{product.productPrice*product.productCount}}</td>

-

3.刪除