Vue筆記

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的時候，才更新。
      <input type="text" v-model.trim="age"> 
      //把用戶輸入的值前后空格去掉，優(yōu)化數(shù)據(jù)庫存儲
      <input type="text" v-model.number="phone">
      //用于價錢、年齡等一切數(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ù)選框時，sex為一個數(shù)組，data: {sex: []},可取默認(rèn)值[male]。

    • v-bind(省略為：)

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

      e.g.

      <style>
     .active {
          background: #a10;
     }
  </style>
  
  //傳對象，active是要添加的類，值在css中定義，在isActive為true的時候添加。
  <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，所以這個span標(biāo)簽不會顯示。

    • v-if

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

    • v-for

      專門用于迭代的指令。一般用于迭代對象組成的數(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存在，則返回打折后的價格，否則返回原價。
         //foodList是一個迭代的目標(biāo)，food是里面的每一項，這每一項又是個字符串。
     </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>
 //綁定多個事件，當(dāng)鼠標(biāo)進(jìn)入的時候，觸發(fā)onEnter函數(shù)，鼠標(biāo)出去的時候，觸發(fā)onOut函數(shù)。

 <form v-on:keyup.enter="onKeyup" v-on:submit="onSubmit($event)">
 //當(dāng)用戶按下一個鍵且這個鍵是enter時，執(zhí)行onKeyup函數(shù)。
 //$event是關(guān)鍵詞，傳的是事件對象。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'">
          待查看簡歷列表：
      </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會把pin指令所在的整個元素傳進(jìn)來,binding是一個對象，指指令傳進(jìn)來的值和其他基本信息，這里的pinned就是指令的綁定值：card1.pinned和card2.pinned。
  new.Vue({
      el:'#app',
      data: {
          card1:{
              pinned: false;
          }
          card2:{
              pinned: false;
          }
      )
  })

    binding: 一個對象，包含以下屬性：

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

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

    oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

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

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

    modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。

  • 計算屬性

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

    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指代實例化出來的app,parseFloat把字符轉(zhuǎn)化為數(shù)字，此時可不用添加number修飾符。
        average: function() {
            return Math.round(this.sum / 3);
        }
    }
})

  • 全局和局部組件

    • 定義一個全局組件

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

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

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

      html

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

    • 定義一個局部組件

        new Vue({
      el: '#seg1',//將組件定義在sge1這個域里面作為局部變量。
      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的值，動態(tài)改變href的路徑。
  </div>

  Vue.component('user',{
      template: '<a :href="\'/user/\' + username"> {{username}}</a>',
      pros: ['username'],//傳你需要傳進(jìn)來的東西，與html組件里的對應(yīng)，這里對應(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ā)一個事件，在組件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，第二個參數(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;//用一個變量緩存指代
      Event.$on('hhh-said-something',function (data){
          me.hhh_said = data;
      });
  }

  })

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

    e.g.

      <div id="app">
      {{ price | currency('USD') }}
      //過濾器的名字為currency，把價格傳到過濾器里面,price相當(dāng)于一個默認(rèn)參數(shù)，對應(yīng)val，USD是第二個參數(shù)，這里對應(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ù)的儲存器。定義了一部分可復(fù)用的方法或者計算屬性。

    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>
          //對應(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>
              //可以添加一個默認(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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設(shè)計架構(gòu)和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 3,158評論 1贊 4
  • VUE介紹 Vue的特點構(gòu)建用戶界面，只關(guān)注View層簡單易學(xué)，簡潔、輕量、快速漸進(jìn)式框架 框架VS庫庫，是一封裝...
    多多醬_DuoDuo_閱讀 2,861評論 1贊 17
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容，還有我對于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,187評論 0贊 29
  • 組件（Component）是Vue.js最核心的功能，也是整個架構(gòu)設(shè)計最精彩的地方，當(dāng)然也是最難掌握的。...
    六個周閱讀 5,783評論 0贊 32
  • 筆記 1.定義變量（{}）；最后有分號 //var a=new Vue({ })需要寫入括號 //el：元素未加 ...
    一壺清酒醉風(fēng)塵閱讀 206評論 0贊 0

友情鏈接更多精彩內(nèi)容