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 v-on:click="click">点我</button> 请输入： --><!--简写 --><button @click="click">点我</button> 请输入：<!--可传入参数,比如id值--><button @click="click2($event,2132312321)">点我</button> 请输入：</div><script src="https://cdn.jsdelivr.net/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="http://www.baidu.com" @click.prevent="click">跳转到百度</a>
- stop：阻止事件冒泡（常用）；event.stopPropagation()
<!--阻止事件冒泡 点里面的按钮,外面盒子的click事件不会触发--><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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://unpkg.com/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>
Vue 常用指令 自定义指令相关推荐
- vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网 一 .class.style操作 二.事件 三.计算属性 四.数据监听.观测 五.指令+自定义指令 六.过滤器 一 .class.style操作 官网 1. class使用: (1)v-b ...
- vue基础4——自定义指令
自定义指令 自定义指令中的this指向window <div id="root"><h2>当前的n值是:<span v-text="n&qu ...
- vue单文件自定义指令的封装
vue单文件自定义指令的封装 第一步(封装一个js文件) // 暴露并配置指令 功能添加背景颜色 export const mycolor = {// 解析结构完成后自动运行钩子函数inser ...
- Vue API(directives) 自定义指令
前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...
- Vue 混合、自定义指令、插件
vue的复用性与组合 混合 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项 ...
- vue中通过自定义指令将汉字转化为首字母大写、首字母小写、大写、小写的拼音
使用情景: 在文本框中输入内容,例如姓名 在页面中将姓名转化为姓名的拼音,包括大写拼音.小写拼音.首字母大写拼音.大写拼音缩写.小写拼音缩写 新建一个 pinyin.js 文件 这是一串又臭又长的un ...
- 【vue】使用自定义指令实现时间戳格式化
时间戳的显示需求 在开发中,大多数情况下从服务器请求获取到的都是时间戳. 我们需要将时间戳转换成具体格式化的时间来展示. 在Vue2中可以通过过滤器(filter)来完成: 在Vue3中可以通过 计算 ...
- php 自定义sql 脚手架,vue路由、自定义指令、脚手架
*Vue vue-router 一.路由 一.导航式路由 路由路径由 标签配置 标签内 to属性值规定改标签指向的path路径: 路由对应视图 通过加载组件 加载到上 去首页 去新闻 配置路由的步骤: ...
- vue中如何自定义指令
目录 一. 什么是自定义指令 二. 如何自定义指令 三.应用场景实现 输入框防抖 图片懒加载 一键 Copy的功能 拖拽 下拉菜单 相对时间转换 一. 什么是自定义指令 我们看到的v-开头的行内属性, ...
最新文章
- MySql JDBC
- SQL Server技术问题之索引优缺点
- 新四则运算 合作完成
- Hyper-V用差异磁盘克隆系统
- ELK下常见启动错误
- x12arima季节调整方法_又到了戴贝雷帽的季节，不同发型的佩戴方法，让你秒变时髦精...
- 网站监控工具有哪些4款免费国内在线网站监控工具
- 配置vscode解决code runner乱码
- 农历和阳历的之间的转换
- EBS功能_Oracle ERP系统借贷关系
- JS 实现小游戏 打砖块
- python第三方库汇总
- UFR II、PCL、PostScript打印机驱动区别
- CS231n学习笔记-损失函数、损失函数与梯度下降
- 逆序的三位数(取余，加减乘除)[C语言/C++]
- 幻14 ubuntu20.04 AX210驱动安装
- 【搬运】射手播放器下载字幕存储位置及修改方法
- 牛客练习赛31 C 无畏死灵术士莉莲娜与锁链面纱（dfs + 期望dp）
- 精灵盛典显示跨服服务器繁忙,精灵盛典应用商店下架了什么情况 精灵盛典下架原因是什么...
- 图扑入选 2021 中国企业抗洪捐赠 500 强榜单