【谷粒学院】vue、axios、element-ui、node.js（44~58）

已于 2023-03-08 14:54:59 修改
阅读量600 收藏
点赞数
分类专栏： # 二十三、谷粒学院 文章标签： vue.js node.js ui
于 2023-02-26 11:26:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46707734/article/details/129218556
版权

44.前端技术-vue入门

🧨Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

在JavaWeb阶段：学过JSP、学过JSTL、学过EL表达式，用这些，比如用JavaScript能发送AJAX请求得到数据，在页面中用JSTL然后forEach遍历，然后用EL表达式取值，最终数据可以显示，要用到很多技术。
用vue技术之后：这些技术都可以不用，vue里面就包含了这些东西，可以理解为之前的那些功能用vue都可以做到，但vue的做法比之前更加方便，更加简单。

官方网站：https://cn.vuejs.org
vue.js下载：https://v2.cn.vuejs.org/v2/guide/installation.html
在这里插入图片描述

属性和指令

属性作用
el:绑定vue作用的范围
data：定义页面中显示的模型数据
methods：定义多个方法，定义事件调用的方法
指令作用简写
v-bind单向数据绑定，获取数据:
v-model双向绑定，获取和修改
v-on事件处理@
v-on:click处理单击事件@:click
.prevent 修饰符阻止原来调用的方法改为调用指定的方法
v-if条件指令
v-else条件指令
v-show条件指令
v-for列表循环指令

入门创建步骤
1、创建html页面，使用vscode快捷键生成html代码
2、引入vue的js文件vue.min.js，类似于jQuery
3、在html页面创建div标签，div添加id属性
4、编写vue代码，固定的结构

在这里插入图片描述

<!-- id标识vue作用的范围 -->
<div id="app">
    <!-- {{}} 插值表达式，绑定vue中的data数据 -->
    {{ message }}
</div>
<script src="vue.min.js">//2、引入js文件</script>
<script>

    // 创建一个vue对象
    new Vue({
        el: '#app',//绑定vue作用的范围
        data: {//定义页面中显示的模型数据
            message: 'Hello Vue!'
        }
    })
</script>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

45.前端技术-vscode抽取代码片段

在vs code中创建代码片段：
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：
vue-html.code-snippets

注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格

{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"<!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\">",
			"",
			"    </div>",
			"    <script src=\"vue.min.js\"></script>",
			"    <script>",
			"        new Vue({",
			"            el: '#app',",
			"            data: {",
			"                $1",
			"            }",
			"        })",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

46.前端技术-vue指令-单向和双向绑定

🎃指令：前缀为 v-的是指令

数据渲染的方式：
1、插值表达式{{}}
2、v-bind：单向数据绑定，简写为冒号（:）
3、v-model：双向数据绑定

🎈单向绑定：用来获取
v-bind指令：单向数据绑定。这个指令一般用在标签属性里面，获取值。它的简写的形式就是一个冒号（:）

<!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">
        <!-- v-bind指令
            单向数据绑定
            这个指令一般用在标签属性里面，获取值
        -->
        <h1 v-bind:title="message">
            {{content}}
        </h1>

        <!--简写方式-->
        <h2 :title="message"><!--title的作用是鼠标放上去之后显示值-->
                {{content}}
        </h2>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载于 ' + new Date().toLocaleString()//获取当前时间
            }
        })
    </script>
</body>

</html>

🎁双向绑定：v-model
单向绑定只能用来获取，双向绑定可以让值随着输入而改变
在这里插入图片描述

<!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-bind:value="searchMap.keyWord"/><!--取值1-->
        
        <!--双向绑定，修改的位置-->
        <input type="text" v-model="searchMap.keyWord"/><!--既可以取值，修改的时候取值1和2也会跟着改变-->

        <p>{{searchMap.keyWord}}</p><!--取值2-->

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

        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: '尚硅谷'
                }
            }
        })
    </script>
</body>

</html>

47.前端技术-vue绑定事件

v-on ：使用 v-on 进行事件处理

v-on:click 表示处理鼠标点击事件，后面跟上调用的方法。事件调用的方法定义在 vue 对象声明的 methods 节点中。
v-on 指令的简写形式 @

需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息

