Vue 筆記

• 基本格式

var app = new Vue() （{     
    el: '#app',//綁定的元素id為‘a(chǎn)pp’  
    data: {
        //存放數(shù)據(jù),與html直接綁定
        name：ZHANGSAN,
        age: 18
    },
    methods: {
        //存放函數(shù)
        onClick: function() {
            console.log('clicked');
        }
    }
}）叁巨；

• 指令

  • v-model

    數(shù)據(jù)的雙向綁定斑匪。

    • lazy、trim锋勺、number修飾符

      <div id="app">
          <input type="text" v-model.lazy="name">
          //惰性更新秤标，只有當(dāng)鼠標(biāo)blur的時(shí)候，才更新宙刘。
          <input type="text" v-model.trim="age"> 
          //把用戶輸入的值前后空格去掉，優(yōu)化數(shù)據(jù)庫存儲(chǔ)
          <input type="text" v-model.number="phone">
          //用于價(jià)錢牢酵、年齡等一切數(shù)字類型的數(shù)據(jù)悬包，轉(zhuǎn)換成數(shù)字類型
          {{name}}
      </div>
    

    • 類型

        <div id="app">
            <label>
                男
                <input v-model="sex" value="male" type=“radio”>
                //用v-model替代name屬性
            </label>
            <label>
                女
                <input v-model="sex" value="female" type=“radio”>
            </label>
            <textarea v-model="article"></textarea>
            <select v-model="from">
                <option value="1">北京</option>
                <option value="2">上海</option>
            </select>
            <select v-model="dest" multiple>
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">廣州</option>
            </select>
        </div>
        
        data: {
            sex: female，
            article： sfhusdigheyufdgisfvsvgd馍乙，
            from: 1布近，
            //select的默認(rèn)值為1，即value值為1的北京丝格。
            dest: []//多選select框的dest為數(shù)組
        }
        //input的type="checkbox",即復(fù)選框時(shí)撑瞧，sex為一個(gè)數(shù)組，data: {sex: []},可取默認(rèn)值[male]显蝌。
      

  • v-bind(省略為：)

    用于綁定數(shù)據(jù)和元素屬性

    e.g.

    <style>
       .active {
            background: #a10;
       }
    </style>
    
    //傳對(duì)象预伺，active是要添加的類，值在css中定義曼尊，在isActive為true的時(shí)候添加酬诀。
    <a v-bind:class="{active: isActive}"></a>
  
    <a v-bind:class="klass" v-bind:href="url"><img v-bind:src="img"></a>
    
    data: {url: http://baidu.com,img:"xxxx",klass: btn btn-default，isActive: true}
  

  • v-show
    e.g. <span v-show="sex">性別：</span>
    //data里面沒有sex骆撇，所以這個(gè)span標(biāo)簽不會(huì)顯示瞒御。

  • v-if

    與v-show的功能類似。不同的是神郊，假如v-if為false肴裙，該元素直接在DOM中被刪除趾唱，而v-show只是將該元素隱藏起來，實(shí)際上這個(gè)元素永遠(yuǎn)存在蜻懦，相當(dāng)于display：none甜癞。

  • v-for

    專門用于迭代的指令。一般用于迭代對(duì)象組成的數(shù)組阻肩。

    e.g.

    <div id="app">
       <ul>
           <li v-for="food in foodList">{{food.name}}: ￥{{food.discount? food.price * food.discount : food.price}}</li>
           //三元運(yùn)算符带欢，假如discount存在，則返回打折后的價(jià)格烤惊，否則返回原價(jià)乔煞。
           //foodList是一個(gè)迭代的目標(biāo)，food是里面的每一項(xiàng)柒室，這每一項(xiàng)又是個(gè)字符串渡贾。
       </ul>
   </div>
  

    <script>
    var app = new Vue({      
      el: '#app',
      data: {       
         foodList: [
           {
              name: '蔥',
               price: 10,
               discount: .5
           },
           {
               name: '姜',
               price: 5,
               discount: .8
            },
           {
               name: '蒜',
               price: 7
           },
         ],
         }
    })
   </script>
  

  • v-on（省略為@）

    用于綁定事件。

    e.g.

     <button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick"></button>
     //綁定多個(gè)事件雄右，當(dāng)鼠標(biāo)進(jìn)入的時(shí)候空骚，觸發(fā)onEnter函數(shù)，鼠標(biāo)出去的時(shí)候擂仍，觸發(fā)onOut函數(shù)囤屹。
    
     <form v-on:keyup.enter="onKeyup" v-on:submit="onSubmit($event)">
     //當(dāng)用戶按下一個(gè)鍵且這個(gè)鍵是enter時(shí)，執(zhí)行onKeyup函數(shù)逢渔。
     //$event是關(guān)鍵詞肋坚，傳的是事件對(duì)象。vue封裝之后肃廓，可寫成v-on:submit.prevent="onSubmit"智厌。
         <input type="text">
         <button type="submit">提交</button>
     </form>
    
     methods: {
         onClick: function() {
             console.log('clicked');
         },
         onEnter: function() {
             console.log('mouse enter');
         },
         onOut: function() {
             console.log('mouse leave');
         },
         onSubmit: function(e) {
             //禁止瀏覽器的默認(rèn)提交行為，將事件傳進(jìn)來
             e.preventDefault();
             console.log('Submitted');
         }盲赊，
         onKeyup: function() {
             console.log('entered');
         },
     }
    

  • 控制流指令v-if铣鹏、v-else-if、v-else

    e.g.

      <div id="app>
          <div v-if="role == 'admin' || role == 'superAdmin'">
              管理員你好
          </div>
          <div v-else-if="role == 'hr'">
              待查看簡(jiǎn)歷列表：
          </div>
          <div v-else>
              您沒有權(quán)限訪問此頁面
          </div>
      </div>
      data: {role: 'hr'}
    

• 自定義指令

    <style>
        .card {
            width: 200px;
            background: #ccc;
            padding: 10px;
            margin: 5px;
        }
    </style>
  
    <div> id="app">
        <div> v-pin：true.bottom.left="card1.pinned" class="card">
            <button @click="card1.pinned = !card1.pinned">定住/取消</button>
            hhhhhhhhh
        </div>
        <div> v-pin="card2.pinned" class="card">
            hhhhhhhhh
        </div>
    </div>
  
    Vue.directive('pin',function(el,binding) {
        var pinned = binding.value;
        var position = binding.modifiers;
        var warning = binding.arg;
  
        if(pinned) {
            el.style.position = 'fixed';
  
            for(var key in position) {
                if(position[key]) {
                    el.style[key] = '10px';
                }//key代表的就是top哀蘑、bottom诚卸、left、right
            }
            if (waring == 'true') {
                el.style.background = 'yellow';
            }
        }
        else {
            el.style.position = 'static';
        }
    })//回調(diào)函數(shù)绘迁，el指vue會(huì)把pin指令所在的整個(gè)元素傳進(jìn)來,binding是一個(gè)對(duì)象惨险，指指令傳進(jìn)來的值和其他基本信息，這里的pinned就是指令的綁定值：card1.pinned和card2.pinned脊髓。
    new.Vue({
        el:'#app',
        data: {
            card1:{
                pinned: false;
            }
            card2:{
                pinned: false;
            }
        )
    })
  

  binding: 一個(gè)對(duì)象辫愉，包含以下屬性：

  name: 指令名，不包括 v- 前綴将硝。

  value: 指令的綁定值恭朗， 例如： v-my-directive="1 + 1", value 的值是 2屏镊。

  oldValue: 指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用痰腮。無論值是否改變都可用而芥。

  expression: 綁定值的表達(dá)式或變量名。 例如 v-my-directive="1 + 1" 膀值， expression 的值是 "1 + 1"棍丐。

  arg: 傳給指令的參數(shù)。例如 v-my-directive:foo沧踏， arg 的值是 "foo"歌逢。

  modifiers: 一個(gè)包含修飾符的對(duì)象。 例如： v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是 { foo: true, bar: true }翘狱。

• 計(jì)算屬性

  通過其他的數(shù)據(jù)算出新的數(shù)據(jù)秘案，并且將新數(shù)據(jù)緩存下來，當(dāng)其他的數(shù)據(jù)沒有發(fā)生改變時(shí)潦匈，調(diào)用緩存的數(shù)據(jù)阱高，大大優(yōu)化性能，這也是跟methods不一樣的地方茬缩，methods每次被調(diào)用都會(huì)重新計(jì)算赤惊。

  e.g.

<div id="app">
    <table border="1">
        <thead>
            <th>學(xué)科</th>
            <th>分?jǐn)?shù)</th>
        </thead>
        <tbody>
            <tr>
                <td>數(shù)學(xué)</td>
                <td><input type="text" v-model.number="match"></td>
                //用number修飾符避免分?jǐn)?shù)被當(dāng)成字符串
            </tr>
            <tr>
                <td>物理</td>
                <td><input type="text" v-model.number="physics"></td>
            </tr>
            <tr>
                <td>英語</td>
                <td><input type="text" v-model.number="English"></td>
            </tr>
            <tr>
                <td>總分</td>
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{average}}</td>
            </tr>
        </tbody>
    </table>
