Vue 一些常用的标签

1.v-once标签，我们知道vue是响应式的，即某个地方数据更改了，界面的数据也会更改，有时候我们只希望界面只渲染一次，不希望界面的数据乱变动，那么就可以使用v-once标签了

结果，发现，在控制台修改name属性，修改成功，但页面的数据响应失效

2.v-html标签，有时候我们请服务器端请求过来的是一些html代码片段，这个时候，v-html标签就可以发挥它的作用了

结果

3.v-text标签，v-text标签的作用其实和{{}}这个称为mustache语法用法是一致的

结果

4.v-pre标签，我们知道{{}}是一种mustache语法的书写，Vue底层会解析其包含的数据，但有时候我们不希望Vue帮我们解析，而希望直接显示内容出来，这个时候，可以使用v-pre

结果

5.v-cloak标签，这个标签的含义为斗篷，我们知道代码是从上面往下面加载的，有时候浏览器会显示出未编译的mustache标签，体验效果不好，应当先隐藏起来，等到程序跑完再显示

结果，2秒后结果会一起显示出来，而不会显示mustache语法

6.v-if,v-else-if.v-else标签

例子

结果

7.v-show，先讲一下v-show和v-if的区别，v-if当条件为false时，不会有元素存在dom中，而v-show条件为fasle时，元素会存在dom中，只是其display设置成了none,隐藏了而已，所以，当需要界面的内容频繁来回切换时，可以选择v-show,界面只需要渲染一次便可使用v-if.

例子

结果

8.v-model,在项目开发中，我们经常碰到用户填写信息，提交表单的操作，v-model主要是用于双向绑定数据，将vue实例里data里的数据，和表单的数据关联绑定起来

1）简单例子

结果

2）v-model的实现原理，其实就是通过v-bind绑定一个值，以及v-on绑定一个input事件

实际上等同于

代码

结果

3）v-model的修饰符

3.1）lazy,我们在修改输入框内容时，绑定的数据也是瞬间刷新的，而lazy可以让数据在失去焦点时或者回车时再更新

3.2）number,无论我们在输入框输入的是数字还是字母，其后台其实都是将其转换为字符串来进行各种操作的，当我们只希望处理number类型数据时，可以使用number修饰符

3.3）trim,其可以帮我们去掉输入的内容的首尾的空格

例子

结果，没有失去焦点时

失去焦点时