旅游网站系统的设计与实现,竞价被恶意点击怎么办,二维码图片,上海网站开发团队1.之前学过的指令
2. 内置指令
3. 自定义指令
一.之前学过的指令
指令名用法v-bind单项绑定解析表达式#xff0c;可以简写为:xxxv-model双向绑定v-for遍历数组/对象/字符串v-on 绑定监听事件#xff0c;可以简写为v-if条件渲染#xff08;动态控制节点是否存在#xf…1.之前学过的指令
2. 内置指令
3. 自定义指令
一.之前学过的指令
指令名用法v-bind单项绑定解析表达式可以简写为:xxxv-model双向绑定v-for遍历数组/对象/字符串v-on 绑定监听事件可以简写为v-if条件渲染动态控制节点是否存在 v-else 条件渲染动态控制节点是否存在 v-show 条件渲染动态控制节点是否展示 二.内置指令
① 内置指令以及用法汇总
指令名用法v-text更新元素textContent 会替换所有标签内容只展示内容不解析标签v-html向指定节点中渲染包含html结构的内容v-once所有节点在初次动态渲染后就视为静态内容了 以后数据的改变不会引起v-once所在结构的更新可以优化一些性能v-pre跳过其所在节点的编译过程 可利用它跳过没有使用指令语法没有使用插值语法的节点效率会变高加快编译v-cloak 本质是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性 使用css配合v-cloak可以解决网速慢的时候页面展示出未解析的{{XXX}}值 ② 内置标签逐个分析
1v-text: 只展示内容不解析标签
2v-html
作用向指定节点中渲染包含html结构的内容与插值语法的区别 ① v-html会替换掉节点中的所有内容{{xxx}}不会 ② v-html可以识别html结构 注意v-html有安全性问题 ① 在网站上动态渲染任何HTML都是非常危险的容易导致XSS攻击 ② 一定要在可信的内容上使用v-html ,不要在用户提交的内容上 ③ XSS攻击就是想办法去让用户的浏览器执行一些这个网页中原本不存在的前端代码比如使用 document.cookie命令窃取用户的coolkie信息
3v-oncen的值刚开始是1之后就不会再变化了 4v-pre 适用于没有指令语法没有使用插值语法的节点
使用v-pre的节点不会去编译 5v-cloakVue实例创建完毕并接管容器后会删除v-cloak属性
下面实现一个5秒后加载vue库在这期间有v-cloak的属性就不展示等到Vue创建完实例并接管容器后v-cloak会被删除 三. 自定义指令
1. 函数式
2. 对象式
3.全局自定义指令/局部自定义指令
4.需求案例 需求1定义一个v-big指令和v-text功能类似但会把绑定的数值放大10倍 需求2定义一个v-fbind指令和v-bind功能类似但是可以让其绑定的input元素默认获取焦点
1自定义指令语法
局部指令
1.对象式
new Vue({directives:{指令名:配置对象}})
2.函数式
new Vue({directives:{指令名:回调函数}})
3. 全局指令 1Vue.directive(指令名, 配置对象) 2Vue.directive(指令名, 回调函数)
4. 代码举例
1需求1定义一个v-big指令和v-text功能类似但会把绑定的数值放大10倍 h2当前的n值是:span v-textn/span/h2!-- 定义一个v-big指令 --h2放大10倍后n的值是:span v-bign/span/h2button clickn点我1/button
(2) 函数会有两个参数第一个参数是定义指令的html元素第二个参数指令的信息可以取到指令当前的值, 指令在定义时不加v-, 但是在使用的时候需要加v-
script typetext/javascriptnew Vue({el: #root,data: {name: hello,n: 1},directives: {// 函数式big (element, binding) {// 这里的this是windowconsole.log(big, this)console.log(element, binding)element.innerText binding.value * 10}}})/script 3big函数何时会被调用 指令与元素成功绑定时一上来的时候就会调用 指令所在模板被重新解析时会调用 4需求2定义一个v-fbind指令和v-bind功能类似但可以让其所绑定的input元素默认获取焦点 5 配置对象中常用的三个回调函数 bind (element, binding) 指令与元素成功绑定时 inserted (element, binding):指令所在元素插入页面时调用 update (element, binding)指令所在模板结构被重新解析时调用 6上面获取焦点需要写到inserted中就是元素插入页面的时候就需要调用否则不生效fbind需要写成对象式因为函数式无法完成上述获取焦点的功能函数式在指令与元素绑定时和指令所在的模板结构被重新解析时调用指令与元素绑定时元素还没有插入页面所以使用focus()无效必须写成对象式将focus()写到inserted函数中所在元素插入页面之后调用就可以生效
7自定义指令命名的一个小问题如果自定义的指令是多个单词要使用 xx-yy 的命名法不要使用小驼峰命名
h2放大10倍后n的值是:span v-big-numbern 在定义方法时需要用引号括起来 也可以使用简写的形式 8注意自定义函数里面的this是window 9全局指令举例 函数式写法
Vue.directive(big, function (element, binding) {element.innerText binding.value * 10
}) 对象式写法 Vue.directive(fbind, {bind (element, binding) {console.log(this) // 此处的this是windowelement.value binding.valueconsole.log(bind)},inserted (element, binding) {element.focus()console.log(inserted)},update (element, binding) {element.value binding.valueconsole.log(update)}})
