第一次使用Vue

什么是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://pic.cnblogs.com/avatar/1176586/20190523174806.png',
			blogSign: '尽长安'
		},
		{
			blogName:'麋鹿鲁哟',
			blogUrl:'https://www.cnblogs.com/miluluyo/',
			avatarUrl: 'https://pic.cnblogs.com/avatar/1273193/20190806180831.png',
			blogSign: '大道至简，知易行难。'
		},
	]
  }
})
</myscript>

遇到的问题

• 怎么存储数据？

Vue采取的是json格式的数据存储方式：

    friends: [
		{
			blogName:'YJLAugus',
			blogUrl:'https://www.cnblogs.com/yjlaugus/',
			avatarUrl: 'https://pic.cnblogs.com/avatar/1176586/20190523174806.png',
			blogSign: '尽长安'
		},
		{
			blogName:'麋鹿鲁哟',
			blogUrl:'https://www.cnblogs.com/miluluyo/',
			avatarUrl: 'https://pic.cnblogs.com/avatar/1273193/20190806180831.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 是数据中的名字

实践成果

经过一番折腾，终于实现了前面所说的要求。点此查看。

值得注意的时，在打开界面时，会有一定的延时，看得到还没解析成功的那些字符，不过这不影响使用。