Vue-1(綁定、渲染)

vue是js的一個漸進式框架，在小編個人理解上來看，他更加方便的給我們提供了構造響應式佈局的工具，那麼小編這邊主要是總結一下vue的基礎語法，以及一些小的demo

• 創建實例

   let vue = new vue({
    el:'類似於選擇器，與CSS格式相同去選中DOM元素',
    data: {
        name:'司塵',
        hooby:[football,travel],
        arrobject: [
            { id:1, title:1},
            { id:2, title:2},
            { id:3, title:3}
        ]
     // vue對象的所用數據
    } 
    ......
   })
  

  vue對象在js中可以更改以及查看，但不能通過對象外部去給對象添加屬性以及方法。
• 模板語法

  <!-- 引入變量(通過雙大括號在DOM元素中插入) -->
  <div>{{ message }}</div>
  <!-- 引入真正的HTML代碼而非文本 -->
  <div v-html:'對象(文本爲HTML代碼)'></div>
  

• class綁定
  我們這樣來想v-bind作用域實際標籤內嵌屬性連接vue變量。

  <!-- 第一種形式，對應類名冒號後是true or false變量判斷類名生效 -->
  <div
      class="static"
      v-bind:class="{ active: isActive, 'text-danger': hasError }"
  ></div>
  <!-- 第二種形式數組對象 -->
  <div
  v-bind: class="[{firstClass: isActive}, secondClass]" 
  ></div>
  <!-- vue對象中 -->
   data: {
       isActive: true,
   	 hasError: false,
   	 firstClass:'firstClassName', 
   	 secondClass:'secondClassName'
   }
  

• style綁定
  同樣是通過v-bind實現

  <!-- 內聯式直接寫入 -->
  <div v-bind: style="{color: red, fontSize: fontsize + 'px'}"></div>
  <!-- vue數據對象包裹 -->
  <div v-bind: style="cssStyleObject"></div>
  data: {
      cssStyleObject: {
          backgroundColor: 'red',
          fontSize: '10px',
          width:'10px',
          height:'10px'
      }
  }
  

• 條件渲染
  v-if實現，通過變量true or false值對DOM元素做一個渲染判斷

  <div v-if="show">顯示</div>
  <div v-else="anothershow">顯示其他</div>
  <!-- vue對象裏面數據 -->
  data:{
      show: true,
      another: false
  }
  

  v-show
  作用效果相同
  一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非 常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
• 列表渲染
  v-for實現列表渲染

     <ul>
         <li v-for="post in posts">
             {{ post.message }}
         </li>
     </ul>
     data:{
         posts:[
             { message: 'a' }
             { message: 'b' }
         ]
     }
  

  當循環數組時可以多參數第二個參數爲數組索引值：
  <li v-for="(post, index) in posts"> {{ post.message }} </li>
  同理當我們循環對象時有三個參數
  (對象值，對象鍵值，對象索引位置)
  當我們去修改vue對象之中的數組、對象中的元素時，不能直接定義去修改，要用數組方法才能實現響應。

  var vm = new Vue({
      data: {
          userProfile: {
              name: 'Anika'
          }
       }
  })
  

  同樣的當我們需要去添加對象元素時採用set方法
  例：Vue.set(vm.userProfile, 'age', 27)
  下一篇：事件處理、表單綁定、組件