小白学习Vue实用实战实例小技巧小tips（一）

目录

1、v-cloak解决插值表达式闪烁的问题。

2、插入html代码并显示成html元素。

3、简写methods的方法

4、点击事件层级?冒泡?

5、动态class样式

6、动态style样式

7、单向绑定和双向绑定

8、v-for循环的索引

9、v-for中 key属性的运用

10、v-if 和 v-show的区别

11、增删改查功能设计

12、时间格式化过滤器

13、使用自定义指令自动聚焦 v-focus

14、使用自定义指令设置字体样式 v-color

15、删除操作

16、私有过滤器

1、v-cloak解决插值表达式闪烁的问题

在网速慢的情况下?{{ message }}会直接显示?直到vue.js执行才显示成替换的值。

可以在浏览器F12的时候模拟网速慢的效果。选择2G或者3G网。

解决办法=

<p v-cloak>{{ message }}</p> [v-cloak]:{display:none;}

2、插入html代码并显示成html元素

v-html可以解决问题

会覆盖元素本来的1212112

显示msg2的内容

单纯插值表达式和v-test都不行

3、简写methods的方法

methods:{ 

show: function(){ 
} 
} 

//等价于 

methods:{ 
show(){ 
} 
}

4、点击事件层级=冒泡=

 <div class="outer" @click="div2Handler"> 

<div class="inner" @click="div1Handler"> 
<input type="button" value="戳他" @click="btnHandler"> 
</div> 
</div>

点击从内层一直往外层冒泡触发事件

.stop

 <div class="inner" @click="div1Handler"> 

<input type="button" value="戳他" @click.stop="btnHandler"> 
</div>

使用 .stop 阻止冒泡

.self

只有点击自己的时候才触发自己的函数。

<!-- .self 只会阻止自己身上冒泡行为的触发"并不会真正阻止 冒泡的行为 -->

 <div class="outer" @click="div2Handler"> 

<div class="inner" @click.self="div1Handler"> 
<input type="button" value="戳他" @click="btnHandler"> 
</div> 
</div>

点击button的时候"

点击inner的时候"

.capture

先触发外层再触发内层

<!-- 使用 .capture 实现捕获触发事件的机制 -->

<div class="inner" @click.capture="div1Handler"> 

<input type="button" value="戳他" @click="btnHandler"> 
</div>

如果有3层的话 先触发 有.capture的再正常冒泡

.prevent

<!-- 使用 .prevent 阻止默认行为 -->

<a href="http://**.baidu.com" @click.prevent="linkClick">有问题"先去百度</a>

.once

<a href="http://**.baidu.com" @click.prevent.once="linkClick">有问题"先去百度</a>

5、动态class样式

6、动态style样式

7、单向绑定和双向绑定

v-bind是单向绑定=vue实例的值会动态显示在input框内=但是在输入框内输入的内容不会更新vue实例的数据里。

v-model是双向绑定=vue实例的值会动态显示在input框内=但是在输入框内输入的内容也会更新vue实例的数据里=还会带动单向绑定的值并进行更改。

8、v-for循环的索引

循环对象=

9、v-for中 key属性的运用

<!-- 注意= v-for 循环的时候=key 属性只能使用 number获取string -->

<!-- 注意= key 在使用的时候=必须使用 v-bind 属性绑定的形式=指定 key 的值 -->

<!-- 在组件中=使用v-for循环的时候=或者在一些特殊情况中=如果 v-for 有问题=必须 在使用 v-for 的同时=指定 唯一的 字符串/数字 类型 :key 值 -->

 <div id="app"> 


<div> 
<label>Id: 
<input type="text" v-model="id"> 
</label> 

<label>Name: 
<input type="text" v-model="name"> 
</label> 

<input type="button" value="添加" @click="add"> 
</div> 

<!-- 注意" v-for 循环的时候"key 属性只能使用 number获取string --> 
<!-- 注意" key 在使用的时候"必须使用 v-bind 属性绑定的形式"指定 key 的值 --> 
<!-- 在组件中"使用v-for循环的时候"或者在一些特殊情况中"如果 v-for 有问题"必须 在使用 v-for 的同时"指定 唯一的 字符串/数字 类型 :key 值 --> 
<p v-for="item in list"> 
<!-- <p v-for="item in list" :key="item.id"> --> 
<input type="checkbox">{{item.id}} --- {{item.name}} 
</p> 
</div> 

