Vue小知识

有关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关联属性，改为

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

在浏览器打开

图片.png

没有404错误

• <img src="{url}" alt="" />效果能出来，但是会报一个404错误
• <img :src="url" alt="" />效果可以出来，不会发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 (可以转义输出html)

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