时间戳

首页 > 技术文章 > Vue基础知识点1

Vue基础知识点1

yfife 2017-07-30 22:54 原文

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>

推荐阅读