草庐IT

nodejs_vue

全部标签

Vue使用Element-UI的table组件和后端接口进行数据交互(包含前后端代码)

前言本次用element-ui的table组件,简单案例演示下前后端数据交互。前提声明:如果不知道如何在vue中引入element-ui,可以先看下这篇文章:Vue引入并使用Element-UI组件库的两种方式静态页面首先先写一个静态页面吧,数据都是死的,这也是element-ui的table组件demo:直接把代码复制到组件里面即可。这样一个静态组件就写好了:但是这样只是一个静态的,我们开发中往往需要通过接口进行数据交互的。所以需要调用接口把数据改成动态的动态页面接口支持前提是必须有后端服务器的接口支持,我在本地简单的编写了一个用户列表接口。为了保证接口正常,使用调用测试一下,就是这样的一个

VS Code上搭建Vue开发环境超详细教程

这篇关于在VisualStudioCode上搭建vue开发环境的超详细教程手把手教会你!首先在VisualStudioCode上搭建vue开发环境有几个步骤:1、下载安装node.js2、安装npm3、安装cnpm4、安装vue/cli脚手架5、创建vue项目 6、运行vue项目 1.下载安装node.js地址:node.js官网下载打开 VisualStudioCode打开终端如下图:在终端输入以下命令行检查node.js是否安装成功node-v2.安装npm检查npm是否安装成功npm-v 注:因为在node.js上自带了npm包可以使用,所以这里不需要在另外下载。3.安装cnpm使用命令

Vue面试题总结

1、有没有单独封装过组件?(common,view)答:有封装过,在项目的common文件夹中会存放项目的公用组件即可重用的部分放在common中,如项目的头组件,底部组件,侧边栏组件、导航栏组件等,项目里的view文件夹下存放与路由器绑定的组件。component一般存放重用的小组件,view里存放页面级组件。2、首屏加载白屏怎么进行优化?(答:①采用路由懒加载的方式,当用户访问的时候,再加载相应的模块。    ②webpack开启gzip压缩。    ③使用CDN减小代码体积加快请求速度。    ④项目打包禁止生成map文件。    ⑤使用外链css和js文件。    ⑥使用骨架屏,在首页

Vue 3 中的 setup

前言随着vue3的发布,新增和大改了很多的东西,像响应式的修改、optionApi改为componentsApi、setup语法糖等等,vue3的发布可以说是令人不得不爱❤️,相较于v2我是比较喜欢v3的。言归正传,本文的主人公不是别的,是v3中使用起来超nice的setup语法糖。简介setup是在单文件组件(SFC)中使用组合式API的编译时的一个语法糖。当同时使用SFC与组合式API时该语法是默认推荐。优势:更少的样板内容,更简洁的代码。能够使用纯TypeScript声明props和自定义事件。更好的运行时性能(其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。更好的I

VUE ui工程创建

打开vue界面服务cmd命令,输入vueui,可以直接在浏览器输入:http://localhost:8000/注意:运行的时候不能关闭cmd窗口,不然就停止服务了创建vue工程在仪表盘里点击自定义,添加“运行任务”控件,选择serve,点击运行按钮即可启动工程浏览器输入:http://localhost:8080/即可访问该工程服务

vue2 vue-router引入使用详解

vue2vue-router使用详解1介绍2VueRouter的使用2.1安装2.2项目引入使用2.2.1创建路由文件2.2.2main.ts引入2.2.3App.vue配置2.2.4整体目录结构2.4使用方法2.4.1使用router-view进行页面视图切换2.4.2使用router-link进行页面跳转2.4.3路由重定向2.4.4路由传参2.5.5路由守卫3其他1介绍Vue很适合用来构建单页面应用。对于大多数此类应用,都推荐使用官方支持的VueRouter;在单页面应用(Single-pageapplication)中,客户端的JavaScript可以拦截页面的跳转请求,动态获取新的数

Vue 3.0源码系列之ref、toRef、toRefs

大家好,我是初心,本篇是源码系列之ref、toRef、toRefs本篇也是我坚持原创文章的第04期文章,如有错误,欢迎指正👏🏻在讨论原始值的响应式方案,先看看原始值有哪些吧,目前阶段原始值分别是Boolean,Number,BigInt,String,Symbol,undefined,null前言一、引入ref的概念由于proxy代理目标必须是非原始值,所以我们没有任何手段拦截对原始值的操作,例如:letname='luanshu';//无法拦截对值的修改name='巧君';对于ref是一个函数创建响应式,在Vue2.0中已经规范了架子,采用optionsdata对象形式,所以不需要考虑这个原

如何关闭vue项目中的[eslint]校验

要关闭Vue项目中的ESLint校验,可以按照以下步骤进行操作:打开项目根目录下的.eslintrc.js文件(如果没有该文件,则创建一个新的)。在文件中添加以下代码:module.exports={//其他配置项...rules:{//禁用所有规则'no-unused-vars':'off',//其他规则可以根据需要启用或禁用},};保存文件并关闭。重新启动Vue项目,ESLint校验应该已经关闭了。通过将'no-unused-vars'规则设置为'off',你可以禁用ESLint对未使用变量的校验。如果你还想禁用其他规则,可以在rules对象中添加相应的规则和设置。请注意,关闭ESLint

vue2项目 使用海康视频h5player@2.0版本

一、下载开发包    我们需要去海康官网下载h5player@2.0版本的一些用到的文件二、引入开发包    下载之后我们把下载的文件打开把bin里的文件移动到pubilc文件里,可以自己单独建一个文件放在里面注意:一定要放在vue中的public文件夹中否则会报错三、引用下载的文件    之后我们就需要在pubilc里的index.html文件里引用四、封装h5player的dome    再然后就是我自己百度修改之后封装的代码文件名字h5HkVideo.vueexportdefault{name:"h5HkVideo",props:{preUrl:{type:String,},},data

vue中获取复选框是否被选中的值、如何用JavaScript判断复选框是否被选中

一、方法介绍         第一种方法:通过获取dom元素,getElementById、querySelector、getElementsByName、querySelectorAll(需要遍历,例如:for循环)        第二种是用v-model在input复选框上绑定一个变量,通过双向绑定的特性来判断复选框是否被选中。(推荐使用)二、演示:第一种:被选中输出true,否则为falsedocument.getElementById()html:js:letcheckbox=document.getElementById("myCheckbox");console.log(check