Vue基础知识点1

MVC

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

MVC Model 2：在Web服务端时

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

MVP

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

MVVM

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

Vue 实例

构造器

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

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

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

 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

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

实例的生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程，实例需要配置数据观测、编译模板、挂载实例到DOM、然后在数据变化时更新DOM，在这个过程中实例会调用一些生命周期钩子，提供了执行自定义逻辑的机会
```
 var vm = new Vue({
 data: {
 a: 1
 },
 created: function() {
 // this 指向 vm 实例
 console.log("a is:" + this.a)
 }
 })
 // ->"a is: 1"
```
在实例的生命周期的不同阶段会调用不同的钩子，如mounted/updated/destroyed;钩子的this指向调用它的Vue实例

模板语法

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

插值

文本:使用Mustache语法
```
  <span>Message:{{ msg }}</span>
```

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

纯HTML：使用v-html指令
```
  <div v-html="rawHtml"></div>
```
属性：使用v-bind指令
```
  <div v-bind:id="dynamicId"></div>
```

若属性为布尔值，条件为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>
```
参数：在指令后以冒号指明

v-bind指令被用来响应地更新HTML属性
```
 <a v-bind:href="url"></a>
```
v-on指令用于监听DOM事件
```
 <a v-on:click="doSomething">
```

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

.prevent修饰符告诉v-on指令对于触发事件调用event.preventDefault()
```
 <form v-on:submit.prevent="onSubmit"></form>
```

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

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

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

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

缩写

v-bind缩写

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

v-on缩写

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

posted @ 2017-07-30 22:54 YFIFE 阅读(144) 评论(0) 编辑收藏举报

YFIFE