vue的成长之路一

最新推荐文章于 2023-07-20 08:22:57 发布

你是谁-

最新推荐文章于 2023-07-20 08:22:57 发布

阅读量357

点赞数

分类专栏： vue 文章标签： vue mvvm

本文链接：https://blog.csdn.net/u013379933/article/details/77905959

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

MVC和MVVM：

建议去看阮一峰老师的文章：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

●MVC：

M：模型（Model）：数据保存

V：视图（View）：用户界面

C：控制器（Controller）：业务逻辑

1、View 传送指令到Controller

2、Controller 完成业务逻辑后，要求Model 改变状态

3、Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

Controller控制器的业务逻辑改变了，model里的数据就会改变，View视图就会改变；或者View的数据如果变了（如表单填写），那么controller就要改变，model数据也就跟着改变，View最后才会改变

●MVVM

M：模型，机器可读性强的数据，例如：数组，对象等

V：视图，人眼可读性强的数据，如下拉框，弹层等

VM：视图模型，双向绑定，将模型中的数据与视图中的数据绑定在一起

●Vue中的MVVM架构

V：视图就是前端中的DOM对象

M：模型就是前端中的数据

VM：视图模型就是一些事件的监听和数据的绑定。View视图通过dom的监听告诉model数据，model数据通过指令改变view视图。比如View的变动，自动反映在 ViewModel，从而使model改变。我们只需提供view视图和model模型，双向绑定由VM视图模型自动实现

在vue中模型层(model)只是普通 JavaScript对象，修改它则更新视图(view)。

●Vue的实例化

在Vue中，通过Vue类来创建一个vue实例化对象，这个对象就相当于一个VM对象。

通过设置el属性来绑定一个view视图容器；如果在这个视图容器<div id=’app’>外，使用data属性里的数据就会报错。

通过设置data属性来绑定model模型数据;

<body>
<div id="app">{{msg}}</div>
<script>

var app =newVue({
//绑定视图 el:表示绑定到哪个元素上
el:"#app",
//绑定数据 data是一个对象，里面可以有很多的数据，再通过{{}}或者指令就能在视图上显示
data:{
msg:"第一个vue的demo"
}
})

注意，不要在实例属性（就是console.log(vm)所看到的vm实例所包含的属性）或者回调函数中（如vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父级上下文，所以 this 不会像预想的一样是 Vue 实例

得到的vue实例化对象中：

1、$el属性：表示视图容器元素；如这里的<div id=’app’>

2、而定义的data属性中的每个属性会添加到vue实例化对象中。，所以可通过vm.msg得到msg属性，或者通过$data就能得到data属性，再$data.msg就能得到msg的值了

●el属性—选择器

●这里说的选择器是指：new Vue({ el:”#app” })中el属性绑定的dom对象，这个el属性的值就是选择器或者html元素的实例（一般都用选择器）。

●元素可以用 vm.$el 访问。如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

Vue支持常见的选择器：

1、元素选择器：div{ 样式 }

2、类选择器：.my_div{ 样式 }

3、id选择器：#my_div{ 样式 }

如果页面中匹配到多个元素，只会处理第一个元素，后面的元素会忽略，所以要注意：一个vue实例化对象只能对应一个dom元素

页面中匹配到多个元素，只会处理第一个元素，后面的元素会忽略

<div id="app" class="myapp">{{msg}}</div>
<div>{{msg}}</div>    这里有两个div
  <!--还支持自定义标签，再el属性里将值改为myDiv标签名即可，一般不用这个，了解就行-->
  <!--<myDiv> {{msg}} </myDiv>-->
  <script>
    var data = {
      msg:"海贼王什么时候完结"
    }
    var vm = new Vue({
      //id选择器
//      el:"#app",
      //类选择器
//      el:".myapp",
      //元素选择器   如果页面中匹配到多个元素，只会处理第一个元素，后面的元素会忽略，如这里就能找到两个div
      el:"div", 会找到那两个div
      data:data
    })

效果：

可以看出第二个div会被忽略

●data属性—数据绑定

Vue实例化对象是通过data属性与模型绑定数据的，一旦绑定了数据，vue实例化对象上就创建了相应属性

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter（ES5的保护属性）。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。注意：能够响应式的数据都是含有getter/setter（对于这个getter/setter自行百度）

var data = {
  msg:"海贼王什么时候完结",
  obj:{
    color:'red'
  }
}
var app = new Vue({
  el:"div",
  data:data
})
console.log(app);
console.log(data);

注意：如果要用data中的数据，必须先在data属性中声明，就算是声明空的字符串也行。

效果：

要修改绑定的数据（如更改msg属性），可这样写：

  app.msg = "永不完结";
//  data.msg = "马上完结";  或者在data变量中改也行(data.msg)因为app.msg和data.msg的值是相等的

console.log(app.msg === data.msg);//true  值类型
console.log(app.obj === data.obj);//true   引用类型
//结论：vue实例化对象上的属性(如：app.msg)不论是值类型还是引用类型都与模型对象(变量data对象，如data.msg)的属性全等