Vue2的特性与简介

Vue

Vue特性

数据驱动视图

数据的变化会驱动视图的自动更新

双向数据绑定

js数据的变化会自动渲染到页面上

页面上表单采集的数据发生变化也会更新到js数据中

MVVM

MVVM是vue实现的核心原理

Model表示当前页面渲染时所依赖的数据源（M）

View表示当前页面渲染的DOM结构（V）

ViewModel表示Vue的实例，是MVVM的核心（VM）

Vue实例

<div id="app">
  {{ message }}
</div>

var app = new Vue({
// option api
  el: '#app',
  // template:'<div> hi vue </div>'  渲染的模板内容 会替换掉挂载元素的内容
  data: {
    message: 'Hello Vue!'
  }
})

this

在option api上通过this即可访问Vue实例对象

$mount()

$mount(‘选择器’)与el相同，都是挂载元素

var app = new Vue({
  data: {
    message: 'Hello Vue!'
  }
}).$mount('#app')

$el

组件渲染的时候的 根节点对象

$data

得到组件的data设置的内容

$parent

获得当前组件的父组件（Vue3中已被废弃）

$children

获得当前组件的子组件 获得一个数组（Vue3中已被废弃）

$root

获得当前组件的根组件

$attrs

可以读取所有除了在props当中声明的自定属性以外传递的 自定义属性的值

$emit

用于触发绑定的自定义事件

实例作用范围

vue会管理el选项命中元素及其内部的后代元素

el挂载可以使用css选择器，但是不能挂载html和body上