Sunflower音樂播放器知識點（一）

起風了發表於2019-03-25
播放器

記錄下專案中遇到的問題

插槽Slot

簡單的瞭解就是插槽內可以放任意內容當你準備在元件之間放東西的時候可以用到插槽 例如

<div id="app">
    <child-component></child-component>

</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>
複製程式碼
<child-component>你好</child-component>
複製程式碼

我想在child-component的元件間放置一個你好結果會怎樣呢?

Sunflower音樂播放器知識點（一）

你好並沒有出來

我們現在給元件增加一個<slot></slot>插槽

我們在<child-component></child-component>內寫的"你好"起作用了！！！

Vue.component('child-component',{
        template:`
            <div>
            Hello,World!
            <slot></slot>
            </div>
        `
    })
複製程式碼

Sunflower音樂播放器知識點（一）

這只是很簡單的插槽，還有一種作用域插槽還不是很理解

encodeComponent

encodeURIComponent() 函式可把字串作為 URI 元件進行編碼。

subString

substring() 方法用於提取字串中介於兩個指定下標之間的字元。

例如

<script type="text/javascript">

var str="Hello world!"
document.write(str.substring(3,7))

</script>
複製程式碼

輸出

lo w
複製程式碼

第一個下標表示開始擷取的位置，第二個表示到哪裡擷取結束

object.assign()

object.assign()的理解.

split()

split() 方法用於把一個字串分割成字串陣列。

var str="How are you doing today?";
var n=str.split(" ");
複製程式碼

輸出

How,are,you,doing,today?
複製程式碼

join

join() 方法用於把陣列中的所有元素轉換一個字串。 元素是通過指定的分隔符進行分隔的。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
複製程式碼

輸出

Banana,Orange,Apple,Mango
複製程式碼

相關文章