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的使用

 <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

vue.js的一些小語法v-for,v-text,v-html,v-on:click