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的处理结果作为单个参数

缩写

  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>
    
posted @ 2017-07-30 22:54  YFIFE  阅读(144)  评论(0编辑  收藏  举报