什么是Vue?
接触前端时，一直在想，网页中那么多数据，怎么一次性渲染到页面中？通过js可以实现，但是比较繁琐，需要组合字符串，很麻烦。还有更好的办法吗？
直到我遇见了Vue……
首次接触到Vue，进了官网，看到官方介绍视频我就已经跃跃欲试了，真的非常方便！
总的来说，Vue可以把网页中的各种数据集中到一起，用数组的方式调用，并且还支持循环这样的方式调用（当然，目前我还是小白，更高级的功能需要进一步探索）。
上手实战
正好我的博客需要写一个能够快速添加博客友链的功能，希望能够做到，当有新的友链要新增时，只需要维护基础数据即可，而不再像以前一样，又重新写html各种div。
源码展示
<div id="app">
<div id="friedsGroup">
<div class="friends" v-for="friend in friends">
<div class="friendCard">
<a :href="friend.blogUrl" target="_blank" class="item">
<img :src="friend.avatarUrl" alt="" />
<div class="info">
<p class="name">{{friend.blogName}}</p>
<p class="sign">{{friend.blogSign}}</p>
</div>
</a>
</div>
</div></div>
</div><myscript>
new Vue({
el: '#app',
data: {
friends: [
{
blogName:'YJLAugus',
blogUrl:'https://www.cnblogs.com/yjlaugus/',
avatarUrl: 'https://img.zhankr.net/fmhx2t4uarr37114.png',
blogSign: '尽长安'
},
{
blogName:'麋鹿鲁哟',
blogUrl:'https://www.cnblogs.com/miluluyo/',
avatarUrl: 'https://img.zhankr.net/5h1me1fhn3n37115.png',
blogSign: '大道至简，知易行难。'
},
]
}
})
</myscript>
遇到的问题
- 怎么存储数据？
Vue采取的是json格式的数据存储方式：
friends: [
{
blogName:'YJLAugus',
blogUrl:'https://www.cnblogs.com/yjlaugus/',
avatarUrl: 'https://img.zhankr.net/fmhx2t4uarr37114.png',
blogSign: '尽长安'
},
{
blogName:'麋鹿鲁哟',
blogUrl:'https://www.cnblogs.com/miluluyo/',
avatarUrl: 'https://img.zhankr.net/5h1me1fhn3n37115.png',
blogSign: '大道至简，知易行难。'
},
]
- 在哪调用？
首先要告诉Vue要在哪里解析，一般用下面的格式包裹需要运行Vue的html，然后在script中创建Vue实例。
<div id="app">......</div>
<script>
new Vue({
el: '#app',
data: { ... }
</script>
这里因为要在博客正文里运行脚本，而博客园是不能运行的（因为script标签会被解析没了），我们采取了改标签的方式，用代码执行其中的内容。
<!-- 在文章内运行代码 -->
<script>
$(function() {
$('myscript').each(function() {
$(this).css('display','none');
eval($(this).text());
});
});
</script>
- 怎么调用？
数据调用一般采用json格式，用两对花括号{{}}包裹起来，放到调用的位置(一般是div内部的文字内容)：
{{friend.blogName}}
这里遇到了一个小插曲，含有网页链接的位置，像上面那样调用，会失败。查资料后，没太看懂，大概意思就是解析成了本网站内部的资源链接（网址为前缀为网站网址）。修改后的资源调用方式：
:href="friend.blogUrl"
在前面加一个 : ，然后调用的数据不用花括号包裹。
- 怎么循环调用?
循环调用时，只需要在循环的父div标签里添加下面的内容：
v-for="friend in friends"
其中前面的friend 是自己定义的临时变量，in 相当于循环语法，friends 是数据中的名字
实践成果
经过一番折腾，终于实现了前面所说的要求。点此查看。
值得注意的时，在打开界面时，会有一定的延时，看得到还没解析成功的那些字符，不过这不影响使用。
