vue

10.25

vue概括

vue特点

<div id="box">
  <!--使用插值语法-->
  {{message}}
</div>

mvc模式

/*
  * vue的特点
  * 易用，使用成本低
  * 灵活，生态系统完善，适合于任何规模的项目
  * 高效，优化好，体积小
  * */
  /*
  * 模式
  * MVC MVP MVVM
  * */
  /*
  * MVC （model view controller）
  *
  * MVP (model view presenter)
  *
  * MVVM (model view viewModel)
  * */


  //vue使用
  let box = new Vue({
    el:'#box',
    data:{
      message:'vue....'
    }

  })

  //mvc思想
  // m层
  //控制是否显示的
  let model = {isShow:true}

  //v层
  let boxDom = document.querySelector('#box');

  //c层
  //实际去执行的部分，包括修改后的重新显示
  function Controller() {
    //执行自身的init()方法
    this.init()
  }
  Controller.prototype = {
    init(){
      this.addEvent()
    },
    addEvent() {
      document.onclick = ()=>{
        model.isShow = !model.isShow
        //调用渲染视图方法
        this.render()
      }
    },
    render(){
      boxDom.innerHTML = 'mvc....'
    }
  }

  new Controller()