分布式电商项目十四：Vue前端框架简介及使用

最新推荐文章于 2024-06-23 15:31:16 发布

猛肝自然强

最新推荐文章于 2024-06-23 15:31:16 发布

阅读量1.1k

点赞数

分类专栏：分布式电商项目mall 文章标签： vue javascript js

本文链接：https://blog.csdn.net/LastYHM/article/details/106456157

版权

分布式电商项目mall 专栏收录该内容

50 篇文章 9 订阅

订阅专栏

Vue前端框架简介及使用

就像是后端我们使用springboot来进行开发一样，前端需要使用Vue框架进行开发。由于前端不是我们的主要内容，所以只介绍简单的使用内容。具体更深的内容请参考Vue的官方网站。目前使用的较多的是Vue2，所以我们也选用这个版本。

Vue的简单使用

在使用之前，我们可以先装一个Vue2语法提示的插件：Vue 2 Snippets
在这里插入图片描述
在插件的界面直接点击安装即可。
首先我们在VScode中新创建一个vue2的文件夹来使用：

导入Vue
首先需要导入我们要使用的Vue框架，由于我们已经使用过npm了，所以我们之间用npm来导入Vue，官网也有相关的说明：
在这里插入图片描述
只需要在控制台输入npm install vue指令即可。
在输入指令之前，我们首先要初始化npm环境搭建。
在终端输入npm init -y：

PS D:\vue2> npm init -y
Wrote to D:\vue2\package.json:

{
  "name": "vue2",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

出现上面的信息表示初始化完成，之后输入npm install vue指令即可。

PS D:\vue2> npm install vue
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN vue2@1.0.0 No description
npm WARN vue2@1.0.0 No repository field.

+ vue@2.6.11
added 1 package from 1 contributor in 2s
PS D:\vue2>

之后我们创建一个index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <script src="./node_modules/vue/dist/vue.js"></script>
</body>

</html>

代码<script src="./node_modules/vue/dist/vue.js"></script>就是引入vue的意思。
接下来我们进行一个简单的使用示例：

    <div id="app">
        <h1> {{name}} ,非常帅</h1>
    </div>
    <script>
        //1、vue声明式渲染
        let vm = new Vue({
            el: "#app",//绑定元素
            data: {  //封装数据
                name: "张三"
            },
     });
    </script>

声明一个变量vm，里面有name叫做张三。之后用{{}}的形式调用张三的name，绑定使用id=“app” 。
打开页面：
在这里插入图片描述
Vue支持动态调整内容，我们打开控制台,输入vm.name=“zhaosi”，就会看到页面内容实时进行了变更：

双向绑定功能

Vue的双向绑定功能意味着不仅通过控制台改变数据会改变页面的显示，页面输入的内容也能同样影响到页面的显示，修改上面的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消</button>
        <h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>
    
    </div>

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

    <script>
        //1、vue声明式渲染
        let vm = new Vue({
            el: "#app",//绑定元素
            data: {  //封装数据
                name: "张三",
                num: 1
            },

            methods:{  //封装方法
                cancle(){
                    this.num -- ;
                },
                hello(){
                    return "1"
                }
            }
        });

        //2、双向绑定,模型变化，视图变化。反之亦然。

        //3、事件处理

        //v-xx：指令
		// 整理内容：
        //1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
        //2、指令来简化对dom的一些操作。
        //3、声明方法来做更复杂的操作。methods里面可以封装方法。

    </script>
</body>

</html>

这段代码封装了一个点赞的方法，同时绑定了num作为绑定数，测试页面如下：
在这里插入图片描述
不论是修改后台数据，还是通过方法来前端调用方法，都能够实时改变视图和后端的数据。
Vue的实例封装了非常多的属性，目前我们用到的有：
1、el：绑定元素
2、data：封装数据
3、method：封装方法
这三个也是我们之后使用最多的三个属性。

tips在控制台上，我们可以看到他有一个提示
Live reload enabled.
vue.js:9055 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
意思是到这个github网站可以下载一个vue的调式工具装到chrome浏览器上。
可以选择自己到github上克隆之后进行编译添加。
也可以使用下面链接
链接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg 密码:1hsv
这个是编译好的软件，下载解压之后，点击chrome浏览器的更多工具，选择扩展程序进入界面，打开开发者模式之后，点击加载已加压扩展程序，把解压的文件添加进去即可。
在这里插入图片描述
再次进入刚才的界面，我们就能看到控制台多了一个vue的选项，进入之后就能更方便的操作数据。