Vue基础知识点1

MVC

1. 视图(view):用户界面
2. 控制器(controller):业务逻辑
3. 模型(model)：数据保存
4. 通信方式：view-->controller-->model-->view 所有通信都是单向

MVC Model 2：在Web服务端时

1.服务端接收到来自客户端的请求，服务端通过路由规则把这个请求交由特定的controller进行处理，controller执行相应的业务逻辑，对数据库数据（model）进行操作，然后用数据去渲染特定的模板，返回给客户端

MVP

1. controller变为presenter
   2.通信方式：view-->presenter-->model/model-->presenter-->view 所有通信都是双向，view与model不发生联系
   3.view不部署任何业务逻辑，称为被动式图；所有逻辑部署在presenter

MVVM

1. presenter变成了viewmodel
2. ViewModel：视图的模型，包含了领域模型和视图的状态。在图形界面应用程序当中，界面所提供的信息可能不仅仅包含应用程序的领域模型，还可能包含一些领域模型不包含的视图状态。
3. 通信方式：view<-->viewmodel-->model/model-->viewmodel-->view
4. 采用双向绑定：view的变动，自动反映在viewmodel，反之亦然。
   5、在ViewModel当中会有一个叫Binder，或者是Data-binding engine 的东西，以前全部交于presenter负责的view和model之间的数据同步操作交由给Binder处理；MVVM把View和Model的同步逻辑自动化了，交由框架所提供的Binder进行负责

Vue 实例

• 构造器

1. 每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例

    var vm = new Vue({
    // 选项(可包含数据、模板、挂载元素、方法、生命周期钩子) 
    })
   

2. 用预定义选项创建可复用的组件构造器

    var Mycomponent = Vue.extend({
    // 扩展选项
    })
   

• 属性与方法 每个vue实例都会代理其data对象里所有的属性

    var data = {a: 1}
    var vm = new Vue({
    data: data
    })
    vm.a === data.a //->true
    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a //->2
    // ...反之亦然
    data.a = 3
    vm.a //-> 3
  

1. 注意：只有这些被代理的属性是响应的，也就是说值得任何改变都是触发视图的重新渲染；如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
2. 除了data属性，Vue实例暴露了一些有用的实例属性与方法；这些属性与方法都有前缀$,以便与代理的data属性区分

• 实例的生命周期

1. 每个Vue实例在被创建之前都要经过一系列的初始化过程，实例需要配置数据观测、编译模板、挂载实例到DOM、然后在数据变化时更新DOM，在这个过程中实例会调用一些生命周期钩子，提供了执行自定义逻辑的机会

    var vm = new Vue({
    data: {
    a: 1
    },
    created: function() {
    // this 指向 vm 实例
    console.log("a is:" + this.a)
    }
    })
    // ->"a is: 1"
   

2. 在实例的生命周期的不同阶段会调用不同的钩子，如mounted/updated/destroyed;钩子的this指向调用它的Vue实例

模板语法

• 允许开发者声明式地将DOM绑定至底层Vue实例的数据；在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。

插值

• 文本:使用Mustache语法

    <span>Message:{{ msg }}</span>
  

1. 绑定的数据对象上msg属性发生了改变，插值处的内容都会更新；使用v-once可执行一次性插值

• 纯HTML：使用v-html指令

    <div v-html="rawHtml"></div>
  

• 属性：使用v-bind指令

    <div v-bind:id="dynamicId"></div>
  

1. 若属性为布尔值，条件为false时，属性移除

    <button v-bind:disabled="isButtonDisabled">Button</button>
   

• 使用JavaScript表达式

    {{ number + 1 }}
    {{ ok ? 'yes' : 'no'}}
    {{ message.split('').reverse().join('') }}
  

Note:每个绑定只能包含单个表达式

	{{ var a = 1 }} //语句，不是表达式

指令

• 指令的职责就是当其表达式改变时相应地将某些行为应用到DOM上

    <p v-if="seen">Now you see me</p>
  

• 参数：在指令后以冒号指明

1. v-bind指令被用来响应地更新HTML属性

    <a v-bind:href="url"></a>
   

2. v-on指令用于监听DOM事件

    <a v-on:click="doSomething">
   

• 修饰符：以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

1. .prevent修饰符告诉v-on指令对于触发事件调用event.preventDefault()

    <form v-on:submit.prevent="onSubmit"></form>
   

过滤器：添加在JS表达式尾部，由管道符|指示

1. 过滤器可用在两个地方：mustache插值和v-bind表达式

    {{ message | capitalize }}
    <div v-bind:id="rawId | formId"></div>
   

2. 过滤器可以串联
   // filterA接受message作为单个参数；然后调用filterB，且将filterA的处理结果作为单个参数
   {{ message | filterA | filterB }}

缩写

1. v-bind缩写

    <a v-bind:href="url"></a>
    <a :href="url"></a>
   

2. v-on缩写

    <a v-on:click="doSometing"></a>
    <a @click="doSomething"></a>