Vue2.0学习笔记（基础篇）

在页面初次加载时，会触发"create"和"mount"生命周期钩子：

在控制台中修改data中的值，以及调用$destroy()方法，分别会触发"update"和"destroy"生命周期钩子:

另外值得一提的是，官网中的说法叫每个 Vue 实例都会代理其 data 对象里所有的属性，通俗点说就是data对象是引用类型，其值是该对象的地址，因此可以看到vmData.data中的值变了的话，vm.data的值也会跟着变，同样的道理，vm.data变了也会引起vmData.data的变化。
但是如上面代码所示,在vmData赋值给vue实例之后，再给vmData增加的属性，并不会被vue实例所引用。
也就是vmData.b在vue实例中是不存在的。

最后再使用vm.$destroy()方法，这样会触发"destroy"生命周期钩子
$destroy()方法官方说法叫：Teardown wathcers,child components and event listeners
就是拆卸监控，也就是解除双向绑定，值的变化不会再引起dom的变化。

和knockout.js非常类似（所以说vue.js确实是站在巨人的肩膀上，吸收了knockout,angular,react的各家所长)，vue也有计算属性：computed。
如以下代码所示：

var vm3 = new Vue({
    el:"#vm3",
    data:{
 firstName:"liu",
 lastName:"zhuang"
    },
    methods:{
 getFullName:function(){
     console.log("method exec")
     return this.firstName + " " + this.lastName ;
 }
    },
    computed:{
 fullName:{
     get:function(){
  return this.firstName + " " + this.lastName;
     },
     set:function(newVal){
  var names = newVal.split(" ");
  this.firstName = names[0];
  this.lastName = names[names.length-1];
     }
 }
    },
    watch:{
 firstName:function(oldval,newVal){
     console.log("wath exec")
     alert("firstName has changed");
 }
    }
});

    {{fullName}}
    

    {{getFullName()}}

computed:{
    fullName:function(){
    return this.firstName + " " + this.lastName;
}
}

var vmQuestion = new Vue({
    el:"#Question",
    data:{
 question:"",
 answer:"I cannot give you an answer until you ask a question!",
 url:"https://yesno.wtf/assets/no/8-5e08abbe5aacd2cf531948145b787e9a.gif"
    },
    methods:{
 getAnswer:_.debounce(function(){
     var vm = this;
     if(vm.question.indexOf("?") === -1){
  vm.answer = "Question usually contain a question mark :-)";
  return false;
     }
     vm.answer = "think...";
     axios.get('https://yesno.wtf/api')
     .then(function(ret){
  vm.answer = ret.data.answer;
  vm.url = ret.data.image;
     })
     .catch(function(err){
  vm.answer = "Error! " + err;
     })
 },500)
    },
    watch:{
 question:function(newVal,oldVal){
     this.answer = "Waiting for you to stop typing...";
     this.getAnswer();
 }
    }
});

    

 Ask a yes/no question:
   
    
    
{{answer}}
    

var vmCss = new Vue({
    el:"#divCss",
    data:{
 isActive:true,
 msg:"this is a css/style demo",
 cssClass:{
     active:false
 },
 activeCss:"active",
 selectCss:"selected"
 },
    methods:{},
    watch:{},
    computed:{
 cssComputed:function(){
     return {
  active:this.isActive
     }
 }
    }
});

    {{msg}}

computed:{
    cssArray:function(){
 return [this.activeCss,this.selectCss];
    }
}

styleObj:{
    color:"yellow",
    "font-size":'40px'
}

    {{msg}}

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)

example1.items.splice(newLength)

vm.items[indexOfItem].id = newId;

click
这个按钮被点击了{{cnt}}次

    
 warn
    

var vmOn = new Vue(
{
    el:"#divOn",
    data:{
 cnt:0,
 name:"xueyy"
    },
    methods:{
 greet:function(event){
     alert("hello " + this.name);
     console.log(event);
 },
 warn:function(msg){
     alert(msg);
 }
    }
}
);

Submit

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

var vmModel = new Vue({
    el:"#divModel",
    data:{
 message:"",
 cbChecked:false,
 cbNames:[],
 rbChecked:"",
 selectItem:[],
 optionItems:[
 {id:1,name:'薛芸莹',age:'18'},
 {id:2,name:'耶包',age:'16'},
 {id:3,name:'呆包',age:'19'},
 ],
 choiseItem:[],
 cbVal:"b",
 cbValA:"a",
 cbValB:"b",
 rbVal:"",
 rbValY:"c",
 rbValN:"d",
 choiseObj:[]
    },
    methods:{
 getNames:function(){
     return this.cbNames.toString();
 },
 warn:function(){
     alert("click!");
 }
    }
});

    
  123