<!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">
        <!--vue绑定事件，click鼠标点击事件-->
        <button v-on:click="search()">查询</button>

        <!--vue绑定事件简写-->
        <button @click="search()">查询1</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: '尚硅谷'
                },
                //查询结果
                result: {}
            },
            methods:{//定义多个方法，定义单击事件调用的方法
                search() {
                    console.log('search....')
                },
                f1() {
                    console.log('f1...')
                }
            }
        })
    </script>
</body>

</html>

48.前端技术-vue修饰符和条件指令

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：即阻止事件原本的默认行为

<!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">
    	<!-- v-on:submit.prevent	阻止原来的submit改为调用onSubmit-->
        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.username"/>
            <button type="submit">保存</button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                onSubmit() {
                    if (this.user.username) {
                        console.log('提交表单')
                    } else {
                        alert('请输入用户名')
                    }
                }
            }
        })
    </script>
</body>

</html>

v-if
选中尚硅谷，不选中谷粒学院

<!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">
    	<!--checkbox复选框，v-model和ok双向绑定。是否同意默认ok是否没选中false -->
        <input type="checkbox" v-model="ok"/>是否同意
                
        <!--条件指令 v-if  v-else -->
        <h1 v-if="ok">尚硅谷</h1><!--选中 -->
        <h1 v-else>谷粒学院</h1><!--没选中 -->
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false//默认false
            }
        })
    </script>
</body>

</html>

v-show：条件指令
使用v-show完成和上面相同的功能

<!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

49.前端技术-vue指令-循环指令

例1：简单的列表渲染
index代表每次循环的索引值，n是从1开始，index从0开始，index是实际值-1

<!-- 1、简单的列表渲染 -->
<ul>
	<!-- in是固定的，10代表遍历数字10，n代表每次循环的值赋给n -->
    <li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
    <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
    <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>

例2：遍历数据列表

<!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">
        <ul>
            <li v-for="n in 10"> {{n}} </li>
        </ul>
        <ol>
            <li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
        </ol>

        <hr/>
        <table border="1">
        	<!-- 遍历userList数组，每次的值赋值给user -->
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                        { id: 1, username: 'helen', age: 18 },
                        { id: 2, username: 'peter', age: 28 },
                        { id: 3, username: 'andy', age: 38 }
                    ]
            }
        })
    </script>
</body>

</html>

50.前端技术-vue组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 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>
    <div id="app">
        <Navbar></Navbar><!-- 相当于直接直接输入组件Navbar的template内容 -->
    </div>
    
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //定义vue使用的组件
            components: {
                //组件的名字
                'Navbar': {
                    //组件的内容，template固定
                    template: '<ul><li>首页</li><li>学员管理</li></ul>'
                }
            }
        })
    </script>
</body>

</html>

全局组件：需要引入全局组件js文件才能使用
定义全局组件：components/Navbar.js

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

<!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">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="components/Navbar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

51.前端技术-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">
           hello
           
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
            },
            created() {
                debugger
                //在页面渲染之前执行
                console.log('created....')
            },
            mounted() {
                debugger
                //在页面渲染之后执行
                console.log('mounted....')
            }
        })
    </script>
</body>

</html>

52.前端技术-vue路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router.min.js 库

操作步骤
1、在vue.min.js文件之后引入vue-router.min.js
2、router-link设置导航
3、router-view路由导航之后内容显示的位置
4、编写js文件
5、定义（路由）组件：显示的内容，可以从其他文件 import 进来
6、定义路由router：对应router-link设置导航
7、创建 router 实例，然后传 routes配置
8、创建和挂载根实例。从而让整个应用都有路由功能

<!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">
            <h1>Hello App!</h1>
            <p>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link to="/">首页</router-link>
                <router-link to="/student">会员管理</router-link>
                <router-link to="/teacher">讲师管理</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
    </div>

    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>

    <script>
            // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    const app = new Vue({
        el: '#app',
        router
    })
    </script>
</body>

</html>

53.项目第四天内容介绍

54.前端技术-axios使用（1）

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端

在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

在这里插入图片描述

<!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">
        <!--把userList数组里面数据显示 使用v-for指令 -->
        <!--遍历之后的对象 in 含数据的List的名字 -->
        <div v-for="user in userList">
            {{user.name}} -- {{user.age}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定的结构
            data: { //在data定义变量和初始值
                //定义变量，值空数组，为了后面赋值方便
                userList:[]
            },
            created() { //页面渲染之前执行
                //调用下面定义的方法
                this.getUserList()
            },
            methods:{//编写具体的方法
            
                //创建方法 查询所有用户数据
                getUserList() {
                
                    //使用axios发送ajax请求
                    //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                    axios.get("data.json")//这里是模拟的
                        .then(response =>{//请求成功执行then方法
                            //response就是请求之后返回数据，名字随便写
                            //console.log(response)
                            //通过response获取具体数据，赋值给定义空数组
                            this.userList = response.data.data.items
                            console.log(this.userList)
                        }) 
                        .catch(error =>{
                        }) //请求失败执行catch方法
                }
            }
        })
    </script>
