Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第1章 Vue.js基础入门 1.5 Vue基础指令

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第1章 Vue.js基础入门

1.5 Vue基础指令

1.5.1 v-cloak指令

v-cloak 指令的作用是在 Vue 数据渲染完成之前，隐藏源代码

当快速刷新页面或者网速较慢时，Vue不能立即渲染数据 → 不友好

CSS：属性选择器

v-cloak原理：因为快速刷新页面或网速原因，导致Vue.js没有生效，在生效之前，添加了v-cloak指令的元素都会隐藏(样式)，当Vue.js加载完毕，v-cloak指令就会被立马删除。

1.5.2 v-text指令

作用：渲染data 中的属性值

示例

两种方式渲染数据的运行效果相同。

1.5.3 v-html指令

作用：渲染富文本

示例

插值表达式、v-text、v-html的比较：

• 都可以渲染M层中的数据

• 插值表达式和v-text不能渲染富文本

• 只有插值表达式中的文本可以正常显示，v-text和v-html渲染的数据会覆盖原标签里的内容。

  

1.5.4 v-bind指令

作用：元素属性绑定

将M层的数据渲染到元素的属性中。

使用v-bind指令

当元素中的属性使用了v-bind指令，后面的值就成了变量，Vue会到M层找它，找到了就渲染，找不到就报错。

其他属性绑定

1.5.5 v-on指令

作用：元素事件绑定

示例：单击按钮，控制台输出字符串

methods属性用于存放方法。

视图层中，通过v-on指令给按钮添加绑定了单击事件，当单击按钮时，会到methods属性中查找show方法，找到就执行，找不到就报错。

示例：鼠标移动事件

v-on指令可以简写成"@"