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

最新推荐文章于 2022-09-13 17:47:44 发布

置顶 Lioner-CSU

最新推荐文章于 2022-09-13 17:47:44 发布

阅读量435

点赞数

分类专栏：框架 vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_35630674/article/details/100556988

版权

vue 同时被 2 个专栏收录

19 篇文章 2 订阅

订阅专栏

框架

9 篇文章 0 订阅

订阅专栏

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

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

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

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

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

点击button的时候：

点击inner的时候：

.capture

先触发外层再触发内层

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

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

</div>

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

.prevent

仅仅触发click事件绑定的内容，但是不会跳转。

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

.once

只触发一次点击事件 ==>只阻止一次跳转，之后就还是正常跳转

 <a href="http://www.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属性的运用

  <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-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
}

②

filter()：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。其实()内是true就返回，是false就过滤。

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('dateFormat2', function (dateStr, pattern = "") {})

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

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

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

    // 全局的过滤器， 进行时间的格式化
    // 所谓的全局过滤器，就是所有的VM实例都共享的
    Vue.filter('dateFormat2', 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,howmany,item1,.....,itemX)

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

返回值

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

16、私有过滤器

   // 如何自定义一个私有的过滤器（局部）
    var vm2 = new Vue({
      el: '#app2',
      data: {
        dt: new Date()
      },
      methods: {},
      filters: { // 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
        // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
        dateFormat3: 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'
        }
      }
    })

Lioner-CSU

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小白学习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、时间格式化过滤器...
复制链接

扫一扫