Vue学习笔记（一）

1.什么是Vue?

Vue是一套渐进式的框架，Vue被设计为可以自底层向上的应用，可以与第三方库或者既有项目整合。

2.声明式渲染？

Vue的核心是采用简洁的模板语法来声明式的将数据渲染进DOM系统。所有东西都是响应式的。一个Vue应用会将其挂载到一个DOM元素上（#app），我们不在直接和HTML交互了，HTML 是我们的入口，其余都会发生在新创建的Vue实例内部。

3.V- ？

带有v-表示Vue的指令，他们是Vue提供的特殊attribute，他们会在渲染DOM上应用特殊的响应式行为。
数据不仅可以绑定到DOM文本或者attribute，还可以绑定到DOM结构上（v-if：seen）。

4.Vue实例？

当你创建一个Vue实例时，你可以传入一个选项对象。我们学习的就是如何使用这些选项来创建我们想要的行为。完整的API文档

5.数据与方法？

当一个Vue实例被创建时，它将data对象中所有的property加入到Vue的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
阻止data对象的响应式行为有三种方式：
Object.freeze(data) => data.property: v-once => vm.destroy()

6.生命周期钩子？

Vue实例在被创建的时候会有一系列过程：数据初始化=》模板编译=》挂载到DOM=》渲染=》更新=》渲染=》销毁。在这个过程中，它同时会运行一些生命周期钩子函数，这给了我们在不同阶段添加自己代码的机会。

7.模板语法？

1.插值： 文本插值 {{ msg }} 、原始HTML： v-html
2.attribute： v-bind，v-on，v-if 指令
3.使用js表达式:
对于所有的数据绑定，我们可以使用js表达式，而不是简单的property值
4.动态参数：
5.修饰符：.prevent

8.计算属性和侦听器？

模板内的表达式非常便利，但我们一般只用简单的逻辑运算。对于复杂的逻辑运算，我们使用计算属性。

computed:{
                reverseMsg: function(){
                   // return this.msg.split('').reverse().join('')
                   return Date.now()
                },
                // fullName: function(){
                //     return this.firstName + this.secondName
                // }
                fullName: {
                    get: function(){
                        return this.firstName + this.secondName
                    },
                    set: function(newValue){
                        this.firstName = newValue.slice(0,1);
                        this.secondName = newValue.slice(1);
                    }
                }
            }

计算属性VS方法： 计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值；相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

9.侦听器？

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。