</body>

</html>

55.前端技术-axios使用（2）

显示数据

<div id="app">
    <table border="1">
        <tr>
            <td>id</td>
            <td>姓名</td>
        </tr>
        <tr v-for="item in memberList">
            <td>{{item.memberId}}</td>
            <td>{{item.nickname}}</td>
        </td>
    </tr>
</table>
</div>

56.前端技术-element-ui介绍

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建。Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

说的简单点可以快速写页面的各种效果，不需要写CSS样式

官网：https://element.eleme.cn/#/zh-CN

在这里插入图片描述
在这里插入图片描述

57.前端技术-nodejs介绍

什么是Node.js
简单的说 Node.js 就是运行在服务端的 JavaScript。
是JavaScript的运行环境，用于执行JavaScript代码环境
不需要浏览器，直接使用node.js运行JavaScript代码
模拟服务器效果，比如说tomcat

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

Node.js有什么用
如果你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。
Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。

当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。

官网：https://nodejs.org/en/
中文网：http://nodejs.cn/
LTS：长期支持版本
Current：最新版请添加图片描述
查看版本，能查看到安装成功

node -v

👓快速入门
创建 01-控制台程序.js

console.log('Hello Node.js')

打开命令行终端：Ctrl + Shift + y
进入到程序所在的目录，输入

node 01-控制台程序.js

浏览器的内核包括两部分核心：
DOM渲染引擎；
js解析器（js引擎）
js运行在浏览器中的内核中的js引擎内部

Node.js是脱离浏览器环境运行的JavaScript程序，基于V8 引擎（Chrome 的 JavaScript的引擎）

🥽服务器端应用开发（了解）
创建 02-server-app.js

