vue常用指令简单介绍

vue是单面应用，只有一个HTML项目中内容都分别写在各组件中，切换组件来显示不同的内容。

缺点：

第一次加载会加载所有组件，比较慢

优点：

• 良好的交互体验（局部渲染，每个页面都是单独的一个模块，避免了不必要的跳转和重新渲染）。
• 前后端分离，架构清晰。
• 减轻服务器压力。

常用指令：

v-html	数据绑定，可解析标签
v-text	数据绑定
v-on(简写“;”)	事件绑定
v-bind（简写“@”）	属性绑定
v-if	显示与隐藏（为true就显示，为false就隐藏）
v-show	显示与隐藏
v-model	只用于表单元素的数据双向绑定
v-for	循环渲染

v-if与v-show区别：

• v-if：通过插入和删除节点控制显示隐藏
• v-show：通过css的display控制显示与隐藏（频繁的显示与隐藏使用）

v-for注意事项：

• 能导致v-for更新页面：push,pop,shift,unshift,splice;
• 如果在实例创建之后，添加新属性到实例上，视图不更新，需用到vue.set(定义在构造函数上的)或this.$set(定义在原型对象上)

修饰符：

• 事件修饰符：
  • .stop：阻止事件冒泡
  • .prevent：阻止默认行为
  • .once：只执行一次
  • .self：点击元素自身才触发函数
• 键盘修饰符
• 表单修饰符
  • .lazy：从input事件变成change事件实现数据同步
  • .number.lazy：自动将用户输入值转为数值类型
  • .trim：自动过滤用户输入的首位空白字符