1.Vue的目錄結構：
==============================================================================================================================
2.App.vue 入口文件
<template>
<div>
（1） v-for遍歷component
<componeta v-for="(value,key) in objList"></componeta> //循環遍歷compoeta組件 componenta是引用的組件 內容為 i am componenta
效果：
數據：
<!--導入組件-->
<script>
/* eslint-disable */
import Hello from './components/Hello'
import componeta from './components/a.vue' //導入component組件
export default {
components:{
componeta :componeta 在components中引用一下
},
------------------------------------------------------------------------------------------------------------------------------------------
（2） v-on:click的使用，動態動態綁定方法，可以簡寫為@click
<button v-on:click="addItem">addItem</button> //點擊Button按鈕，執行addItem方法， 控制台打印console.log(this.list)
addItem方法如下：
效果如下：
------------------------------------------------------------------------------------------------------------------------------------------------------
（3） v-text,v-html的使用
<p v-text="hello1"></p> v-text和v-html的區別，v-html可以將變量中的標簽去掉，而v-text不能，顯示的是字符串
<p v-html="hello1"></p>
{{ num + 1 }} 變量使用雙大括號，es6的語法
{{status ? 'success' : 'fail'}} 三目運算符
效果：
相應數據為：
------------------------------------------------------------------------------------------------------------------------------------------------
（4） v-for遍歷集合
<p v-for="item in list">{{item.name}} {{item.price}}</p> v-for用於遍歷集合，item為單個元素，item.nam為單個元素中的一個屬性
<ul>
<li v-for="(item,index) in list" v-text="item.name + '_'+ item.price+ '_'+index"></li> v-for遍歷集合時帶上index索引 使用v-text和{{}}輸出單個元素一樣，推薦{{}}}
</ul>
<ul>
<li v-for="(value,key) in objList">{{key}}-{{value}}</li> v-for遍歷對象屬性，(value,key) value放在前面，key放在后面
</ul>
</div>
效果：
數據：
</template>
-------------------------------------------------------------------------------------------------------------------------------------------------------
<!--導入組件-->
<script>
/* eslint-disable */
import Hello from './components/Hello'
import componeta from './components/a.vue'
export default {
components:{
componeta :componeta
},
data(){
return{
hello1: '<span>shuaishuai</span>',
num:1,
status: true,
list:[
{
name: 'apple',
price :34
},
{
name: 'apple',
price :34
}
],
objList:{
name:'apple',
price: 34,
color:'red',
weight:14
}
}
},
methods : {
addItem () {
console.log(this.list)
}
}
}
</script>
<!--樣式代碼-->
<style>
html {
height: 100%;
}
</style>
vue的相關網址：
http://cn.vuejs.org/ vuejs中文官網
vuejs源碼 https://github.cm/vuejs/vue
vuejs官方工具 https://github.com/vuejs
vuejs官方論壇 http://forum.vuejs.org