const http = require('http');
http.createServer(function (request, response) {
    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 发送响应数据 "Hello World"
    response.end('Hello Server');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

运行服务器程序

node 02-server-app.js

服务器启动成功后，在浏览器中输入：http://localhost:8888/ 查看webserver成功运行，并输出html页面
停止服务：ctrl + c

58.前端技术-vscode使用nodejs问题说明

每次cmd窗口操作比较麻烦，可以直接在vscode中操作

vscode文件的文件夹，右键>在终端中打开>右下角选择默认终端，没什么区别，一般选择cmd

打开终端什么都不显示
需要点两次回车才会显示

vscode输入node -v没有版本号
1.关闭vscode，找到vscode运行文件.exe
2.右键属性>以管理员身份运行
3.进行上面操作之后还没有出现版本
4.确定node.js是否安装成功
5.使用cmd查看是否能看到版本号，确定成功了把电脑重启

Hvitur
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【谷粒学院项目开发15】node.js入门
taroriceball的博客
12-10 216
运行java需要安装jdk环境 node.js是JavaScript的运行环境。不需要浏览器，直接用node.js运行JavaScript代码。 node.js还能模拟服务器效果，比如tomcat。 1.安装node.js 官网：https://nodejs.org/zh-cn/ 安装成功！ 2.使用node.js执行JavaScript代码 2.1创建一个js文件 2.2找到文件路径，用cmd打开 2.3输入命令 node js文件名，查看效果 3.使用node.js模拟服务器 3.1新建一个js
【谷粒学院项目开发11】抽取Vue代码片段
taroriceball的博客
12-09 287
设置 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets 在里面把老师给的模板复制粘贴进去 测试 新建一个文件，输入vuehtm会有自动提示 就像一个模板一样????我们每次新建一个文件时，不用做重复的设置工作啦！ ...
【谷粒学院】009-Node.js简介、安装、简单使用
訾博（ZiBo）的博客
12-09 346
目录 一、简介 1、什么是Node.js 2、Node.js有什么用 二、安装 1、下载 2、配置环境变量 参考文章： 三、简单使用 1、执行JS文件 JS代码： 执行： 浏览器的内核包括两部分核心： 2、服务器端应用开发（了解） JS代码： 执行： 3、使用VSCode打开CMD窗口 图示： 效果： 一、简介 1、什么是Node.js 简单的说 Node.js 就是运行在服务端的 JavaScript； Node.js是一个事件驱动I/O服务端JavaScrip
谷粒学院（五）前端知识 nodejs | npm | babel | 模块化 | webpack
星海IT学习之路
10-02 872
一、nodejs 1、Node.js是什么 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。 2、安装 1、下载 官网：https://nodejs.org/en/ 中文网：http://nodejs.cn/ 2、安装 一路下一步。 3、查看版本 node -v 3、快速入门 1）使用nodejs执行JavaScript代码 创建 0
【谷粒学院项目开发14】axios入门
taroriceball的博客
12-10 191
axios是独立的项目，不是vue里面的一部分。使用axios和vue一起使用，实现ajax操作 1.创建html页面，引入js文件，包含两个js文件：vue和axios 2.编写axios代码 2.1创建json文件，创建数据 2.2使用axios发送ajax请求，请求文件，得到数据，在页面中显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
html 引入 vue.js axios element-ui
11-05
本篇文章将详细介绍如何在HTML中引入Vue.js、Axios以及Element-UI这三个流行的JavaScript库，以构建一个简单的单页面应用。 首先，Vue.js是一个轻量级的渐进式JavaScript框架，它允许开发者以声明式的方式编写代码...
element-ui 2.15.9下载到本地资源最新版本压缩包（附element-ui本地引用方法）
06-04
<script src="/my/html/element-ui/lib/index.js"> <link rel="stylesheet" href="/my/html/element-ui/lib/theme-chalk/index.css"> <el-row> <el-col :span="24"><div class="myclass"></div></el-col> </el...
Element-ui 2.15.9版本
07-09
Element-ui 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可复用且响应式的用户界面。2.15.9 版本是 Element-ui 的一个稳定版本，可能包含了错误修复、性能优化以及新功能的添加...
element-ui-2.15.6.zip
02-23
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，用于构建优雅的前端应用。在给定的 "element-ui-2.15.6.zip" 文件中，我们可以找到构建和运行 Element UI 应用程序所需的所有资源...
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip
10-30
Element-ui是基于Vue.js的一套高质量UI组件库，由饿了么团队开发。它提供了一系列美观、实用的组件，如按钮、表格、下拉菜单、导航栏等，大大简化了前端开发过程，使得我们可以快速搭建出符合现代设计标准的界面。 ...
【项目】小帽学堂（四）
柠檬小帽的博客 - 计算机全栈体系
01-18 514
前端技术 搭建项目前端页面环境
谷粒学院p68 vue-element-admin 安装失败
zsxfa的博客
12-30 736
一开始导入vue-element-admin npm install 的时候一直失败，然后导入的是vue-admin-1010（已经下载好依赖了） 运行报错如下： Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (
谷粒学院项目报错无法安装node-sass问题
qq_33830918的博客
08-07 238
问题解决
谷粒学苑_第三天
like_wen的博客
09-05 244
谷粒学苑_第三天 前端只粗略的记一下笔记官网下载地址:https://code.visualstudio.com/Download镜像下载地址(快一些):自己安,基本一直next就行搜索插件进行汉化加其他的插件:Live Server:内置服务器,模拟tomcatVeturvue-helper前端代码写
谷粒商城基础篇——Day04
wu6426的博客
05-02 1336
前端开发基础知识&快速入门
项目 谷粒学院Day10-12
weixin_40757847的博客
07-11 405
Day 10（07.08） 删除视频接口 后端 controller //根据视频id删除阿里云视频 @DeleteMapping("removeAlyVideo/{id}") public R removeAlyVideo(@PathVariable String id){ try{ //初始化对象 DefaultAcsClient client = InitVodClient.initVodClient(ConstantVodUtils.ACCESS_KEY_ID
谷粒学院项目总结(持续更新)
m0_53328194的博客
04-21 1056
谷粒学院项目总结
Vue3+Element-plus的表单重置
最新发布
weixin_49352307的博客
07-04 207
1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop。作用:简化代码,重置表单数据。
Vue前端打包
weixin_63680330的博客
07-04 192
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
html 引入 vue.js axios element-ui
06-07
-- 引入 Vue.js 和 Element-UI 的 CSS 和 JavaScript 文件 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hvitur

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值