【Vue知识体系总结 2，95%Java开发者已收藏的十大开源库

最新推荐文章于 2025-01-18 14:22:07 发布

Java后端面试题

最新推荐文章于 2025-01-18 14:22:07 发布

阅读量273

点赞数

分类专栏：程序员文章标签：后端 java 面试

本文链接：https://blog.youkuaiyun.com/m0_60666209/article/details/119510099

版权

程序员专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了Vue.js的基础知识，包括如何使用Vue实现Hello World，列表展示和简单计数器。深入探讨了MVVM模式，解释了Vue的生命周期，展示了在不同阶段可以进行的操作。此外，还讲解了动态绑定属性，如v-once和v-cloak的用法。最后，提供了相关的面试题和算法题资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IDE使用WebStorm。

四、Vue入门语法

1、使用Vue实现hello world


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>



<div id="app">{{message}}</div>



<script src="../js/vue.js"></script>

<script>

    //编程范式：声明式编程

    //var没有变量的作用域，var是js设计早期的缺陷

    // let:变量；const：常量

    let app = new Vue({

        el: '#app',//用于挂载要管理的元素

        data: {//定义数据

            message: '你好啊，哪吒'

        }

    })



    // 命令式编程

    // 1.创建div元素，设置id属性



    //2.定义一个变量叫message



    //3.将message变量放到前面的div中显示

</script>

</body>

</html>

2、vue列表展示


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>



<div id="app">

  <ul>

    <li v-for="item in girls">{{item}}</li>

  </ul>

</div>



<script src="../js/vue.js"></script>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      message: '你好啊，哪吒',

      girls: ['美杜莎','云韵','比比东','纳兰嫣然','雅妃']

    }

  })

</script>

</body>

</html>

3、实现简单计数器


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<div id="app">

  <h2>当前计数：{{counter}}</h2>

  <!--<button v-on:click="counter++">+</button>

  <button v-on:click="counter--">-</button>-->

  <button v-on:click="add">+</button>

  <button v-on:click="sub">-</button>

</div>



<script src="../js/vue.js"></script>

<script>

  // proxy代理

  const app = new Vue({

    el: '#app',

    data: {

      counter: 0

    },

    methods: {

      add: function (){

        this.counter++

        console.log('add被执行')

      },

      sub: function (){

        this.counter--

        console.log('sub被执行')

      }

    }

  })



  // 1.拿button元素



  // 2.添加监听事件

</script>

</html>

五、vue中的MVVM

MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的_视图模型_是一个值转换器，这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。

六、理解vue生命周期

1、生命周期代码实例

2、生命周期

3、分析生命周期相关方法的执行时机


//===创建时的四个事件

beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行

    console.log(this.message) //undefined

    this.show() //TypeError: this.show is not a function

    // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化

},

created() { // 第二个被执行的钩子方法

    console.log(this.message) //床前明月光

    this.show() //执行show方法

    // created执行时，data 和 methods 都已经被初始化好了！

    // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作

},

beforeMount() { // 第三个被执行的钩子方法

    console.log(document.getElementById('h3').innerText) //{{ message }}

    // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中

},

mounted() { // 第四个被执行的钩子方法

    console.log(document.getElementById('h3').innerText) //床前明月光

    // 内存中的模板已经渲染到页面，用户已经可以看见内容

},

//===运行中的两个事件

beforeUpdate() { // 数据更新的前一刻

    console.log('界面显示的内容：' + document.getElementById('h3').innerText)

    console.log('data 中的 message 数据是：' + this.message)

    // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染

},

updated() {

    console.log('界面显示的内容：' + document.getElementById('h3').innerText)

    console.log('data 中的 message 数据是：' + this.message)

    // updated执行时，内存中的数据已更新，并且页面已经被渲染

}

七、动态绑定属性


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>



<div id="app">

  {{message}}

  <h2>{{firstName}} * {{lastName}}</h2>

  <h2>{{counter * 2}}</h2>

</div>



<script src="../js/vue.js"></script>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      message: '你好',

      firstName: '比比东',

      lastName: '美女',

      counter: 100

    }

  })

</script>

</body>

</html>

1、v-once

展示message的初始值，message值变化，界面也不会产生变化。

2、v-cloak


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    [v-cloak]{

      display: none;

    }

  </style>

</head>

<body>

<div id="app" v-cloak>

  {{message}}

</div>



<script src="../js/vue.js"></script>

<script>

  //在vue解析之前，div中有一个属性v-cloak

  //在vue解析之后，div中没有一个属性v-cloak

  setTimeout(function(){

    const app = new Vue({

      el: '#app',

      data: {

        message: '你好'

      }

    })

  },1000)



</script>

</body>

</html>

惊喜

最后还准备了一套上面资料对应的面试题（有答案哦）和面试时的高频面试算法题（如果面试准备时间不够，那么集中把这些算法题做完即可，命中率高达85%+）



# 惊喜

最后还准备了一套上面资料对应的面试题（有答案哦）和面试时的高频面试算法题（如果面试准备时间不够，那么集中把这些算法题做完即可，命中率高达85%+）

[外链图片转存中...(img-59Nk0dL8-1628389782732)]


[外链图片转存中...(img-mUgwCTuR-1628389782733)]

**[资料获取方式：戳这里免费领取](https://gitee.com/vip204888/java-p7)**