初识Vue

最新推荐文章于 2024-06-20 15:20:10 发布

xy1677707153

最新推荐文章于 2024-06-20 15:20:10 发布

阅读量154

点赞数

分类专栏： Vue.js

原文链接：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

版权

Vue.js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

初识Vue.js（day1）

1.vue是渐进式JavaScript框架

当我们第一次通过script标签对引入vue.js时，我们就会有一个全局变量 Vue

Vue它是一个构造器函数

 Vue( options )
        this._init( options ) //在初始化执行vue，这里的this._init是私有的
         参数： options 我们称之为‘ 选项 ’
         类型： Object
var vm = new Vue( options ) // 实例化Vue得到vm实例

  var vm = new Vue({
    el: '#app',// document.querySelector('#app')
    data: {
      msg: 'hello Vue.js'
    }
  }) 
  //options / el ：叫自动挂载，将页面一个已经存在dom作为整个实例的作用范围，出了这个范围那么vm实例就没有作用了；body不能作为el的挂载目标 
  //options / data 数据 ：new类型中 data选项是一个对象； 使用形式： 在实例范围内，它相当于全局变量；我们要将这个变量放在一个模板语法中才能解析，这个语法叫做mustache语法，也叫 ‘双大括号语法’，即{{}}；使用范围： el确定的那个范围

**2.**打开谷歌在控制台可以看到vue控制台，点击root可以看到vm实例。通过new Vue中el选项确定的实例范围，这个dom结构我们叫它 ‘Root组件/根组件/根实例’

3.Vue是一个MVVM框架：

在上述代码中：

M表示data选项

V表示el挂载的内容

VM表示vm的实例

**那么何为MVVM呢？**解答：

MVVM与MVP相似，唯一的区别是它采用双向绑定。Vue中双向数据绑定式通过 v-model （具体操作为在一个dom元素中加入v-model=‘ ’）这个指令来实现的；反之也可以通过改变视图View中的数据来使vm实例的data发生改变。（不过由于vm实例数据有默认值，所以刷新网页之后还是默认值）

当我们将控制台中的vm的data数据改变时，视图View也会跟着改变，这个模式我们称之为： 数据驱动 （数据驱动视图改变）

Vue官方将这种模式称之为：深入响应式原理

使用原生js来实现Vue深入响应式：

<body>
  <button> 点击 </button>
  <div class="box"></div>
</body>

<script>
  // Vue 底层原理 
  // 目的： 使用原生js来实现Vue深入响应式 

  var box = document.querySelector('.box')

  var button = document.querySelector('button')

  var data = {
    name: 'Jick'
  }

  // 观察者对象

  var observer = {...data} 

  // es5提供的api方法,这个方法不兼容ie8以及以下
  // Object.defineProperty(对象，对象的属性，对象属性的修饰符 )

  Object.defineProperty(  data,'name',{
    // get/set  统称为: '存储器'
    get () {
      return  observer.name // 初始化赋值一个值给name属性
    },
    set ( val ) {
      console.log( val )
      box.innerHTML = val
    }
  })

  button.onclick = function () {
    data.name = "Rose"
  }

  box.innerHTML = data.name 

</script>