认识 Vue.js

news2024/12/26 13:22:35

node版本管理工具 nvm - 简书

Vue介绍

Vue.js(简称Vue) 是一套用于构建用户界面的渐进式前端框架。（其实就是使用js开发的一个框架）

Vue.js 核心实现 :

响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，而专心数据操作。（高度封装框架的特点是不需要关心dom操作，js jQuery很多都是对dom的一个操作，使用这个框架之后就不需要对dom操作了，视图的框架需要我们去写，数据也需要我们去维护）
可组合的视图组件:把视图按照功能切分成若干基本单元，可维护，可重用，可测试等特点。（很强大的组件功能，一个一个组件嵌套）
响应式，双向数据绑定，即MVVM。是指数据层（Model）-视图层（View）-数据视图（ViewModel 它其实是控制器，是做数据和视图之间的一个桥梁，数据更新和数据的交换，数据层和视图层之间的一个桥梁）的响应式框架。

vue2语法：

components 它要引入的组件

data是定义html里面要使用的变量，也就是定义html里面要使用的变量，它就是去定义变量的，定义好变量之后在html里面去使用，变量发生了变化html会去重新渲染，这就是定义数据的。
computed是去做计算的
watch 当去监听user的数据，这个数据要在return里面是要有的，监听它，如果发生了变化，要去执行什么，这个就是监听
method是去定义一些方法，去使用
mounted是生命周期，挂载完成生命周期的一个阶段

上面就是选项方式的api，用到哪块就去使用哪块。这不是一个固定的写法。

vue3语法：

它在js定义的时候有一个setup，但是几个功能定义是大差不差的，比如watch，变量的定义，方法的定义。

引入Vue.js

参考文档: https://v3.cn.vuejs.org/guide/installation.html

在HTML中以CDN包的形式导入

下载JS文件保存到本地再导入
使用npm安装

npm install @vue/cli@4.5.12

npm install -g @vue/cli

使用官方VueCli脚手架构建项目（不建议新手直接使用）

vue create vue - demo

Hello World 示例 :

简单vue示例如下：

最后需要挂载才能够实现最后的效果，也就是哪个html里面哪个区域去使用这个vue，那么就挂载到哪个区域。正常情况下是挂载到整个body的区域。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
        <!--引入并且使用变量-->
        {{ message }}
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    message: "Hello vue!"
                }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')
    </script>

</body>
</html>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

整个html页面就是一个dom树，每个标签相对的元素都是它的每一个节点。就和上面的例子一样将定义的变量渲染到dom节点里面去。

首先一定要先挂载在最外层，然后才可以去使用vue定义的这些变量，方法。

现在数据和 DOM 已经被建立了关联，所有东西都是 响应式（也就是变量的值发生了变化，页面数据也就发生了变化） 的，可通过下面示例确认 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
        <!--引入并且使用变量-->
      counter:{{ count }}
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    count: 0
                }
            },
            mounted(){
                setInterval(() => {
                    this.count++
                }, 1000);
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>