有关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>