</div>

var app = new Vue({
    el: '#app',
    data: {
        match: 90,
        physics: 85,
        English: 50,
    },
    computed: {
        sum: function () {
            return parseFloat(this.math) + parseFloat(this.physics) + parseFloat(this.English);
        }，//this指代實(shí)例化出來的app,parseFloat把字符轉(zhuǎn)化為數(shù)字凰锡，此時(shí)可不用添加number修飾符荐捻。
        average: function() {
            return Math.round(this.sum / 3);
        }
    }
})

• 全局和局部組件

  • 定義一個(gè)全局組件

      Vue.component('alert', {
      //第一個(gè)參數(shù)傳的是組件在vue里面的名字
          template: '<button @click="on_click">彈彈彈</button>',
          methods: {
              on_click: function () {
                  alert('HHH');
              }
          }
      });
    

    定義一個(gè)域，規(guī)定這個(gè)組件存放的位置寡夹，即生存空間。

      new Vue({
          el: '#seg1'
      });
    

    html

      <div id="seg1">
          <alert></alert>
      </div>
    

  • 定義一個(gè)局部組件

      new Vue({
          el: '#seg1',//將組件定義在sge1這個(gè)域里面作為局部變量厂置。
          components: {
              alert: {
                  template: '<button @click="on_click">'彈彈彈</button>',
                  methods: {
                      on_click: function () {
                          alert('HHH');
                      }
                  }
              }
          }
      })
    

    • 以上代碼可寫成下面的形式：

        var alert_component = {
            template: '<button @click="on_click">'彈彈彈</button>',
            methods: {
                on_click: function () {
                    alert('HHH');
                }
            }
        };
      
        new Vue({
            el: '#seg1',
            components: {
                alert_component
            }
        })
      

