Vue知识点集（一）

1、构造函数
通过使用构造函数创建根Vue实例来引导每个Vue.js应用程序
var vm = new Vue（{
  //选项
}）
  Vue实例本质上是MVVM模式中定义的ViewModel，因此您将在整个文档中看到变量名称vm。实例化Vue实例时，需要传入一个options对象，该对象可以包含数据，模板，要挂载的元素，方法，生命周期回调等选项。

 该Vue构造可被扩展来创建可重用部件的构造与预先定义的选项：
var A = Vue.extend（{
  //扩展选项
}）
//创建了“A”的所有实例
//预定义的扩展选项
var a = new A（）

虽然我们可以强制创建扩展实例，但在大多数情况下，我们都是将注册组件构造函数作为自定义元素，并以声明方式在模板中组合它们。由此我们可以知道所有Vue.js组件本质上都是扩展的Vue实例。

 

2、

属性与方法
data属性
  是Vue实例的数据对象，可以绑定的是对象或者是函数。
  当数据对象一旦被data绑定就会发生变化，数据对象中的属性会拥有get和set属性，用来监听数据变化，实时响应
  Vue实例会代理data绑定对象上的所有属性，即所有属性直接添加到Vue实例化对象中
  Vue实例是通过new Vue()创建的，{{ }}是Vue进行插值的语法
  举个例子：
<script>
        obj={
            msg:"hello Vue";
        };
        var app=new Vue({
            el:'#app',
            data:obj
        })
    </script>
data属性绑定的数据对象obj中的属性msg直接添加到了Vue实例化对象中，并且拥有了get和set属性；

除了数据属性之外，Vue实例还公开了许多有用的实例属性和方法。这些属性和方法的前缀是与$代理数据属性区分开来。
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $ watch是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // /当`vm.a`改变时，将调用此回调
})

Vue实例可以通过$data属性访问原始数据对象

 

3、实例生命周期
每个Vue实例在创建时都会经历一系列初始化步骤 - 例如，它需要设置数据观察，编译模板并创建必要的数据绑定。在此过程中，它还将调用一些生命周期钩子，这使我们有机会执行自定义逻辑。例如，在created创建实例后调用钩子：
var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向vm实例
    console.log('a is: ' + this.a)
  }
})// -> "a is: 1"
还有其他钩子将在实例的生命周期的不同阶段被调用，例如compiled，ready和destroyed。调用所有生命周期钩子，其this上下文指向调用它的Vue实例。

 

4、数据绑定语法
（1）最基本的数据绑定形式是使用双花括号"Mustache"语法的文本插值：
< span >message：{{msg}} </ span >
mustache标记将替换msg为相应数据对象上的属性值。每当数据对象的msg属性发生更改时，它也会更新。
还可以执行不会更新数据更改的一次性插值：

< span >这永远不会改变：{{* msg}} </ span >

（2）放在胡须标签中的表达式称为绑定表达式，在Vue.js中，绑定表达式由单个JavaScript表达式组成，后跟一个或多个过滤器
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

只能包含一个单一的表达，所以下面这两个例子无效：
<！ - 这是一个声明，而不是表达式： - >
{{var a = 1}}
<！ - 流控制也不起作用，使用三元表达式 - >
{{if（ok）{return message}}}

（3）Vue.js允许可选的“过滤器”附加到表达式的末尾,用“|”链接表示：
{{message|capitalize }}//内置过滤器capitalize ，这是一个返回大写值的JavaScript函数
{{ message | filterA | filterB }}  
{{ message | filterA 'arg1' arg2 }} //允许过滤器带参数,filterA 函数接收表达式的值作为第一个参数

 

5、指令
指令是带v-前缀的特殊属性。指令属性值应该是绑定表达式
<p v-if="greeting">Hello!</p>
//v-if指令将<p>根据表达式值的true or false删除/插入元素greeting

(1)某些指令可以采用“参数”，在指令名称后用冒号表示
eg1:<a v-bind:href="url"></a>
这href是参数，它告诉v-bind指令将元素的href属性绑定到表达式的值url,与使用href="{{url}}"属性插值实现了相同的结果（请注意，Vue.js指令和特殊属性中不允许使用属性插值）.事实上，属性插值在v-bind内部被转换为绑定。
eg2:<a v-on:click="doSomething">
v-on指令，它监听DOM事件名称

（2）修饰符是由点表示的特殊后缀，表示指令应以某种特殊方式绑定
举个例子： .literal修饰符告诉指令将其属性值解释为文字字符串而不是表达式
<a v-bind:href.literal="/a/b/c"></a>

（3）速记
给v-bind起了个更容易认识与编写的“绰号”为  ：（冒号）
v-on标识为 @