vue的小总结

首先vue就是一个MVVM模型。

vuejs常用指令：

• v-if指令
• v-show指令
• v-else指令
• v-for指令
• v-bind指令
• v-on指令

• v-if指令

  v-if是条件渲染指令，它根据表达式的真假来删除和插入元素
  基本语法：
  v-if="expression"
  expression是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。

• v-show指令

  v-show和v-if区别。
  v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染

  先看两个截图，第一个是当isMale为true时，第二张图是isMale为false条件不成立时，可以看到v-if的html并没有渲染出来，
  而使用v-show的div仅仅是更改了它的样式display: none;

• v-else指令

  v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容

• v-for指令

  v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
  v-for="item in list"
  list是一个数组，item是当前遍历的数组元素
  v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始

• v-bind指令

  v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: classv-bind:src也可简写成:src

• v-on指令

  v-on用于监听DOM事件,用法和v-bind类似，例如给button添加点击事件
  <button v-on:click="show">
  同样，和v-bind一样，v-on也可以使用简写，用@符号代替，修改代码：
  <button @click="show">

  computed

  计算属性是根据依赖关系进行缓存的计算，并且只在需要的时候进行更新。

• methods

  在使用vue的时候，可能会用到很多的方法，它们可以将功能连接到事件的指令，甚至只是创建一个小的逻辑就像其他函数一样被重用。

 

 

在vue中处理复杂的逻辑的时候，我们经常使用计算属性computer，但是很多时候，我们会把计算属性、方法和侦听器搞混淆，在 w3cplus.com的一篇文章中是这样总结这三者的。

• methods：正如他的名字一样，它们是挂载在对象上的函数，通常是Vue实例本身或Vue组件。
• computed：属性最初看起来像一个方法，但事实却又不是方法。在Vue中，我们使用data来跟踪对特定属性的更改，得到一定的反应。计算属性允许我们定义一个与数据使用相同方式的属性，但也可以有一些基于其依赖关系的自定义逻辑。你可以考虑计算属性的另一个视图到你的数据。

本文章借鉴于https://www.cnblogs.com/fozero/p/8563939.html。