Vue基础回顾(1)

146 阅读1分钟

Vue核心思想及特点:

核心思想

响应式(声明式)和组件化

特点

渐进式,可大可小(大小项目都可以使用Vue来开发)

文本指令

{{}} 文本插值,刷新页面会一闪而过,可以使用v-text代替或者使用v-cloak解决([v-cloak]{displaye:none})

v-text,如果渲染null,undefined是没有效果的,如果渲染bool值,会隐式将boo值转换为字符串

v-html,专门用于渲染html字符串,这些字符会被浏览器引擎渲染成真实的DOM结构。而且还具有防注入攻击XSS的功能,可以放心的使用v-html

表单绑定

v-model,用于表单的双向绑定。一般我们谈论的双向绑定是指表单的v-model,谈论“响应式/声明式”指的是vue的响应式原理。

表单的三个修饰符

  • .trim 去除文本类表单值的首尾字符串。
  • .number 用于把数字组成的字符串转化成Number类型。
  • .lazy 用于“长表单”的v-model上。当长表单的光标失焦时,再把表单视图上的最新值更新到声明式变量上。

条件渲染

v-show是对元素的显示与隐藏,也就是display:nonev-if是元素从DOM上的移除。v-show,v-if后面跟的最终结果都是Boolean(表达式)。v-if,v-else-if,v-else中间是不能有其他节点的。

结论

使用v-show页面初始化的开销较大,相反v-if较小。但是当需某个元素需要频繁的隐藏和显示用v-show比较好。