vue复习（1）

1、MVVM

什么是MVVM，MVVM就是Model-View-ViewModel的简写。

• Model：指的是数据部分，对应到前端就是 JavaScript 对象。
• View：指的就是视图部分
• ViewModel： 就是连接视图与数据的中间件(中间桥梁)

下面这张图可以让抽象的认识MVVM。

下面这张图可以让大家具体的了解MVVM。

个人理解：view是我们看到的表面的东西，能呈现在人们视线的东西，个人认为是html+css，model是数据，隐藏在人们看不到的地方，viewmodel是交互，把他们连接起来的东西，也就是js逻辑。如果把MVVM比作一个超市，view就是顾客，model就是商品，viewmodel就是工作人员，顾客买东西必须得经过收纳员的手。

MVVM框架有三要素：响应式，模板引擎，渲染
响应式： vue 如何监听数据的变化？
模板： Vue 的模板如何编写和解析？怎样将具体的值替换掉 {{msg}} 内容，这就是模板引擎的解析。
渲染： Vue 如何将模板转换成 html ? 其实就是有虚拟 DOM 向真实 DOM 的转换。

2、模板语法

2.1 v-bind

<div id="app">
<h2 v-bind:title="msg">
{{msg}}
</h2>
</div>

在上面这个代码块里，我们给h2绑定了一个title属性，v-bind还可以简写成：
下面是效果图

2.2v-for

v-for可以指令于数组来渲染一个列表，被渲染的是数组item是数组源。如下图所示。

<template>
  <div id="app">
    <ul>
      <li v-for="item in list" :key="item.id">
        名字:{{ item.name }}编号：{{ item.id }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      list: [
        { name: 'aa', id: 1 }
      ]
    }
  }
}
</script>

注意： 为了能够保证列表渲染的性能，我们需要给 v-for 添加 key 属性。 key 值必须唯一，而且不能使用index 与 random 作为 key 的值。

2.3v-model

v-model就是我们经常用的数据双向绑定，通过改变model的值来改变view的值
例如下图

2.4v-on

v-on可以理解为js的点击事件，下面是代码和例图

<template>
  <div id="app">
    <span>{{ name }}</span>
    <!-- 通过v-on来指定对应的事件，然后后面跟上对应的方法名，方法的定义在methods完成 -->
    <button v-on:click="changeName">更换姓名</button>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      name: 'aa'
    }
  },
  methods: {
    changeName () {
      this.name = 'dsa'
    }
  }
}
</script>

v-on可以简写成@
下面是带参数的情况

<template>
  <div id="app">
    <span>{{ name }}</span>
    <!-- 通过v-on来指定对应的事件，然后后面跟上对应的方法名，方法的定义在methods完成 -->
    <button v-on:click="changeName('我是参数')">更换姓名</button>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      name: 'aa'
    }
  },
  methods: {
    changeName (name) {
      this.name = name
    }
  }
}
</script>

除了鼠标的单机事件还有绑定键盘的案例。

<template>
  <div id="app">
    <input type="text" @keydown.enter="change" />
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      name: 'aa'
    }
  },
  methods: {
    changeName (name) {
      this.name = name
    },
    change () {
      console.log('键盘绑定')
    }
  }
}
</script>

2.5v-if

v-if是条件渲染，直接看代码

<div id="app">
<p v-if="users.length===0">没有任何用户数据</p>
<ul v-else>
<!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
<!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的
时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
<!-- index表示数组的索引值，该名字可以随意定义 -->
<!-- <li
v-for="(item,index) in users"
:key="item.id"
:class="{actived:selectItem===item}"
@mousemove="selectItem=item"
>
编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
</li> -->
<li
v-for="(item,index) in users"
:key="item.id"
:style="{backgroundColor:selectItem===item?'#dddddd':'transparent'}"
@mousemove="selectItem=item"
>
编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
</li>
</ul>
</div>

如果user为空，这个p标签就会显示出来，否则的话，会渲染页面。
提到v-if就不得不说到v-show，这两个方法有异曲同工之妙
v-show 是通过 css 属性 display 控制元素显示，元素总是存在的。
v-if :通过控制 dom 来控制元素的显示和隐藏,如果一开始条件为 false ,元素是不存在的。
什么时候使用 v-show ,什么时候使用 v-if 呢？
如果需要频繁的控制元素的显示与隐藏，建议使用 v-show . 从而避免大量 DOM 操作，提高性能。
而如果某个元素满足条件后，渲染到页面中，并且以后变化比较少，可以使用 v-if

3、class与style绑定

直接上代码

<template>
  <div id="app">
    <input type="text" @keydown.enter="change" />
    <h2 :class="{ actived: true }">
      {{ name }}
    </h2>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      name: 'aa'
    }
  },
  methods: {
    changeName (name) {
      this.name = name
    },
    change () {
      console.log('键盘绑定')
    }
  }
}
</script>
<style scoped>
.actived {
  background-color: #dddddd;
}
</style>

当actived为true时会触发，为false时就不会触发。

<li
v-for="(item,index) in users"
:key="item.id"
:class="{actived:selectItem===item}"
@mousemove="selectItem=item"
>

这个代码是对slectItem的值判断，当鼠标移入时会让selectItem=item，这时selectItem===item为true，也会触发class绑定事件。
下面这个代码是style的绑定事件

<li
v-for="(item,index) in users"
:key="item.id"
:style="{backgroundColor:selectItem===item?'#dddddd':'transparent'}"
@mousemove="selectItem=item"
>
编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
</li>

这里用了三元表达式，如果结果为true会触发？后的值。如果为false，会触发：后的值。