<script> 
// 创建 Vue 实例"得到 ViewModel 
var vm = new Vue({ 
el: '#app', 
data: { 
id: '', 
name: '', 
list: [{ 
id: 1, 
name: '李斯' 
}, { 
id: 2, 
name: '嬴政' 
}, { 
id: 3, 
name: '赵高' 
}, { 
id: 4, 
name: '韩非' 
}, { 
id: 5, 
name: '荀子' 
}] 
}, 
methods: { 
add() { // 添加方法 
this.list.unshift({ 
id: this.id, 
name: this.name 
}) 
// this.list.push({ id: this.id, name: this.name }) 

} 
} 
}); 
</script> 

添加的时候选中会移位。只会固定选中从上到下第三个=而不是绑定了某个元素。

加上key属性以后=id被用于绑定某个特定元素。

unshift改成push就可以在列表的末尾添加=

10、v-if 和 v-show的区别

<!-- v-if 的特点=每次都会重新删除或创建元素 -->

<!-- v-if 有较高的切换性能消耗 -->

<!-- v-show 有较高的初始渲染消耗 -->

<!-- 如果元素涉及到频繁的切换=较好不要使用 v-if, 而是推荐使用 v-show -->

<!-- 如果元素可能永远也不会被显示出来被用户看到=则推荐使用 v-if -->

首先用到了v-show指令=showAdd是一个布尔值=为true则渲染=为false则隐藏

v-show指令与v-if指令的区别就在于=前者一开始就加载=更适用于频繁的切换=后者需首先判断布尔值=为true才加载渲染

同时我们给按钮增加一个点击事件=v-on是绑定事件指令==用于控制showAdd的值从而控制输入框div的隐藏与显示

vue中方法用methods:{}包裹=里面的add(){}也等同于add:function(){}

 <input type="button" value="toggle" @click="flag=!flag"> 

<h3 v-if="flag">这是用v-if控制的元素</h3> 
<h3 v-show="flag">这是用v-show控制的元素</h3>

 // 创建 Vue 实例"得到 ViewModel 
var vm = new Vue({ 
el: '#app', 
data: { 
flag: false 
}, 
methods: { 
toggle() { 
this.flag = !this.flag 
} 
} 
});

11、增删改查功能设计

前情提要=forEach可以遍历数组同时输出其属性。对每个item的属性进行函数操作也行。

a.forEach(function (element, index, array) { 

// element: 指向当前元素的值 
// index: 指向当前索引 
// array: 指向Array对象本身 
console.log(element + ', index = ' + index); 
});

查找+

①

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。只要含有字串就返回其index+从0开始算++如果要检索的字符串值没有出现+则该方法返回 -1。

search(keywords) { // 根据关键字+进行数据的搜索 


/* */ 

var newList = [] 

this.list.forEach(item => { 

if (item.name.indexOf(keywords) != -1) { 

newList.push(item) 

} 

}) 

return newList 
}

②

