Vue内容渲染指令 (1).pptx

Vue开发核心技术主讲教师：梁晓辉Vue基础指令

Vue中的指令按照不同的用途，可以分成如下6类：01内容渲染指令02属性绑定指令03事件绑定指令04双向绑定指令05条件渲染指令06列表渲染指令Vue指令指令的概念指令（Directives）是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

内容渲染指令的概念内容渲染指令用来辅助开发着渲染DOM元素的文本内容。常用的内容渲染指令有如下3个：v-text{{}}V-htmlVue指令

V-text用法实例：注意：v-text会将对应变量的值渲染到页面中，但是会覆盖掉原有内容Vue指令

{{}}语法Vue提供的{{}}语法，专门用来解决v-text会覆盖默认文本内容的问题。我们将其称为插值语法（英文名为：Mustache）用法实例：注意：{{}}插值表达式在实际应用中用的最多，只是内容的占位符，不会覆盖掉原有内容。Vue指令

v-html语法用法实例：注意：v-html能够把带有html标签的字符串，渲染为真正的HTML内容。Vue指令

知识梳理vue指令概念内容渲染指令之v-text内容渲染指令之{{}}插值指令内容渲染指令之v-html

思考题v-text、{{}}插值指令、v-html各自有什么特点？

作业独立编写一个使用v-text指令的案例，内容不限。独立编写一个使用{{}}插值指令的案例，内容不限。独立编写一个使用v-html指令的案例，内容不限。

谢谢观看Vue开发核心技术