vue知识点（一）

1、Vue.set 给响应式对象添加一个响应式的属性

Vue.set(this.food, 'count', 1);  //给food对象添加一个count属性，并赋值为1

2、Vue.filter 过滤器

filters: {
	formatDate(time) {
		let date = new Date(time);
		return formatDate(date, 'yyyy-MM-dd hh:mm');
	}
}

{{rating.rateTime | formatDate}}

3、jQuery.extend()语法知识点补充

jQuery.extend(object)：为jQuery添加一个静态方法

jQuery.extend({
	min: function(a, b) {
		return a < b ? a : b;
	},
	max: function(a, b) {
		return a > b ? a : b;
	}
})
jQuery.min(2,3); //2
jQuery.max(5,3); //5

如果jQuery.extend(obj1, obj2)，则是将obj2合并到obj1中

4、$.proxy知识点补充

描述：接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境。
jQuery.proxy(function, context)
function为执行函数，context为函数的上下文this值会被设置成这个object对象
例子：

function Page(){}

$.extend(Page.prototype, {
	init: function() {
		this.bindEvents();
	},
	bindEvents: function() {
		var btn = $('#btn');
		btn.on('click', $.proxy(this.handleBtnClick, this));
	},
	handleBtnClick: function() {
		alert(123);
	}
})

var page = new Page();
page.init();   //点击btn弹出123

5、创建全局组件Vue.component();

js:

Vue.component("TodoItem", {
	props: ['content'],
	template: "<li>{{content}}</li>"
})

html:

<todo-item :content="item" v-for="item in list"></todo-item>

在组件引用中通过v-bind将v-for循环出来的值借助content传递给todoitem组件（也就是:content=“item”），全局组件通过props属性获取到值，然后通过{{}}引用到模版中

6、创建局部组件

var TodoItem = {
    props: ['content'],
    template: '<li>{{content}}</li>'
}
//vue实例中
components: {
    TodoItem
},

7、父子组件传值

a、父组件向子组件传值通过v-bind绑定变量传递给子组件，子组件通过props接受父组件传过来的数据
b、子组件向父组件传值，子组件向外触发一个事件：

var TodoItem = {
	props: ['content','index'],
          template: "<li @click='handleItemClick'>{{content}}</li>",
          methods: {
              handleItemClick: function() {
                  this.$emit("delete", this.index);
              }
          }
}

然后在父组件中，在创建子组件的同时监听这个事件

<todo-item v-bind:content="item"
			v-bind:index="index" 
           v-for="(item, index) in list"
           @delete="handleItemDelete(index)">
</todo-item>

最后在父组件的methods中定义handleItemDelete方法(这里的参数index，是父组件在创建子组件时循环list数组得到的key值，通过v-bind绑定index传递给子组件，子组件通过props属性接收后，在使用$emit触发事件时，将index作为参数传递给父组件，父组件监听事件也可以监听到传过来的参数)

handleItemDelete: function(index) {
   // alert(index);
   this.list.splice(index, 1);
}

8、Vue的生命周期

beforeCreate: function() {
	console.log("beforeCreate");   //beforeCreate
	console.log(this.$el);         //undefined
	console.log(this.$data);       //undefined
},
created: function() {
	console.log("created");        //created
	console.log(this.$el);         //undefined
	console.log(this.$data);       //test: "hello world"
},
beforeMount: function() {
	console.log("beforeMount");   //beforeMount
	console.log(this.$el);        //<div id="app"></div>
	console.log(this.$data);      //test: "hello world"
},
mounted: function() {
	console.log("mounted");       //mounted
	console.log(this.$el);        //<div>hello world</div>
	console.log(this.$data);      //test: "hello world"
},

9、模板语法

其实就相当于

{{name}}

v-text和v-html的区别：

v-text不会对字符串中的html元素进行解析
v-html会对字符串中的html元素进行解析

10、计算属性、方法、侦听器

watch: {  
     /** 
      * watch和computed都有缓存的机制，对于所依赖的数据如果不发生改变，
      * 就不会重新计算。但是watch的代码相对于computed来说过于复杂
     */
   firstName: function() {
       return this.firstName + ' ' + lastName;
   },
   lastName: function() {
       return this.firstName + ' ' + lastName;
   }
 },
methods: {
    fullName: function(){
        /** 
        * 在app中使用fullName()也可以得到fullName,
        * 但是方法和计算属性最大的区别在于：计算属性如果所依赖的数据不发生改变，
        * 计算属性就会有缓存，不会重新计算
        * 而方法则没有这种机制，没有缓存，所以在相同的作用下建议使用计算属性，性能较高
        */
        console.log('计算了一次');
        return this.firstName + ' ' + this.lastName;
    }
},
computed: {
    fullName: function() {  
       /** 
       * 这里的fullName计算属性依赖了this.firstName和this.lastName，
       * 当这两个都没发生改变的时候，fullName是不会再次进行计算的，有一个缓存的功能
      */
        console.log('计算了一次');  
        return this.firstName + ' ' + this.lastName;
    }
}