第二步，在元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令
第三步，绑定v-html指令数据，这里设置为字符串
第四步，Vue.js库的v-html指令是插入html元素，修改datas为包含
标签
第五步，预览该静态页面，这时会看到页面显示为“v-html指令”
第六步，将调试打开，这时发现
中有个
标签，就成功地添加了html元素。
在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行 *** 作。Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。
批量注册指令，新建 directives/index.js 文件
在 main.js 引入并调用
指令定义函数提供了几个钩子函数（可选）：
bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。
下面分享几个实用的 Vue 自定义指令
复制粘贴指令 v-copy
长按指令 v-longpress
输入框防抖指令 v-debounce
禁止表情及特殊字符 v-emoji
图片懒加载 v-LazyLoad
权限校验指令 v-premission
实现页面水印 v-waterMarker
拖拽指令 v-draggable
v-copy
需求：实现一键复制文本内容，用于鼠标右键粘贴。
思路：
动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域
将要复制的值赋给 textarea 标签的 value 属性，并插入到 body
选中值 textarea 并复制
将 body 中插入的 textarea 移除
在第一次调用时绑定事件，在解绑时移除事件
使用：给 Dom 加上 v-copy 及复制的文本即可
剩余的请看原文
解决这个问题的方法如下：
1、双击打开HBuilder工具，新建静态页面vhtml.html，并引入vue.js文件。
2、在<body></body>标签元素插入一个div和input输入框标签，添加v-model和v-html指令。
3、在<div></div>标签下方插入<script></script>，并在这个标签初始化vue组件函数。
4、保存代码并在浏览器中预览该界面，可以查看到浏览器控制台报错了。
5、最后修改v-html指令和v-model指令绑定的数据变量，然后保存代码，这样问题就解决了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）