初入Vue

2018-02-26

刚开始接触vue，遇到一个不知道什么问题的问题，百度有人说是js的引入顺序问题，但是我是我引入顺序是正确的，还是没有得到答案。
接下来说说问题：

<script src="../vueBasic/vue.min.js"></script>

<body id="example">
	<ul >
		<li v-for="item in items"> {{item.name}} </li>
	</ul>
</body>
<script>
var demo = new Vue({
  el: '#example',
  data: {
    items: [
    	{
    		name:'kuaiche',
    		tag:1
    	},
    	{
    		name:'chuzuche',
    		tag:3
    	},																	
    	{
    		name:'shunfengche',
    		tag:2
    	},
    	{
    		name:'zhuangche',
    		tag:0
    	}
    ]
  }
})
</script>

这是所有的代码，运行的时候会发现出现的结果并不是期待的列表顺序结果而是如图所示：

学习vue遇到的第一个坑，目前找到的解决办法是在ul标签外面加一层div，并且设置id即可正常显示，但是现在我不知道为什么。等后面知道了原理再来解释。

修改后的html代码：

<body>
	<div id="example">
		<ul >
			<li v-for="item in items"> {{item.name}} </li>
		</ul>
	</div>
</body>