2021-04-16

MVVM框架

view：视图 DOM，viewmodel：通讯 观察者，Model：数据 js对象。

提供基础的架构抽象，通过AJAX数据持久化，不会造成整个页面刷新保证前端用户体验。

Vue.js

• 轻量级MVVM框架只有20kb

• 数据驱动+组件化前端开发

组件化

每个页面组件对应一个viewModel，生成的viewModel对应一个dom。

组件设计原则

页面上每个独立的可视/可交互区域视为一个组件；每个组件对应一个工程目录，组件需要的各种资源在这个目录下就近维护；组件可以嵌套自由组合形成完整的页面。

入门

Vue实例

数据与方法

• $watch(‘a’,function(newVal,oldValue)) //在a改变后记录a的新值和旧值
• Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来
• 模板语法要有根标签

模板语法

• 文本，原始HTML，Attibute，js表达式

指令

• 修饰符；v-bind和v-on的缩写

计算属性和侦听器

• 和方法相比，只有message的值发生改变时才使用计算属性，否则返回原来的值不需要重新计算

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

条件渲染

v-show和v-if，如果需要频繁的切换采用前者，如果只在初始化的时候进行判断，以后不怎么判断采用v-if

实践监听

• 使用$event获得原生的dom元素