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)
  下一篇：事件处理、表单绑定、组件