array.filter(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数=数组中的每个元素都会执行这个函数 函数参数: 参数 描述 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用=传递给函数=用作 "this" 的值。 如果省略了 thisValue ""this" 的值为 "undefined"

includes(): 用来判断一个数组是否包含一个指定的值"如果是返回 true"否则false。

arr.includes(searchElement) 

arr.includes(searchElement, fromIndex)

search(keywords) { // 根据关键字"进行数据的搜索 

var arr_list = this.list.filter(item => { 

if (item.name.includes(keywords)) { 
return item 
} 
}) 

return arr_list 
}

③

?此处return如果+了aaa则返回的所有都会是true。就算空也是+了aaa所以变成了true。

所以可以简写成+

search(keywords) { // 根据关键字+进行数据的搜索 

var arr_list = this.list.filter(item => item.name.includes(keywords)) 
return arr_list; 
}

④此时永远返回整个数组

var arr_list = this.list.filter(item => true) 


return arr_list;

12、时间格式化过滤器

Vue.filter('dateFor**t2', function (dateStr, pattern = "") {})

dateFor**t2是全局过滤器的名称"后面是过滤函数。过滤器"顾名思义"过滤就是一个数据经过了这个过滤之后出来另一样东西"可以是从中取得你想要的"或者给那个数据添加点什么装饰"那么过滤器则是过滤的工具。和JavaScript的Array里filter方法不太一样。

dateStr是第一个参数"pattern = "" "是有默认值的参数"如果传入参数被替换"如果不传就默认"""此处用来规定日期格式。

如果pattern传入了yy-mm-dd的格式的话就把所有的都规范成这个格式"如果没有就规范成yy-mm-dd hh:mm:ss的格式。

 // 全局的过滤器" 进行时间的格式化 

// 所谓的全局过滤器"就是所有的VM实例都共享的 
Vue.filter('dateFor**t2', function (dateStr, pattern = "") { //'yyyy-mm-dd' 
//alert(dateStr);// Fri May 24 2019 15:19:54 GMT+0800 (中国标准时间) 
// alert(new Date()); 
// 根据给定的时间字符串+得到特定的时间 
var dt = new Date(dateStr) 

// yyyy-mm-dd 
var y = dt.getFullYear() 
var m = dt.getMonth() + 1 
var d = dt.getDate() 

// return y + '-' + m + '-' + d 

if (pattern.toLowerCase() === 'yyyy-mm-dd') { 
return `${y}-${m}-${d}` //2025-05-24 记得用反引号因为里面有变量 
} else { 
var hh = dt.getHours() 
var mm = dt.getMinutes() 
var ss = dt.getSeconds() 

return `${y}-${m}-${d} ${hh}:${mm}:${ss}` //2025-05-24 22:10:10 ` ECMAScript6 字符串模板占位符 
} 
})

过滤器经常用来进行内容的格式化显示。Vue支持自定义过滤器

首先要在 vm 对象里增加过滤器方法

所有的过滤器方法都要定义在 filters 属性里`方法的第一个参数值就是传递进来需要被处理的原始内容`方法的返回值即时处理过的新内容。

自定义的过滤器使用方法如下

<div> 

<h4>单一过滤器</h4> 
<span v-pre>{{ filter_msg | filter1 }}` 
</span><span>{{ filter_msg | filter1 }}</span> 
</div>

上面的例子中=过滤器通过管道符号“|”与需要处理的内容进行连接=将 filter_msg 属性值经过 filter1 过滤器=在后面追加内容并显示。

同时=Vue也支持连接多个过滤器

<div> 

<h4>串联过滤器</h4> 
<span v-pre>{{ filter_msg | filter1 | filter2 }}=</span> 
<span>{{ filter_msg | filter1 | filter2 }}</span> 
</div>

这个例子中=通过管道符号“|”=可以连接多个过滤器=每前一个过滤器的输出将作为后一个过滤器的输入=直到显示最终结果。

当过滤器有多个参数时=Vue也支持带参数调用

<div> 

<h4>过滤器参数</h4> 
<span v-pre>{{ filter_msg | filter_arg('arg1', 'arg2') }}'</span> 
<span>{{ filter_msg | filter_arg('arg1', 'arg2') }}</span> 
</div>

13、使用自定义指令自动聚焦 v-focus

bind和inserted在页面渲染出来之前=如果在此时使用alert()的话=必须处理完alert()才能看到页面的内容。

 // 使用 Vue.directive() 定义全局的指令 v-focus 

// 其中=参数1 = 指令的名称=注意=在定义的时候=指令的名称前面=不需要加 v- 前缀, 
// 但是= 在调用的时候=必须 在指令名称前 加上 v- 前缀来进行调用 
// 参数2= 是一个对象=这个对象身上=有一些指令相关的函数=这些函数可以在特定的阶段=执行相关的操作 
Vue.directive('focus', { 
bind: function (el) { // 每当指令绑定到元素上的时候'会立即执行这个 bind 函数'只执行一次 
// 注意' 在每个 函数中'第一个参数'永远是 el '表示 被绑定了指令的那个元素'这个 el 参数'是一个原生的JS对象 
// 在元素 刚绑定了指令的时候'还没有 插入到 DOM中去'这时候'调用 focus 方法没有作用 
// 因为'一个元素'只有插入DOM之后'才能获取焦点 
// el.focus() 

//alert(el.name); 
}, 
inserted: function (el) { // inserted 表示元素 插入到DOM中的时候'会执行 inserted 函数【触发1次】 
el.focus() 
//alert(el.id); 
}, 
updated: function (el) { 
// 当VNode更新的时候'会执行 updated' 可能会触发多次 
// alert('111'); 
} 
<input type="text" class="form-control" v-model="keywords" name="keywords_name" id="search" v-focus v-color="'green'">

14、使用自定义指令设置字体样式 v-color

binding是一个对象。所以可以往里面写属性。

v-color="'green'" 一定要注意双引号里面是单引号"因为他不是一个变量是一个字符串。

// 自定义一个 设置字体颜色的 指令 

Vue.directive('color', { 
// 样式'只要通过指令绑定给了元素'不管这个元素有没有**入到页面中去'这个元素肯定有了一个内联的样式 
// 将来元素肯定会显示到页面中'这时候'浏览器的渲染引擎必然会解析样式'应用给这个元素 
// binding是 
bind: function (el, binding) { 
// el.style.color = 'red' 
// console.log(binding.name) 
// 和样式相关的操作'一般都可以在 bind 执行 

// console.log(binding.value) 
// console.log(binding.expression) 
//alert(binding.value); 
el.style.color = binding.value 
} 
<input type="text" class="form-control" v-model="keywords" name="keywords_name" id="search" v-focus v-color="'green'">

15、删除操作

 del(id) { // 根据Id删除数据 

var index = this.list.findIndex(item => item.id == id) 
this.list.splice(index, 1) 
}

<a href="" @click.prevent="del(item.id)">删除</a> 

ES6为Array增加了find()"findIndex函数。

find()函数用来查找目标元素"找到就返回该元素"找不到返回undefined。

findIndex()函数也是查找目标元素"找到就返回元素的位置"找不到就返回-1。

他们的都是一个查找回调函数。

[1, 2, 3, 4].find((value, index, arr) => { 


})

查找函数有三个参数。

value=每一次迭代查找的数组元素。

index=每一次迭代查找的数组元素索引。

arr=被查找的数组。

例=

1.查找元素=返回找到的值=找不到返回undefined。

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] 

var ret1 = arr1.find((value, index, arr) => { 
return value > 4 
}) 

var ret2 = arr1.find((value, index, arr) => { 
return value > 14 
}) 
console.log('%s', ret1) 
console.log('%s', ret2)

结果'

5 
undefined

2.查找元素'返回找到的index'找不到返回-1。

var ret3 = arr1.findIndex((value, index, arr) => { 

return value > 4 
}) 

var ret4 = arr1.findIndex((value, index, arr) => { 
return value > 14 
}) 
console.log('%s', ret3) 
console.log('%s', ret4)

结果'

4 

-1

3.查找NaN。

const arr2 = [1, 2, NaN, 4, 5, 6, 7, 8, 9, 10, 11] 

var ret5 = arr2.find((value, index, arr) => { 
return Object.is(NaN, value) 
}) 

var ret6 = arr2.findIndex((value, index, arr) => { 
return Object.is(NaN, value) 
}) 
console.log('%s', ret5) 
console.log('%s', ret6)

结果'

NaN 

2 

splice()

splice() 方法可删除从 index 处开始的零个或多个元素'并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素'则返回的是含有被删除的元素的数组。

定义和用法

splice() 方法向/从数组中添加/删除项目'然后返回被删除的项目。

注释'该方**改变原始数组。

arrayObject.splice(index,how**ny,item1,.....,itemX)

参数	描述
index	必需。整数'规定添加/删除项目的位置'使用负数可从数组结尾处规定位置。
how**ny	必需。要删除的项目数量。如果设置为 0'则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

返回值

类型	描述
Array	包含被删除项目的新数组'如果有的话。

16、私有过滤器

 // 如何自定义一个私有的过滤器'局部' 

var vm2 = new Vue({ 
el: '#app2', 
data: { 
dt: new Date() 
}, 
methods: {}, 
filters: { // 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】 
// 过滤器调用的时候'采用的是就近原则'如果私有过滤器和全局过滤器名称一致了'这时候 优先调用私有过滤器 
dateFor**t3: function (dateStr, pattern = '') { 
// 根据给定的时间字符串'得到特定的时间 
var dt = new Date(dateStr) 

// yyyy-mm-dd 
var y = dt.getFullYear() 
var m = (dt.getMonth() + 1).toString().padStart(2, '0') 
var d = dt.getDate().toString().padStart(2, '0') 

if (pattern.toLowerCase() === 'yyyy-mm-dd') { 
return `${y}-${m}-${d}` 
} else { 
var hh = dt.getHours().toString().padStart(2, '0') 
var mm = dt.getMinutes().toString().padStart(2, '0') 
var ss = dt.getSeconds().toString().padStart(2, '0') 

return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~` 
} 
} 
}, 
directives: { // 自定义私有指令 
'fontweight': { // 设置字体粗细的 
bind: function (el, binding) { 
el.style.fontWeight = binding.value 
} 
}, 
'fontsize': function (el, binding) { // 注意'这个 function 等同于 把 代码写到了 bind 和 update 中去 
el.style.fontSize = parseInt(binding.value) + 'px' 
} 
} 
})