Vue 中的内置指令 demo
通过 demo 了解 Vue 中一些常用的内置指令。
涉及到 v-cloack / v-once / 条件循环指令(v-if / v-else-if / v-else) / v-show / 列表遍历渲染 (v-for) / 数组更新、过滤排序 / 方法和事件 (修饰符) 等...
以下是全部的 demo：
JSbin
v-cloak
作用：解决初始化慢导致页面闪动的最佳实践（初始化慢时会显示未渲染好的页面，而 v-cloak 则让没有渲染好的部分隐藏起来，渲染好之后再去掉 v-cloak，让页面正常显示）
常与 display：none 搭配
<style> ???[v-cloak]{ ???????display:none; ???}</style><div v-cloak>{{ msg }}</div>v-once
作用：定义它的元素和组件只渲染一次
<div v-once>{{ msg }}</div>v--if / v--else-if / v--else
条件循环指令：
<div v-if=‘isActive‘>{{ msg }}</div><div v-else-if=‘6>3‘>{{ oncedata }}</div><div v-else>如果前面两个都是 false，那就显示这个</div><button @click=‘changeMsg‘>点我切换</button>JS:
data:{ ???msg:‘this‘, ???oncedata:‘is‘, ???isActive:true},methods:{ ???changeMsg:function(){ ???????this.isActive = !this.isActive ???}}v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因
此会出现乌龙
只会渲染变化的元素，也就是说，input元素被复用了
解决方法：提供key值可以来决定是否复用该元素
<div v-if=‘type==="name"‘> ???用户名 ：<input type="text" placeholder="Username" key=‘username‘></div><div v-else> ???密码 ：<input type="text" placeholder="Password" key=‘password‘></div> ???<button @click=‘changeInput‘>点击切换输入栏</button>JS:
data:{ ???type:‘name‘},methods:{ ???changeInput:function(){ ???????this.type = (this.type===‘name‘?‘password‘:‘name‘) ???}}v-show
作用：控制元素是否显示
<div v-show=‘isActive‘>{{ msg }}</div>data:{ ???isActive:true}v-show 和 v-if 的区别
v-show 和 v-if 的作用同样是控制元素的显示，但是：
v-if 是将元素给移除，即 DOM 树中并不会渲染这个元素
v-show 是将元素给隐藏，即 DOM 树中渲染了这个元素，只是改变了 css 的 display 的属性
v-for
列表渲染指令
- 遍历多个对象
<ul> ???<li v-for=‘item in objs‘>{{ item.name}}</li></ul>data:{ ???objs:[ ???????{name:‘Li‘}, ???????{name:‘Wang‘}, ???????{name:‘Chen‘} ???]}添加索引：
<ul> ???<li v-for=‘(item,index) in objs‘>{{index}}-{{ item.name}}</li></ul>- 遍历对象属性
直接打印属性的值：
<ul> ???<li v-for=‘value in obj‘>{{ value }}</li></ul>data:{ ???obj:{ ???????name:‘zhangsan‘, ???????age:23, ???????gender:‘male‘ ???}}添加键和索引：
<ul> ???<li v-for=‘(value,key,index) in obj‘>{{ index }}-{{ key }}-{{ value }}</li></ul>数组更新、过滤和排序
<ul> ???<li v-for=‘value in arr‘>{{ value }}</li></ul>data:{ ???arr:[213,345,3465,67,457,6,7,687,]}- push() 在末尾添加元素
methods:{ ???arrpush:function(){ ???????this.arr.push(2334) ???}}- pop() 将数组的最后一个元素移除
methods:{ ???arrpop:function(){ ???????this.arr.pop() ???}}- shift() 删除数组的第一个元素
methods:{ ???arrshift:function(){ ???????this.arr.shift() ???}}- unshift（）：在数组的第一个元素位置添加一个元素
methods:{ ???arrunshift:function(){ ???????this.arr.unshift(234234) ???}}- splice() ：可以添加或者删除函数—返回删除的元素
这个方法接受三个参数：
第一个参数 表示开始操作的位置
第二个参数表示：要操作的长度
第三个为可选参数：
methods:{ ???arrsplice:function(){ ???????this.arr.splice(1,1,2) ???}}// 操作数组的下标为 1 的数组成员之后的 1 个数组成员，把他的数值变为 2- sort() ：排序
methods:{ ???arrsort:function(){ ???????this.arr.sort(function(a,b){ ???????????return a > b ???????}) ???}}// 数组成员由大到小排列- reverse()
数组翻转
methods:{ ???arrreverse:function(){ ???????this.arr.reverse() ???}}注意
两个数组变动vue检测不到:
改变数组的指定项
改变数组长度
解决方法：
set :
改变指定项： Vue.set(app.arr,1,”car”)
splice :
改变数组长度: app.arr.splice(1)
方法和事件
基本用法：
记得：如果方法中带有参数，但是你没有加括号，默认传原生事件对象event
data:{ ???cout:0},methods:{ ???handle:function(cout){ ???????count = count || 1 ???????this.cout = this.cout + count ???}}html:
<button @click=‘handle(4)‘>点击 +4</button>修饰符：
多用于事件中：
- stop 阻止事件向上冒泡
不然他会执行完点击按钮的事件后，继续执行父元素的事件
正确做法：添加修饰符 stop：
<div @click=‘divClick‘ style=‘background-color:red;width:100px;height:100px‘> ???<button @click.stop=‘buttonClick‘>点击就送</button></div>- prevent 提交事件并且不重载页面
当我们页面中有表单，点击表单提交按钮 submit 时，要阻止页面重载：
<form action=‘‘ @submit.prevent=‘handle‘> ???<button type=‘submit‘>提交表单</button></form>methods:function(){ ???handle:function(){ ???????alert(‘不需重载页面‘) ???}}- self 只是作用在元素本身而非子元素的时候调用
<div @click.self=‘divClick‘ style=‘background-color:red;width:100px;height:100px‘> ???<button @click.stop=‘buttonClick‘>点击就送</button></div>- once 只执行一次的方法
<div @click.once=‘changeNum‘>{{ num }}</div>data:{ ???num:0}methods:{ ???changeNum:function(){ ???????this.num = this.num + 1 ???}}还可以使用 enter 等方法监听键盘事件：
<div @enter=‘xxx()‘>{{ num }}</div>关于 Vue 的一些常用内置指令就整理到这里了，等接触到新的再添加~。
Vue.js 创建一个 CNODE 社区(3)
原文地址：https://www.cnblogs.com/No-harm/p/9733454.html