格式： v-xxx = “mustache语法” ； v-xxx = “msg”； v-xxx = “{{msg}}” ×； Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： vue指令 v-html=“html”： v-html 将一个数据展示在一个DOM内容中， innerHTML( html属性 )， 防止脚本攻击 xss CSRF； v-text=“text”：将数据解析为纯文本，不能输出真正的html，与花括号的区别是在页面加载时不显示{{}}。 结果： v-bind 单项数据绑定 使用技巧： 凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind 格式： v-bind:DOMattr = “data” 简写： :DOMattr = “data” 例如： style: v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名： class:
条件渲染 v-if && v-show 条件渲染有两个指令， 一个是 v-if , 另外一个是 v-show v-if 有三种使用形式 单路分支 双路分支 多路分支
v-if v-if vs v-show 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 template template标签如果放在模板的范围内使用，那么将来不会被解析渲染 v-show 有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 v-if vs v-show v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
