VUE常用指令（最详细、带实例解释） |
您所在的位置：网站首页 › vue的指令写法 › VUE常用指令（最详细、带实例解释） |
|
三、常用指令
1、v-cloak
作用：解决浏览器在加载页面时因存在时间差而产生的闪动问题 原理：先隐藏元素挂载位置，处理好渲染后再显示最终的结果 注意：需要与CSS规则一起使用 示例： [v-cloak] { display: none; } { { message }} { {msg}} new Vue({ el: '#app', data: { msg:'百度一下' } }) v-html 填充HTML片段 存在安全问题 本网站内部数据可以使用，来自第三方的数据不可使用 new Vue({ el: '#app', data: { html:'百度一下' } }) v-pre 填充原始信息 跳过表达式的编译过程，显示原始信息 { { this will not be compiled }}有些时候我们不想指令中的表达式进行运行，只需要给表达式加个引号。例如： 3、v-once作用：只渲染元素和组件一次，之后元素和组件将失去响应式（数据层面）功能 Q & A：如何理解响应式？ 布局响应式：随着终端设备的屏幕尺寸的变化而改变布局 数据响应式：数据变化后页面随之变化，页面中的数据变化代码中的数据也跟着变化（双向数据绑定）示例： { {message}} { {message}} const vm = new Vue({ el: '#app', data: { message: '你好世界' } })##4、v-bind 作用：动态地绑定一个或多个attribute【组件内：一次声明，多次使用】 场景：复用某个数据的时候会使用。例如：飞猪官网 跳转 跳转示例代码 { {alt}} { {alt}} new Vue({ el: '#app', data: { url: 'https://www.fliggy.com/', type: '_blank', alt: '飞猪官网' } }) 5、v-on（重点） 5.1、基本使用作用：绑定事件监听器（事件绑定） 示例： |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |