1200字范文 > Vue 常用指令自定义指令

Vue 常用指令自定义指令

时间：2024-04-22 14:44:55

相关推荐

Vue 常用指令自定义指令

v-bind, v-model

v-bind 为单向绑定: 数据只能从data流向页面v-model 双向绑定: 数据不仅从data流向页面,还可以重页面流向data,

一般应用在表单类元素上,(如:input,select…)

v-model:value 可以简写成 v-model,因为v-model默认收集的就是value值

一般使用简写方式

v-on:xxx 或 @xxx 事件处理

<body><div id="app"><button @click="click">点我</button> 请输入：<button @click="click2($event,2132312321)">点我</button> 请输入：</div><script src="/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {message: '我来了 vue',xiong: '男',studyList: ['马子哥', '电光马子', '神威']},methods: {click(event) {console.log(event.target.innerText)alert(this.message);},click2(event,id) {console.log(event,id)alert(this.message);}}});</script></body>

使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名,如click;事件的回调需要配置在methods对象中,最终会在vm上;methods中配置的函数,不需要箭头函数!否则this就不是vm了;methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或组件实例对象;@click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;

事件修饰符 (可以连着写如click.prevent.stop)

prevent：阻止默认事件（常用）；event.preventDefault()

<a href="" @click.prevent="click">跳转到百度</a>

stop：阻止事件冒泡（常用）；event.stopPropagation()

<div @click="click" style="height: 50px; background:blue"><button @click.stop="click">点我</button></div>

once：事件只触发一次（常用）；

<button @click.once="click">点我</button>

capture：使用事件的捕获模式；self：只有event.target是当前操作的元素时才触发事件；passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

键盘事件

<input type="text" @keyup.enter="showInfo">Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => rightVue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）系统修饰键（用法特殊）：ctrl、alt、shift、meta(1). 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2). 配合keydown使用：正常触发事件。也可以使用keyCode去指定具体的按键（不推荐）Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

v-if 和 v-show

v-if— 移除标签删除

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”

可以和 template 配合使用不破坏结构

v-show ---- 添加样式隐藏（display: none）

写法：v-show=“表达式”

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

【备注】使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

v-text

作用:像其所在的节点中渲染文本内容.

与插值语法的区别: v-text 会替换掉节点中的所有内容,{{xxx}} 不会.

<div v-text="name"></div>

v-html

作用: 向指定节点中渲染包含 html 结构和内容

与插值语法的区别:

v-html 会替换掉节点中的所有内容,{{xxx}} 不会.v-html 可以识别 html 标签

v-html 有安全问题

在网页上动态渲染任意 html 是非常微信的,容易导致 xss 攻击一定要在可信的内容上使用 v-html, 永远不要用在用户提交的内容上!

<div v-html="name"></div>

v-cloak (没有值)

本质上是一个特殊属性,Vue 实例创建完毕并接管容器后,会删除 v-cloak 属性

使用 css 配合 v-cloak 可以解决网速满时页面展示出 {{xxx}} 的问题

//[] 属性选择器<style>[v-cloak] {display:none;}</style><div id="root"><h2 v-cloak>{{name}}</h2></div>

v-once (没有值)

v-once 所在的节点在初次动态渲染后,就视为静态内容了

以后数据的改变不回引起 v-once 所在节点的更新,可以用于性能优化

<h2 v-once>初始化的n值是: {{n}}</h2>

v-pre (没有值)

跳过 v-pre 所在节点的编译过程

可利用它跳过没有使用指令语法,没有使用插值语法的节点,会加快编译

<h2 v-pre>Vue其实很简单</h2>

自定义指令

指令名是多个单词,用 - 间隔,如product-order ,不可驼峰命名

<div id="root"><h2>当前值: <span v-text="n"></span></h2><h2>n乘10: <span v-big="n"></span></h2><button @click="n++">点我+1</button><br/><br/><input type="text" v-fbind:value="n"></div><script src="/npm/vue@2/dist/vue.js"></script><script src="/axios/dist/axios.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#root",data: {n: 1},directives: {// big函数何时会被调用？// 1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时big(element,binding){// console.log('big', this) //注意此处的 this 是 windowelement.innerText = binding.value*10;},fbind: {bind(element,binding){// 指令与元素成功绑定时（一上来）element.value = binding.value;},inserted(element,binding){// 指令所在元素被插入页面时element.focus();},update(element,binding) {// 指令所在的模板被重新解析时element.value = binding.value;},}}});</script>

全局指令写法

<script type="text/javascript">//全局指令Vue.directive('big',function(element,binding){console.log(binding)element.innerText = binding.value*10;})Vue.directive('fbind',{bind(element,binding){element.value = binding.value;},inserted(element,binding){element.focus();},update(element,binding) {element.value = binding.value;},})var vm = new Vue({el: "#root",data: {n: 1}});</script>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。