• 配置組件

  html

    <div id=app">
    <like></like>
    </div>
  
    <template id="like-temponent-tpl">
        <button :class="{liked: liked}" @click="toggle_like()">贊 {{like_count}}</button>
    </template>
  

  css

    <style>
        .liked {
            background: deeppink;
        }
    </style>
  

  js

    Vue.component(like',{
    template: '#like-temponent-tpl',
        data: function () {
            return {
                like_count: 10,
                liked: flase,
            }
        },
    methods: {
        toggle_like: function () {
            if (!this.liked)
                this.like_count++;
            else
                this.like_count--;
            
            this.liked = !this.liked;
        }
    }
    })
  

• 組件通信

  • 父子通信

    e.g.

      <div id="app">
          <user username="hhh"></user>
          //修改username的值菩掏，動(dòng)態(tài)改變href的路徑。
      </div>
    
      Vue.component('user',{
          template: '<a :href="\'/user/\' + username"> {{username}}</a>',
          pros: ['username'],//傳你需要傳進(jìn)來的東西昵济，與html組件里的對(duì)應(yīng)智绸，這里對(duì)應(yīng)html調(diào)用的user組件里的username
          methods: {
          
          }
      })  
    
      new Vue({el: '#app',})
    

  • 子父通信

    e.g.

      <div id="app">
          <balance></balance>
      </div>
    
      Vue.component('balance',{
          template: `
          <div>
              <show @show-balance="show_balance"></show>
              //當(dāng)父組件收到子組件發(fā)出事件后，把默認(rèn)為false的show-balance改成true访忿。
              <div v-if="show">您的余額為0</div>
          </div>`瞧栗，
          methods: {
              show_balance: function(data) {
                  this.show = true;
                  console.log('data:',data)
              }
          }
          data: function() {
              return {
                  show: false,
              }
          }
      });
      Vue.component('show',{
          template： `<button @click="on_click()">顯示余額</button>`，
          methods: {
              on_click () {
                  this.$emit('show-balance',{a: 1,b: 2});//用于觸發(fā)一個(gè)事件海铆，在組件show上監(jiān)聽
              }
          }
      });
    
      new Vue({
          el: '#app',
      })
    

  • 任意及平行組件通信

    e.g.

      <div id="app">
          <hhh></hhh>
          <zzz></zzz>
      </div>
    
      var Event = new Vue();//事件調(diào)度器迹恐，調(diào)度每一條事件。
    
      Vue.component('hhh',{
      template: `
          <div>說: <input @keyup="on_change' v-model="i_said"/></div>
      `,
      methods: {
          on_change() {
              Event.$emit('hhh-said-something',this.i_said)
          }//用于觸發(fā)事件卧斟，事件的名稱是hhh-said-something殴边，第二個(gè)參數(shù)是傳遞hhh說話的內(nèi)容憎茂。            
      }
      data: function() {
          return {
              i_said: '',
          }
      }
    
      })
    
      Vue.component('zzz',{
      template: `<div>hhh說：{{hhh_said}}</div>`,
      data: function() {
          return {
              hhh_said: '',
          };
      }
      
      //生命周期，掛載完成锤岸。初始化完畢竖幔。用于監(jiān)聽on_change
      mounted: function () {
          var me = this;//用一個(gè)變量緩存指代
          Event.$on('hhh-said-something',function (data){
              me.hhh_said = data;
          });
      }
    
      })
    

