Vue
文章平均质量分 63
vue
richest_qi
这个作者很懒,什么都没留下…
展开
-
富文本前端插件wangeditor
wangEditor是基于Typescript开发的Web富文本编辑器,轻量、简洁、易用、开源免费,先来看下它的基本使用吧。第一步,新建项目vue create demo第二步,改造项目首先,下载安装wangeditor,npm install --save wangeditor;然后,修改App.vue,引入并使用wangeditor<template> <div id="content"></div></template>原创 2021-07-19 11:05:14 · 357 阅读 · 0 评论 -
【Vue Router】动态路由匹配
文章目录新建项目并改造项目第一种:使用 路由参数 时的路由匹配第二种:使用 URL查询参数 时的路由匹配新建项目并改造项目首先使用vue-cli新建一个项目。然后对该项目进行改造,改造后的目录如下。第一种:使用 路由参数 时的路由匹配src\App.vue<template> <div id="nav"> <router-link to="/">首页</router-link> | <router-link to=原创 2021-07-13 16:42:17 · 683 阅读 · 0 评论 -
使用ant-design-vue的树选择组件TreeSelect
HelloWorld.vue<template> <a-tree-select :replace-fields="{children:'children', title:'name', key:'id', value: 'id' }" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" pla.原创 2021-07-09 17:16:24 · 2805 阅读 · 0 评论 -
电子书管理增加分类选项
admin-ebook.vue使用了antd的cascader组件<template> <a-layout> <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }" > <p> <a-form :model="param" layout="inli.原创 2021-07-05 13:15:05 · 252 阅读 · 0 评论 -
使用Vue CLI快速创建vue-router应用
全局安装Vue CLInpm install -g @vue/cli快速创建基于vue-router的应用得到如下目录,改造项目main.js,不做修改import { createApp } from 'vue'import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app')app.vue,添加针对Test页面的路由<template原创 2021-06-28 10:29:29 · 305 阅读 · 0 评论 -
电子书管理功能优化
添加查询功能第一种方式<template> <a-layout> <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }" > <p> <a-space> <a-input v-model:value="searchSt原创 2021-06-22 15:14:25 · 124 阅读 · 0 评论 -
使用ant-design-vue的Form表单
文章目录使用脚手架新建项目安装并导入ant-design-vue,使用Form组件修改main.ts修改App.vue修改Hello.vue启动应用,测试验证使用脚手架新建项目vue create antd-demo所以,我们得到了这么一个项目,如下,安装并导入ant-design-vue,使用Form组件npm install --save ant-design-vue@next修改main.tsimport { createApp } from 'vue';import App原创 2021-06-22 14:55:38 · 2221 阅读 · 1 评论 -
实现新增和删除电子书功能
实现新增电子书功能新增电子书时,需要生成全局唯一id,所以这里用到了雪花算法,关于雪花算法,更多可以访问这里。package com.jepcc.test.service;import com.github.pagehelper.PageHelper;import com.github.pagehelper.PageInfo;import com.jepcc.test.mapper.EbookMapper;import com.jepcc.test.model.Ebook;import co原创 2021-06-17 17:17:49 · 192 阅读 · 0 评论 -
使用ant-design-vue的button组件实现计数器
新建项目本例使用的是vue3。vue create demoCounter组件// Counter.vue<template> <div>{{count}}</div> <a-button type="primary" @click="add" class="btn">加</a-button> <a-button type="primary" @click="sub" class="btn">.原创 2021-06-16 16:47:32 · 1017 阅读 · 0 评论 -
ant-design-vue入门
文章目录Vue和Vue CLI创建项目项目结构集成ant-design-vue安装ant-design-vue使用ant-design-vueVue和Vue CLIVue CLI = Vue.js + 一堆插件创建项目全局安装Vue CLI:npm install -g @vue/cli查看Vue CLI版本:vue --version或vue -V安装Vue CLI时,最好添加版本号,如npm install -g @vue/cli@4.5.13创建一个项目:vue create原创 2021-06-16 14:55:20 · 2321 阅读 · 0 评论 -
微信小程序的wx:for和vue的v-for
写代码的时候,微信小程序的wx:for和vue的v-for,有点搞混了,所以特意举个简单的例子(todos)来区分下。微信小程序index.wxml<view class="list"> <view class="item" wx:for="{{todos}}" wx:key="id"> {{item.id}}-{{item.title}} </view></view>index.wxss.list{ margin:原创 2021-05-31 13:14:55 · 2682 阅读 · 0 评论 -
antd Table组件的使用
:data-source与:dataSource等效,:row-key与rowKey等效。:row-key,表格行key的取值,可以是一个字符串,也可以是一个函数。//rowKey是一个字符串<a-table :columns="columns" :row-key="uid"></a-table>//rowKey是一个函数<a-table :columns="columns" :row-key="record => record.uid"></.原创 2021-05-26 09:43:53 · 4432 阅读 · 2 评论 -
使用ant-design-vue的Table组件
使用Vue CLI新建项目vue create antd-demo下载ant-design-vue,ant-design-vue@2.1.6npm install ant-design-vue@next --save修改main.js,完整引入ant-design-vue所有组件及样式import { createApp } from 'vue'import App from './App.vue'import Antd from "ant-design-vue";impor.原创 2021-05-25 09:59:40 · 6376 阅读 · 0 评论 -
插槽
文章目录备用内容具名插槽作用域插槽参考文章内容同以前的一篇文章,我只是有点忘了。备用内容使用Vue CLI新建项目vue create test在components目录下新增submit-button.vue<template> <button type="submit"> <slot>Submit</slot> </button> </template><script>e原创 2021-05-19 21:59:07 · 209 阅读 · 0 评论 -
组合式API
文章目录使用Vue CLI新建项目demo启动项目demo改造项目public目录下新增data.jsonsrc目录下新增api目录,api目录下新增repositories.jscomponents目录下删除HelloWorld.vue,新增RepositoriesList.vue修改App.vue启动应用组合式API参考文章使用Vue CLI新建项目demoD:\VueProjects>vue create demoVue CLI v4.5.13? Please pick a prese原创 2021-05-18 10:11:29 · 2318 阅读 · 0 评论 -
【vue+vue-router】路径参数实现动态路由
helloworld<!-- index.html --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <sty原创 2020-10-29 21:16:07 · 1386 阅读 · 0 评论 -
【vue+vue-router】上手示例
文章目录helloworldindex.htmlrouter-linkrouter-viewindex.js安装路由功能定义组件定义路由创建router实例创建vue实例并注入router实例helloworldnpm install --save-dev webpack webpack-clinpm install --save-dev html-webpack-plugin clean-webpack-plugin webpack-dev-servernpm install --save-dev原创 2020-10-28 21:28:54 · 232 阅读 · 0 评论 -
【vue】组件之访问
文章目录访问Vue实例,this访问根实例,this.$root访问父实例,this.$parent访问子实例或子元素,this.$refs访问子实例访问子元素依赖注入,provide+inject访问Vue实例,this<!-- index.html --><body> <div id="root"> <div>{{a}}</div> <div>{{b}}</div>原创 2020-09-28 11:42:46 · 392 阅读 · 0 评论 -
【vue】组件之动态与异步
文章目录动态组件keep-alive异步组件动态导入动态组件<component v-bind:is=""></component>实现动态组件。<body> <div id="root"> <component v-bind:is="currentId"></component> <button v-on:click="handleClick">toggle</butto原创 2020-09-27 11:47:57 · 167 阅读 · 0 评论 -
【webpack】去console
要去除最终包中的一堆console,使用插件babel-plugin-transform-remove-console安装插件npm install --save-dev babel-plugin-transform-remove-console使用插件plugins:[ ["transform-remove-console",{ "exclude":["log"] }] ]仅保留console.log,去除其他所有console。const path = require("path");原创 2020-09-27 10:48:03 · 1896 阅读 · 0 评论 -
【vue】slot
slot作默认用<body> <div id="root"> <save-button></save-button> </div></body>import Vue from "vue";Vue.component("submit-button",{ template:'<div>\ <button>\ <s原创 2020-09-26 12:11:10 · 559 阅读 · 0 评论 -
【vue】自定义事件
v-model自定义组件<body> <div id="root"> <base-checkbox v-model="isDone"> </div></body>import Vue from "vue";Vue.component("base-checkbox",{ model:{ prop:"checked", event:"change" },原创 2020-09-22 16:57:00 · 199 阅读 · 0 评论 -
【vue】上手vue
安装完vue-loader后,必须,npm installl --save-dev vue-template-compiler在webpack配置文件的plugins字段添加VueLoaderPluginconst {VueLoaderPlugin} = require("vue-loader");module.exports = { plugins:[ new VueLoaderPlugin() ]}webpack打包时,默认加载的是vue/dist/vue.runtime.es原创 2020-09-16 22:15:08 · 183 阅读 · 0 评论 -
【vuex】上手vuex
安装vue-loader后,有三个必须:必须安装vue-template-compiler必须安装VueLoaderPlugin,并添加到webpack配置文件的plugins字段plugins:[ new VueLoaderPlugin()]不使用vuex<template> <div> <h4 v-bind:class='["title"]'>{{title}}</h4> <span原创 2020-09-25 20:45:46 · 90 阅读 · 0 评论 -
【vue】vue响应式系统不能检测数组变化导致的坑及其解法
在一个组件中,如果某个数据可以通过data推导出来,那么该数据就没有必要放到data里,这时可以使用computed,即计算属性,就像这样:<template> <div> <p>{{message}}</p> <p>{{reversedMessage}}</p> </div></template><script>export default原创 2020-08-11 22:06:57 · 561 阅读 · 0 评论 -
【vue】props实现父子组件间通信
props可以是数组,也可以是对象//index.jsimport Vue from "vue";import App from "./app.vue";const vm = new Vue({ render:h => h(App)}).$mount('#root');//app.vue<template> <!-- <BaseInput label-name="用户名"/> --> <BaseInpu原创 2020-08-10 22:07:06 · 734 阅读 · 0 评论 -
【vue】生命周期函数
beforeCreatecreatedVue实例已经创建完成,但尚未挂载,vm.$el不可访问beforeMountrendermountedVue实例已挂载,可访问vm.$elbeforeUpdateupdatedbeforeDestroydestroyedimport Vue from "vue";import Helloworld from "./src/helloworld.vue";const data = { a:"hello", b:"world.原创 2020-08-09 22:24:32 · 82 阅读 · 0 评论 -
【vue】v-html
v-html,会更新元素的innerHTML属性。<template> <p v-html="htmlFragment"></p></template><script>const data = { htmlFragment:"<span style='color:red'>hello world</span>"}export default { data(){ retur原创 2020-08-09 22:16:39 · 204 阅读 · 0 评论 -
【vue】v-once
v-once,只会渲染组件一次,以后不论数据变化与否,都雷打不动地保持不变,即静态数据。<template> <div v-once>{{msg}}</div> <!-- <div >{{msg}}</div> --></template><script>const data = { msg:"hello world"}export default { data(){原创 2020-08-09 22:11:57 · 158 阅读 · 0 评论 -
【vue】v-model
//index.jsimport Vue from "vue";import App from "./app.vue";const vm = new Vue({ render:h => h(App)}).$mount('#root');//app.vue<template> <div> <label for="username">用户名:</label> <input type="te原创 2020-08-09 22:07:09 · 341 阅读 · 0 评论 -
【vue】事件
事件原创 2020-08-06 21:17:09 · 189 阅读 · 0 评论 -
【vue】v-show
//index.jsimport Vue from "vue";import Helloworld from "./helloworld.vue";const vm = new Vue({ render:createElement => createElement(Helloworld)}).$mount('#root');//helloworld.vue<template> <div v-show='isShow'>hello world<原创 2020-08-06 20:55:00 · 114 阅读 · 0 评论 -
【vue】v-for
文章目录v-for遍历数组在模板中使用v-for使用render函数v-for遍历对象在模板中使用v-for使用render函数v-for遍历一个整数在模板中使用v-for使用render函数v-for 包裹多个元素在模板中使用v-for使用render函数v-for实例:Todosv-for遍历数组在模板中使用v-forv-for="item in items,同v-for="item of items"。//helloworld.vue<template> <ul&原创 2020-08-05 22:42:53 · 269 阅读 · 0 评论 -
【vue】v-if
文章目录v-if模板中使用v-if使用render函数v-if 包裹多个元素模板里使用v-if使用render函数v-if/v-else模板里使用v-if/v-else使用render函数v-if/v-else-if/v-else模板里使用 v-if/v-else-if/v-else使用render函数v-if 可能存在的坑复用已有元素使用key避免元素服用//index.jsimport Vue from "vue";import Helloworld from "./helloworld.vue"原创 2020-08-04 22:18:28 · 461 阅读 · 0 评论 -
【vue】render函数实现组件
不论全局组件、局部组件还是单文件组件,都是使用模板创建HTML来实现组件。//index.jsimport Vue from "vue";import App from "./components/app.vue";const vm = new Vue({ render:createElement => createElement(App)}).$mount('#root');//app.vue<template><div> <Acho原创 2020-08-01 23:09:38 · 958 阅读 · 0 评论 -
安装Vue Devtools extension
本安装方法来自博主KaiSarH克隆 vue-devtools仓拉取的分支默认是dev分支,现切换至master分支:git switch master安装依赖:npm install构建:npm run buildchrome里加载已解压扩展程序2022年1月20日更新:当前vue-devtools版本已经到了3,以上安装方法不奏效。如果依然想使用2版本,可参考网友文章:https://blog.csdn.net/sinat_34849163/article/原创 2020-07-31 09:57:13 · 1415 阅读 · 0 评论 -
【vue】模板实现全局/局部/单文件组件
全局组件//index.jsimport Vue from "vue";import App from "./app.vue";Vue.component("BaseInput",{ template: '<div>\ <label for="usename">用户名:</label>\ <input type="text" id="usename" v-model="name"/> \ <div>原创 2020-07-28 21:00:20 · 445 阅读 · 0 评论 -
【vue】组件
//index.html<body> <div id="root"></div>//index.jsimport Vue from "vue";import Count from "./count.vue";const vm = new Vue({ render:h => h(Count)}).$mount('#root');//count.vue<template> <div>原创 2020-07-27 22:18:41 · 100 阅读 · 0 评论 -
【vue】:class和:style
:class:class='js表达式'表达式是一个对象该对象内联在模板里,:class="{key:value}"key是类名, value是布尔值。value为true则有该类,false则没有该类<template> <p :class="{smallFont:isSmall}">have a nice day</p></template><script>export default { data(){原创 2020-07-16 22:31:29 · 761 阅读 · 0 评论 -
【vue】方法、计算属性、数据监听
方法(methods)<template> <div> <p>原始数据:{{message}}"</p> <p>反转后的数据:"{{reverseMessage()}}"</p> </div></template><script>export default { data(){ return { mes原创 2020-07-11 22:35:53 · 406 阅读 · 0 评论