vue二数据绑定和mvvm

数据绑定

单向数据绑定

语法：v-bind:href =“xxx” 或简写为 :href =“xxx”
特点：数据只能从 data 流向页面
若绑定的是value 可以简写为 :value=‘’

双向数据绑定

指令 v-model
语法：v-mode:value=“xxx” 可以简写为v-model=‘’
特点：数据不仅能从 data 流向页面，还能从页面流向 data
只能用在有value值的 表单类元素 如input 单选 多选
————————————————

关于el和data的两种写法

2.1 el

指定根element(选择器)

el有2种写法
(1) new Vue时候配置el属性。

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

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

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

2.2 data

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

1. 对象形式 data:{}
2. 函数形式

        data() {
              return{
                  name:'aaa';
              }
          }

这时候的this是Vue实例对象 不能用箭头函数 this就是window

理解Vue的MVVM实现

M
模型(Model) ：data中的数据

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

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

Dom Listeners （Dom 监听）从页面到data

Data Bindings （数据绑定）从data到 页面

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

2. vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
   View层：
   ①视图层
   ②在前端开发中就是DOM层
   ③主要作用是给用户展示各种信息
   Model层：
   ①数据层
   ②数据可能是固定的死数据，更多是来自于服务器，从网络上请求下来的数据。
   ViewModel层：
   ①视图模型层
   ②视图模型层是View和Model沟通的桥梁
   ③一方面它实现了Data Bindings来进行数据的绑定，将Model的改变实时反映到View中
   ④另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击，滚动，touch）时，可以监听到，并在需要的情况下改变对应的Data。
   在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。