Vue筆記-上

Vue筆記

零、簡易建構代碼

<div id="div1">
  <div>一共點選了  {{clickNumber}}次</div> 
  <button v-on:click="count">點選</button>
</div>
<script>
new Vue({
      el: '#div1',
      data: {
          clickNumber:0
      },
      methods:{
          count: function(){
              this.clickNumber++;
          }
      }
    })
</script>
           

在button上可以通過

v-on:click

通路 也可以通過

@click通路

一、監聽事件

監聽事件類型

//當子對象的事件冒泡上來時候，到此停止
.stop
//添加在按鈕或者連結後可以防止頁面跳轉   【可以不加方法名】
.prevent
//當子事件觸發時候，優先執行該對象的方法
.capture
//隻能自己響應事件
.self
//隻能響應一次事件
.once
           

通路時候可以通過

@click.stop

方式通路

###邏輯控制

####if 邏輯

<div v-if="number==0">大</div>
  <div v-else-if="number==1"> 中</div>
  <div v-else>小</div>
  <script>
    
new Vue({
      el: '#div1',
      data: {
          number:0
      },
      methods:{
          toutai: function(){
             this.number=Math.random()*3
          }
      }
    })
    
</script>
           

for 邏輯

類似增強for的玩法

<tr v-for="hero in heros">
	<td>{{hero.name}}</td>
	<td>{{hero.hp}}</td>
</tr>
           

标記處index

<tr v-for="hero,index in heros">
	//start at 0
	<td>{{index+1}}</td>
	<td>{{hero.name}}</td>
	<td>{{hero.hp}}</td>
</tr>
           

純數字

//從1開始
<div id="div1">
    <div v-for="i in 10">
     {{ i }}
    </div>
</div>
           

屬性綁定

<div id="div1">
    <a v-bind:href="page" target="_blank" rel="external nofollow" >http://12306.com</a>
</div>
<script>
new Vue({
      el: '#div1',
      data:{
          page:'http://12306.com'
      }
    })
</script>
           

v-bind:href

可以簡寫為

:href

雙向綁定

v-model 直接輸入在vue中的某個變量

<input v-model="name" >

計算

//vue 中兩個變量 rmb  exchange
<td align="center">
     {{ rmb/exchange }}
</td>
//vue 中 方法 dolors
<td align="center">
     {{ dolors }}
</td>

new Vue({
      el: '#div1',
      data: {
          exchange:6.4,
          rmb:0
      },
      computed:{
          dollar:function() {
              return this.rmb / this.exchange;
          }
      }
    })
</script>
           

computed 和 methods 的差別 computed 是由緩存的，下次回直接傳回以前計算的值，而不會再次計算，methods沒有。

監視

通過watch來監視屬性變化，然後如果變化則執行某個方法

new Vue({
      el: '#div1',
      data: {
          exchange:6.4,
          rmb:0,
          dollar:0
      },
      watch:{
          rmb:function(val) {
              this.rmb = val;
              this.dollar = this.rmb / this.exchange;
          },
          dollar:function(val) {
              this.dollar = val;
              this.rmb = this.dollar * this.exchange;
          },
      }
    })
           

過濾器

<td align="center">
                {{ data|capitalize|capitalizeLastLetter }}
</td>
<script>
new Vue({
      el: '#div1',
      data: {
          data:''
      },
      filters:{
          capitalize:function(value) {
                if (!value) return '' //如果為空，則傳回空字元串
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.substring(1)
          },
          capitalizeLastLetter:function(value) {
                if (!value) return '' //如果為空，則傳回空字元串
                value = value.toString()
                return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
          }
      }
    })
</script>
           

資料data會一次被capitalize capitalizeLastLetter 處理。

全局過濾器，

有時候多個頁面要用到相同的過濾器，此時則将過濾器搞為全局過濾器

Vue.filter('capitalize', function (value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
})
           

元件

<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>
  
<script>
new Vue({
  el: '#div1',
  components:{
      'product':{
          template:'<div class="product" >MAXFEEL休閑男士手包真皮手拿包大容量信封包手抓包夾包軟韓版潮</div>'
      }
  }
})
</script>
           

這樣可以通過簡潔的代碼獲得獲得多個相類似的對象。

全局模式

Vue.component('product', {
	  template: '<div class="product" >MAXFEEL休閑男士手包真皮手拿包大容量信封包手抓包夾包軟韓版潮</div>'
	})
           

參數

<div id="div1">
    <product name="MAXFEEL休閑男士手包真皮手拿包大容量信封包手抓包夾包軟韓版潮"></product>
    <product name="賓度 男士手包真皮大容量手拿包牛皮個性潮男包手抓包軟皮信封包"></product>
    <product name="唯美諾新款男士手包男包真皮大容量小羊皮手拿包信封包軟皮夾包潮"></product>
</div>
<script>
Vue.component('product', {
      props:['name'],
      template: '<div class="product" >{{name}}</div>'
    })
new Vue({
  el: '#div1'
})
</script>
           

自定義指令

<div id="div1">
    <div v-xart> 好好學習，天天向上 </div>
</div>
<script>
Vue.directive('xart', function (el) {
    el.innerHTML = el.innerHTML + ' ( x-art ) '
    el.style.color = 'pink'
})
 
new Vue({
  el: '#div1'
})
</script>
           

帶參指令

<div id="div1">
    <div v-xart="{color:'red',text:'best learning video'}"> 好好學習，天天向上 </div>
</div>
<script>
Vue.directive('xart', function (el,binding) {
    el.innerHTML = el.innerHTML + '( ' + binding.value.text + ' )'
    el.style.color = binding.value.color
})
new Vue({
  el: '#div1'
})
</script>
           

鈎子函數

<div id="div1">
    <div v-xart:hello.a.b="message"> </div>
</div>
<script>
Vue.directive('xart', {
      bind: function (el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML =
              'name: '       + s(binding.name) + '<br>' +
              'value: '      + s(binding.value) + '<br>' +
              'expression: ' + s(binding.expression) + '<br>' +
              'argument: '   + s(binding.arg) + '<br>' +
              'modifiers: '  + s(binding.modifiers) + '<br>' +
              'vnode keys: ' + Object.keys(vnode).join(', ')
      },
      update: function (newValue, oldValue) {
        // 值更新時的工作
        // 也會以初始值為參數調用一次
      },
      unbind: function () {
        // 清理工作
        // 例如，删除 bind() 添加的事件監聽器
      }
    })
new Vue({
  el: '#div1',
  data:{
      message:'hello vue.js'
  }
})
</script>
           

輸出結果

name: “xart”

value: “hello vue.js”

expression: “message”

argument: “hello”

modifiers: {“a”:true,“b”:true}

vnode keys: tag, data, children, text, elm, ns, context, fncontext, fnoptions, fnscopeid, key, componentoptions, componentinstance, parent, raw, isstatic, isrootinsert, iscomment, iscloned, isonce, asyncfactory, asyncmeta, isasyncplaceholder