VUE概念理解

							VUE概念理解 一

1. 引入Vue.js
2. 创建Vue对象
   el : 指定根element(选择器)
   data : 初始化数据(页面可以访问)

模板页面：html + js
js以什么形式（语法）存在：
1、 指令：是vue自定义的标签属性 例子：v-model 后面的值是调参数 是vue的语法前面代v
2、 插值语法: 动态显示数据，例子：{{msg}}
指令和差值中的表达式自动从data中动态提取数据，下面js中vue的实例对象为她提供数据

<div id="test">
  <input type="text" v-model='msg'>
  <!--
  插值只能写在标签体文本里 <p>Hello {{msg}}</p>， {{msg}}是一个js表达式
-->
  <p>Hello {{msg}}</p>
</div>

```javascript
<script src="../js/vue.js"></script>
  <script>
    这是Vue的实例化对象，实参也是一个对象
   new Vue({  //配置对象：属性名是一些特定的名称
   ei是选择器 element 的意思 是用来查找根元素的 就是查找祖先元素 '#test是查找的元素名称 ，（div里id名称）
   以这个名称下定了一个模板页面（区域），如果元素超出范围那么就不在起作用
    el:'#test',
     data:{
     包含多个可变数据的对象，相当于state，为模板页面提供数据
       msg:'这个是测试'
     }})

**

vue的mvvm：

**
m
Model ：模型{就是对象} 就是上面的data 为模板提供数据 它的vuevm的实例 vuevm是构造函数 只要改变Model数据 页面就会更新
v
view : 就是页面（也就模板）
*vm
viewModel ：页面模型 也叫vm
1、DOM Listeners：DOM监听 可以绑定各种事件监听 主要靠 v-model 例如：上面案例页面的输入框 输入的内容发生改变，它就会自动将数据传给Model ， 然后Model 在传给页面/
2、Data Bindings：数据绑定 ，看下面箭头 数据从Model 流向视图view 主要是靠vm
这种方式叫做双向绑定