vue初级了解

旧城等待， 2021-10-01 08:00 322阅读 0赞

**1.mustache语法**  
当我们第一次通过script标签对引入vue.js时，我们就会有一个全局变量 Vue  
Vue它是一个构造器函数

Vue( options )
        this._init( options ) //在初始化执行vue
    
        参数： options 我们称之为‘ 选项 ’
          类型： Object
    
    
        options / el 
          我们称之为自动挂载： 将页面一个已经存在dom作为整个实例的作用范围，出了这个范围那么vm实例就没有作用了
          body不能作为el的挂载目标
    
        options / data 数据
          new类型中 data选项是一个对象
          使用形式： 在实例范围内，它相当于全局变量 
                    我们要将这个变量放在一个模板语法中才能解析，这个语法叫做mustache语法，也叫 ‘双大括号语法’
          使用范围： el确定的那个范围
    
    
    Vue是一个MVVM框架
      M: data选项
      V：el挂载的东西
      VM： vm实例

\{ \{ msg \}\}

var vm = new Vue(\{ el: '\#app',// document.querySelector('\#app') data: \{ msg: 'hello Vue.js' \} \}) // 实例化Vue的到vm实例

**2.深入响应式原理**

1.  通过new Vue中el选项确定的实例范围，这个dom结构我们叫它 ‘Root组件/根组件/根实例’
2.  Vue中双向数据绑定式通过 v-model 这个指令来实现的
3.  当我们将vm中的data改变时，会发现视图也跟着改变了，这个模式我们称之为： 数据驱动  
    数据驱动： 数据驱动视图改变  
    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