• 過濾器（優(yōu)化用戶體驗(yàn)）

  e.g.

    <div id="app">
        {{ price | currency('USD') }}
        //過濾器的名字為currency，把價(jià)格傳到過濾器里面,price相當(dāng)于一個(gè)默認(rèn)參數(shù)是偷，對(duì)應(yīng)val拳氢，USD是第二個(gè)參數(shù)，這里對(duì)應(yīng)unit蛋铆。
    </div>
  
    Vue.filter('currency',function(val,unit) {
        val = val || 0;
        unit = unit || 元馋评；
        return val + unit；
    })
  
    new Vue({
        el:'#app',
        data: {
            price: 10,
        ]
    })
  

• 混入mixins

  重復(fù)功能和數(shù)據(jù)的儲(chǔ)存器戒职。定義了一部分可復(fù)用的方法或者計(jì)算屬性栗恩。

  e.g.

    var base = {
        methods: {
            show: function() {
                this.visible = true;
            },
            hide: function() {
                this.visible = false;
            },
            toggle: function() {
                this.visible = ！this.visible;
            },
        }
        data: function() {
            return {
                visible： false洪燥，
            } 
        }
    };
    
    Vue.component('tooltip',{
        template: `
        <div>
            <span @mouseenter="show" @mouseout = “hide”>ahhh</span>
            <div v-if="visible">
                啊哈哈哈
            </div>
        </div>
        `,
        mixins: [base],
        data: function() {
            return {
                visible: true,
            }
        }//覆蓋mixins磕秤，相當(dāng)于繼承和重寫
    });
  
    Vue.component('popup',{
        template: `
        <div>
            <button @click="toggle">popup<button>
            <div v-if="visible">
                <span @click="hide">X</span>
                <h4>title</h4>
                hhhhhhhhhhhhhh
            </div>
        </div>
        `,
        mixins: [base],
    });
  
    new Vue({
        el: '#app',
        data: {}
    })
  

• 插槽slots

    .panel {
        max-width: 300px;
        border: 1px solid #999;
        margin-bottom: 15px;
    }
  
    .panel > * {
        padding: 15px;
    }
  
    .panel .title {
        border-bottom: 1px solid #999;
    }
  
    .panel .footer {
        border-bottom: 1px solid #999;
    }
  
    <div id="app">
        <panel>
            <div slot="title">我是題目</div>
            <div slot="content">我是內(nèi)容</div>
            <div slot="footer">查看更多</div>
            //對(duì)應(yīng)slot里的內(nèi)容
        </panel>
    </div>
  
    <template id="panel-tpl">
        <div class="panel">
            <div class="title">
                <slot name="title"></slot>/
            </div>
            <div class="content">
                <slot name="content"></slot>
            </div>
            <div class="footer">
                <slot name="footer">更多信息</slot>
                //可以添加一個(gè)默認(rèn)值“更多信息”
            </div>
        </div>
    </template>
  
    Vue.component('panel',{
    
    })
  
    new Vue({
        el: '#app',
        data: {}
    })···
  

• 例子

<div id="app">
    <div>
        <input type="text" v-model="name">
        <span v-show="name">你的名字是：{{name}}</span>
    </div>
    <div>
        <input type="text" v-model="age">
        <span v-show="age">你的年齡是：{{age}}</span>
    </div>
    <div>
        <input type="text" v-model="sex">
        <span v-show="sex">你的性別是：{{sex}}</span>
    </div>
</div>



<script>
    var app = new Vue({
        el: #app,
        data: {
            name: ZHANSGAN,
            age: 18           
        }
    })
</script>