vue.js学习笔记(1)

　　　　　　　　　　　　　　　　　　检测对象

　　　　受ES5的显示，Vuejs不能检测到对象属性的添加或删除。因为Vuejs在初始化时候将属性转化为getter/setter，所以属性必须在data对象才能让Vuejs转换它，才能让它是响应的，例如：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
// `vm.a` 和 `data.a` 现在是响应的
 
vm.b = 2
// `vm.b` 不是响应的
 
data.b = 2
// `data.b` 不是响应的

　　　　不过，有办法在实例创建之后添加属性并且让它是响应的。对于Vue实例，可以使用$set(key,value)实例方法：

vm.$set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的

　　　　对于普通数据对象，可以使用全局方法Vue.set(object, key, value):

Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的

　　　　有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 添加属性。但是，添加到对象上的新属性不会触发更新。这时可以创建一个新的对象，包含原对象的属性和新的属性：

// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

　　　　相关demo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
      <form id="demo">
          <!-- text -->
          <p>
            <input type="text" v-model="name" v-on:focus="storeName" v-on:blur="checkName">
            姓名
          </p>
          <!-- checkbox -->
          <p>
          <input type="checkbox" v-model="checked">
            {{checked ? "yes" : "no"}}
          </p>
          <!-- radio buttons -->
          <p>
            <input type="radio" name="picked" value="one" v-model="picked">
            <input type="radio" name="picked" value="two" v-model="picked">
            {{picked}}
          </p>
          <!-- select -->
          <p>
              <select v-model="selected">
                <option>one</option>
                <option>two</option>
              </select>
              {{selected}}
          </p>
          <!-- multiple select -->
          <p>
              <select v-model="multiSelect" multiple>
                <option>one</option>
                <option>two</option>
                <option>three</option>
              </select>
              {{multiSelect}}
          </p>
          <p><pre>data: {{$data | json 2}}</pre></p>
      </form>
  </body>
  <script src="js/vue.js"></script>

<script>
    new Vue({
    el: '#demo',
    data: {
      name      : 'hi!',
      checked  : true,
      picked   : 'one',
      selected : 'two',
      oldName :'',
      multiSelect: ['one','three']
    },
    methods:{
      storeName : function(){
        this.oldName=this.name;
        this.isClick=true;
      },
      checkName : function(){
        var newName=this.name.replace(/(^s*)|(s*$)/g,'');
        console.log('this.name:  '+this.name);
        console.log('this.oldName:  '+this.oldName);
        console.log('newName:  '+newName);
      }
    }
  })
</script>
</html>

　　　　该demo的结果：

参考资源：https://segmentfault.com/a/1190000005832164#articleHeader0