有關(guān)vue的小小小小知識

1. 屬性

給圖片綁定屬性

new Vue({
                el: '#box',
                data: {
                    url: 'http://e.hiphotos.baidu.com/image/w%3D500/sign=f41ccdfef1f2b211e42e854efa816511/e61190ef76c6a7ef2a3f03abf7faaf51f3de6626.jpg'
                }
            })

<div id="box">
      <img src="{url}" alt="" />
</div>

在瀏覽器打開

圖片.png

圖片能出來但有404錯誤

用v-bind關(guān)聯(lián)屬性，改為

<div id="box2">
      <img :src="url" alt="" />
</div> 

在瀏覽器打開

圖片.png

沒有404錯誤

• <img src="{url}" alt="" />效果能出來，但是會報一個404錯誤
• <img :src="url" alt="" />效果可以出來，不會發(fā)404請求

2. 防止花括號閃爍

閃爍的原因：先加載html，再加載js
解決方法：

• v-cloak配合css （用于較大的段落）

<div v-cloak>{{msg}}</div>

<style>
　　[v-cloak]{
　　　　display:none;
　　}

</style>

• v-text

<div v-text="msg"></div>

• v-html (可以轉(zhuǎn)義輸出html)

<div v-html="msg"></div>