什么是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:'
avatarUrl: '
},
{
blogName:'麋鹿鲁哟',
blogUrl:',
avatarUrl: ,
blogSign: '大道至简，知易行难。'
},
]
}
})
</myscript>遇到的问题
- 怎么存储数据？
Vue采取的是json格式的数据存储方式：
friends: [
{
blogName:'YJLAugus',
blogUrl:',
avatarUrl: ',
blogSign: '尽长安'
},
{
blogName:'麋鹿鲁哟',
blogUrl:'
avatarUrl:
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 是数据中的名字
实践成果
经过一番折腾，终于实现了前面所说的要求。点此查看。
值得注意的时，在打开界面时，会有一定的延时，看得到还没解析成功的那些字符，不过这不影响使用。
未经作者授权，禁止转载
THE END
