Vue学习
文章平均质量分 74
Vue学习
TizzyGoodhealth
反派角色
展开
-
VUE动态展示表格字段
前言最近叼毛产品让写个需求,动态展示表格字段,要求动态根据用户习惯保存,下次进页面展示以前的,还能再次选择。思考让用户选择展示那些字段保存db进页面先查询db 然后根据table 字段属性过滤平时vue页面写的表格类型字段 columnsData: [ { title: '状态', width: 120, align: 'center',原创 2022-03-02 20:15:12 · 3797 阅读 · 0 评论 -
Linux 安装nodejs
下载右键获取下载地址然后wget https://nodejs.org/dist/v12.13.0/node-v12.13.0-linux-x64.tar.xz解压tar -xvf node-v12.13.0-linux-x64.tar.xz然后 进入 node-v12.13.0-linux-x64 文件里 bin 目录下npm 和 node 命令软连接设置为全局...原创 2019-10-23 14:54:04 · 253 阅读 · 0 评论 -
安装webpack 报错 npm ERR! code EINVALIDTAGNAME
安装webpack报错设置为淘宝镜像后npm config set registry https://registry.npm.taobao.org发现还是报错,npm版本太低,升级npm ,最后重新安装成功。npm install webpack -g...原创 2019-10-05 23:34:51 · 11032 阅读 · 2 评论 -
Vue-cli 脚手架创建以及打包发布项目
文章目录准备环境下载模板运行项目项目结构创建一个子组件根组件入口函数打包发布项目安装静态服务器打包运行准备环境我这边已经准备好node.jsnpmwebpack 打包工具vue-cli vue 脚手架下载模板然后利用vue-cli 脚手架下载vue模板项目输入命令 :vue init webpack 项目名然后选择确认项目名以及项目描述,作者,是否使用路由,测试等等...原创 2019-10-06 18:21:14 · 871 阅读 · 0 评论 -
Vue 之 axios 使用
1.0 推荐使用 vue-resource 库。Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。首先安装npm install axios这里我定一个 组件AjaxTest.vue<template> <div class="hello"><!-- 没有值显示--> <div v-if="!u...原创 2019-10-07 17:01:43 · 116 阅读 · 0 评论 -
Vue 路由管理
文章目录Vue 路由管理官网描述例子:根组件定义两个路由路由管理器入口main函数项目结构结果如图Vue 路由管理官网描述官网 : https://router.vuejs.org/zh/其实说白了就是原先我们是用a标签进行页面跳转使用vue中路由后,在注册组件之后,我们在页面中使用进行配置,用法与标签一样。然后跳转到的页面内容,由标签渲染出来。例子:根组件<!--根组件-...原创 2019-10-07 17:44:39 · 284 阅读 · 0 评论 -
Vue 嵌套路由
文章目录嵌套路由具体实现嵌套路由说白了就是选项卡中又嵌套一个选项卡。可以看看官方的例子具体实现接着路由管理的代码 路由管理我们继续在pages 文件夹下新建两个路由组件 用来嵌套。chilrenRoute1.vue<template><div> chilrenRoute1</div></template><scri...原创 2019-10-08 22:56:22 · 196 阅读 · 0 评论 -
Vue 缓存路由组件
文章目录Vue 缓存路由组件只需加入 <keep-alive> <router-view></router-view> </keep-alive>点击about 并且输入点击home切换回来然后再点击about切换回来内容还在当我们在切换到home时候 发现 about 还在 只是隐藏...原创 2019-10-08 23:15:31 · 204 阅读 · 2 评论 -
Vue 路由组件 页面传递参数
文章目录vue路由传参$route对象props传递布尔模式对象模式函数模式vue路由传参vue路由传参,是页面通信的重要组成部分,而掌握路由传参,用到Vue提供的一个重要对象 $route 。切记$route不是$router$route对象 { //路由组件传递参数 path:'/about/chilrenRoute2/:id', ...原创 2019-10-09 23:16:24 · 1235 阅读 · 2 评论 -
windows安装webpack
windows安装webpack1.创建webpack文件夹2.从cmd进入文件夹,用 npm init 命令进行初始化3.输入 npm install webpack -g –save-dev 命令进行安装安装注意事项:全局安装: npm install webpack -g本地安装: npm install webpack –save-dev报错npm ERR! Unexpec...原创 2019-10-05 19:57:07 · 480 阅读 · 0 评论 -
Vue之自定义指令
自定义指令场景在vue 2.0中,有的情况下,你需要对普通DOM元素进行底层操作,这时候就需要用到自定义指令!除了核心功能默认内置的指令 (v-model 和 v-show) 等,Vue 也允许注册自定义指令。自定义指令又分为全局和局部指令全局指令 //定义全局指令 //el 表示属性所在标签对象 // bind 表示 指令相关信息数据对象 ...原创 2019-10-05 18:59:56 · 189 阅读 · 0 评论 -
vue学习(绑定class、v-bind:style(对象语法、数组语法))
文章目录vue 属性绑定css1 class绑定1.1 字符串绑定1.2 对象绑定 和 数组绑定2 style 绑定vue 属性绑定css .class0{ color: red; font-size: 10px; } .class00{ color: blue; font-size: 70px; ...原创 2019-09-13 21:16:14 · 2350 阅读 · 0 评论 -
vue 条件渲染与列表渲染
文章目录vue 渲染条件渲染v-if 与 v-else渲染 以及 v-show列表渲染遍历对象vue 渲染条件渲染v-if 与 v-else渲染 以及 v-showv-if 与 v-else 有条件的渲染一块内容, v-if 值选择的时候才加载,多余if不会存在内存中。<div id="app1"> <p v-if="isTrue"> isTr...原创 2019-09-14 16:58:14 · 279 阅读 · 1 评论 -
Vue 表单数据
文章目录vue数据绑定绑定input 和 textarea复选框绑定单选框绑定 selectvue数据绑定绑定input 和 textarea 1 可以通过v-model绑定input的输入值,当input的输入值发生变化的时候,intputMessage也会同步发生变化 <input type="text" v-model="intputMessage"> ...原创 2019-09-14 18:05:31 · 279 阅读 · 0 评论 -
vue 事件处理
文章目录vue 事件处理click 事件事件修饰符vue 事件处理click 事件v-on可以简写为@,比如v-on:click=“count += 1"可以简写为 @click。我们可以通过v-on直接绑定javaScript代码到DOM的click事件,v-on:click表示监听DOM的click事件,等同于:οnclick=”…"。但是需要注意,如果我们使用原生的onclick,...原创 2019-09-14 18:58:53 · 172 阅读 · 0 评论 -
Vue 模板方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue 模板语法学习</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.j...原创 2019-07-28 23:41:25 · 200 阅读 · 0 评论 -
vue 动态数据计算的四种方法对比
(1)JavaScript 表达式:方法最为简单,不需要学习新的属性和概念就可以直接使用,但是它只有简单的运用场景(比如,简单的字符串拼接),当应用常见变得复杂的时候(如购物车)这种方式就不在适用了。(2)method 方法:method 方法的形式可以帮助我们应对一个复杂的场景,当页面重新渲染的时候,method 方法每次都会执行。如果页面有大量的渲染动作,并且大量的渲染动作与动态数据计算无关...原创 2019-09-14 19:38:59 · 2701 阅读 · 0 评论 -
vue 表单之checkbox
vue 表单之checkbox<div id="app"> 单个checkbox 如果是复选框 只有一个复选框的时候,会把辞职转换成布尔值类型,如果是true则代表选中 <input type="checkbox" v-model="val" value="val" > {{val}} <br> 多个复选框 用数组...原创 2019-10-02 14:31:11 · 794 阅读 · 0 评论 -
Vue 之过滤器
过滤器文档中描述描述Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示语法在双花括号中{{ message | capitalize }}在 v-bind中< div v-bind:...原创 2019-10-05 15:47:05 · 145 阅读 · 0 评论 -
Vue 环境搭建
vue 环境配置文章目录vue 环境配置1 node.js2 安装淘宝镜像(类似于阿里云的maven中央仓库镜像)3.安装webpack4.接下来就是全局安装vue-cli。时间略长1 node.js安装测试node -v2 安装淘宝镜像(类似于阿里云的maven中央仓库镜像)安装命令:npm install -g cnpm --registry=https://registry.np...原创 2019-09-11 21:23:39 · 136 阅读 · 0 评论