Vue基础系列（二）

2.1 el

指定根element(选择器)

2.2 data

初始化数据(页面可以访问)

关于el和data的两种写法

el有2种写法

(1) new Vue时候配置el属性。

const v = new Vue({
    el:'#root', //第一种写法
    data:{
        name:'YK菌'
    }
})

(2) 先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。

const v = new Vue({
    data:{
        name:'YK菌'
    }
})
v.$mount('#root') //第二种写法 */

data有2种写法

(1) 对象式

data:{
    name:'YK菌'
} 

(2) 函数式

data(){
    console.log('@@@',this) //此处的this是Vue实例对象
    return{
        name:'YK菌'
    }
}

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

3. 双向数据绑定 : v-model & 显示数据 : {{xxx}} 插值语法

例子

<div id="test"> <!--view-->
  <input type="text" v-model="msg"><br><!--指令-->
  <p>Hello {{msg}}</p><!--大括号表达式-->
</div>

<script src="../js/vue.js"></script>
<script>
  const vm = new Vue({ // 配置对象 options 
    // 配置选项(option)
    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
    data: { // 数据（model）
      msg: 'World'
    }
  })
</script>

4. 理解Vue的MVVM实现

M

模型(Model) ：data中的数据

V

视图(View) ：模板代码（不是静态页面） （两个语法：指令，大括号表达式）

VM

viewModel: 视图模型（Vue的实例）

Dom Listeners （Dom 监听）

Data Bindings （数据绑定）

data中所有的属性，最后都出现在了vm身上。

vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

MVVM

MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。

模型model指的是后端传递的数据，视图view指的是所看到的页面。

视图模型viewModel是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：

将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定

将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听

这两个方向都实现的，我们称之为数据的双向绑定