VUE JS 學習

瓜瓜東西發表於2018-07-15
原文網址 : https://blog.csdn.net/cgwcgw_/article/details/81049811
VueJS

1 字串逆序對方法：

   這個是個小技巧，因為陣列有逆序方法，借用了一下陣列

   ‘abcde'.split('').reverse().join('')

2 線上編輯學習網站，線上程式設計

http://jsbin.com/joxinumota/edit?html,js,console,output

add library,需要google瀏覽器

3 新增了 Symbol原子型別，目前不知道用途。

4 vue 的slot 

  1 指定了slot才會在 父元件顯示

  2 可以指定具體姓名，app.component.name-'xxx'  對應父元件 <span slot='second'>

  3 可以指定作用域 就是例如 同一個button，下面兩個 slot，第一個slot 有單機事件，第二個沒有，則點前一半就觸發，後一個不觸發，感覺很雞肋的功能

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js wrapper component example (jquery plugin: select2)</title>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../dist/vue.min.js"></script>

    <style>
      html, body {
        font: 13px/18px sans-serif;
      }
      select {
        min-width: 300px;
      }
    </style>
  </head>
  <body>
  <div id="app">
    <children>
      <span slot="first" @click="tobeknow">12345</span>
      <span slot="second">56789</span>
      <!--上面這行不會顯示-->
    </children>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        tobeknow: function () {
          console.log("It is the parent's method");
        }
      },
      components: {
        children: {    //這個無返回值，不會繼續派發
          template: "<button><slot name='first'></slot>為了明確作用範圍，<slot name='second'></slot>所以使用button標籤</button>"
        }
      }
    });
  </script>
  </body>
</html>

   4 沒有內容分發到提示：就是 把各種情況都考慮到了，特殊情況，有用父類的填充，沒有就用子類的填充

     

<div id="app">  
    <children>  
        <span slot="first">【12345】</span>  
        <!--上面這行不會顯示-->  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    //這個無返回值，不會繼續派發  
                template: "<div><slot name='first'><button>【如果沒有內容則顯示我1】</button></slot>為了明確作用範圍，<slot name='last'><button>【如果沒有內容則顯示我2】</button></slot>所以使用button標籤</div>"  
            }  
        }  
    });  
</script>

5 vue支援es5以上，所以ie8以下不支援，vue 的計算屬性可以在 {{}} 中計算，也可以在computed屬性下加上屬性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue.js wrapper component example (jquery plugin: select2)</title>
  <!-- Delete ".min" for console warnings in development -->
  <script src="../../dist/vue.min.js"></script>

  <style>
    html, body {
      font: 13px/18px sans-serif;
    }
    select {
      min-width: 300px;
    }
  </style>
</head>
<body>
<div id="app">
  {{'mygood'.split('').reverse().join('')}},
  {{message}}},{{newmessage}}
</div>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      message:'mygood'
    },
    computed:{
      newmessage:function(){
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>
</body>
</html>

5 watch方法 經過測試 ，watch方法和 方法沒有關係，和 ，可能會自動呼叫方法，但是 監聽的主要是value，和方法用來計算使用

<div id = "computed_props">
  千米 : <input type = "text" v-model = "kilometers">
  米 : <input type = "text" v-model = "meters">
  fenmi: <input type="text" v-model="fenmi"/>
</div>
<p id="info"></p>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#computed_props',
    data: {
      kilometers : 0,
      meters:0,
      fenmi:0
    },

    watch : {
      kilometers:function(val) {
        this.kilometers = val;
        this.meters = val * 1000;
      },
      meters : function (val) {
        this.kilometers = val/ 1000;
        this.meters = val;
      },
      fenmi:function(a){
//        this.kilometers = a/ 1000/1000;
//        this.meters = a/1000;
      }
    }
  });
  // $watch 是一個例項方法
  vm.$watch('kilometers', function (newValue, oldValue) {
    // 這個回撥將在 vm.kilometers 改變後呼叫
    document.getElementById ("info").innerHTML = "修改前值為: " + oldValue + "，修改後值為: " + newValue;
  })
  vm.$watch('fenmi',function(a,b){
    document.getElementById ("info").innerHTML=a+":"+b;
  })

6 使用v-bind 繫結class

    <style>
        .class1{
            color:red;
        }
    </style>
    testclss:<input type="checkbox" v-model="class1"/>
    <div v-bind:class="{'class1':class1}">helllowrld</div>
    <div v-bind:class="{'class1': class1}">
        directiva v-bind:class
    </div>
	
	    new Vue({
        el: '#app',
        data: function() {
            return { 
                class1:false
            }
        }
    })

4 元件功能：分全域性和，區域性元件（定義在了具體 new Vue裡面）

全域性元件很特殊，必須用小寫，大寫有時顯示不出來

  <realcom></realcom>

  Vue.component('realcom',{
    template: '<h1 >世界你好</h1>'
  });

子模板特點：記得 在 components下的json資料裡template

    components:{
      'selfdef': {template:'<h5>goodlife</h5>'}
    },

5 同一個頁面可以使用多個vue，已測試通過

相關文章