v-if 和 v-show 的区别

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

而v-show一开始就渲染，只是用css中的display:none进行显示隐藏

v-if

v-if是Vue的一个条件渲染指令，用于根据表达式的值来决定是否渲染某个元素或组件。当表达式的值为真时，元素或组件会被渲染；当表达式的值为假时，元素或组件会被移除。

v-if的语法格式为：

<template v-if="expression">
当expression为真时渲染的内容 -->
</template>

其中，expression是一个JavaScript表达式，可以是一个变量、一个函数调用、一个计算表达式等等。

v-if和v-show该何时使用

需要注意的是，v-if是一个惰性指令，即只有在表达式的值发生改变时才会重新渲染。因此，在频繁切换条件时，建议使用v-show指令来代替v-if，以避免不必要的性能开销。

v-bind

v-bind是Vue的一个指令，用于动态绑定数据到HTML元素的属性上。

例如，我们可以使用v-bind来将Vue实例中的数据绑定到一个元素的class属性上：

 v-bind:class="{'active': isActive}"div>

这里的isActive是Vue实例中的一个布尔类型数据，当它为true时，该元素的class属性会被设置为"active"。当它为false时，该元素的class属性不会有任何变化。

除了class属性，我们还可以使用v-bind绑定其他属性，例如style、href、src等。

另外，v-bind还可以简写为冒号(:)，例如上面的例子也可以写成：

 <div :class="{'active': isActive}"></div>

v-bind也可以用于绑定事件，例如：

   < button :click="handleClick">Click me</button>

这里的handleClick是Vue实例中的一个方法，在点击按钮时会触发该方法。

v-html

v-html是Vue.js中的一个指令，用于将数据渲染为HTML代码，并将其插入到DOM元素中。它可以用于在Vue组件中动态生成HTML内容，例如从后端获取富文本数据并展示在页面上。

该指令的一个弊端：使用v-html指令需要注意安全性问题，因为它可以渲染任意的HTML代码，包括恶意脚本。因此，在使用v-html时需要确保渲染的内容是可信的，并采取必要的安全措施，例如过滤或转义特殊字符等。

v-on

v-on是Vue的一个指令，用于绑定事件监听器。它的作用是在触发指定的事件时执行对应的方法。v-on的语法格式为：

```
<button v-on:事件名="方法名"></button>
```

其中，事件名是指DOM元素支持的事件，比如click、mouseover、submit等；方法名是指Vue实例中定义的方法名。

除了使用v-on指令来绑定事件监听器外，还可以使用简写形式@来代替v-on，例如：

    <button @click="方法名"></button>

这样就能实现点击事件的监听。在Vue中，v-on指令可以用于任何DOM元素上，包括自定义组件。

v-for

v-for是Vue.js中的一个指令，用于循环渲染DOM元素或组件。它可以遍历数组、对象和字符串，并为每个元素或属性生成相应的DOM节点或组件实例。

v-for的语法如下：

```
 遍历数组 -->
>
  <li v-for="(item, index) in items" :key="index" }}>{{item}}</li>
</ul>

 遍历对象 -->
>
  <li v-for="{value, key} in obj" :key="key" }}> {{ value }}</li>
</ul>

 遍历字符串 -->
>
  <span v-for="char, index) in str" :key="index" char }}</span>
</div>
```

其中，v-for指令后面的括号中分别是循环变量和索引变量，可以使用括号中的变量在模板中引用循环中的数据。同时，为了优化渲染性能，建议使用:key属性指定每个元素的唯一标识符，以便Vue.js能够正确地跟踪每个元素的变化。

v-model

v-model是Vue.js中的一个指令，它用于在表单元素上创建双向数据绑定。它可以将表单元素的值与Vue实例的数据进行绑定，使得当表单元素的值发生改变时，Vue实例的数据也会相应地改变，反之亦然。

v-model可以用在输入框、单选框、复选框等表单元素上。它的使用方式如下：

```html
 <input v-model="message" type="text"/>
 ```

上面的代码中，v-model绑定了一个名为message的数据属性，它将输入框中的值与这个数据属性进行双向绑定。这意味着当用户在输入框中输入文字时，message的值也会相应地改变；反之，当message的值发生改变时，输入框中的值也会随之改变。

除了绑定简单的文本值外，v-model还可以绑定复杂的对象和数组。例如，我们可以使用v-model绑定一个选项列表：

```html
<select v-model="selected">
 
 <option value="a">Option A</option>
  <option value="b">Option B</option>
  <option value="c">Option C</option>
</select>
```

在这个例子中，v-model绑定了一个名为selected的数据属性，它将选项列表中被选中的值与这个数据属性进行双向绑定。当用户选择一个选项时，selected的值也会随之改变。

总之，v-model是Vue.js中一个非常方便的指令，它能够简化表单元素与数据之间的双向绑定。在实际开发中，我们可以充分利用它来提高代码的可维护性和开发效率。

vue2中常用