vue框架
关注
分享
扫一扫
vue笔记
st紫月
这个人很懒，只想把你留下
展开
-
vue3 常用的知识点
watch函数：侦听一个或者多个数据的变化，数据变化时执行的函数。两个额外的参数1.immediate （立即触发） 2.deep（深度监听）setup:容许在script当中书写组合式API 并且vue3的template不再要求唯一的根元素。可以直接在script标签中定义变量或者函数，然后直接在template当中使用。computed计算属性。原创 2024-07-25 08:46:11 · 486 阅读 · 0 评论 -
vue懒加载图片
vue懒加载原创 2023-05-05 17:09:11 · 283 阅读 · 1 评论 -
vue实现对数据进行升序降序排列
【代码】vue实现对数据进行升序降序排列。原创 2023-04-27 12:33:54 · 818 阅读 · 0 评论 -
vue实现数据分页功能
【代码】vue实现数据分页功能。原创 2023-04-27 01:16:02 · 618 阅读 · 0 评论 -
vue 通过多组复选框来过滤数据
【代码】vue 通过多组复选框来过滤数据。原创 2023-07-16 17:32:46 · 1773 阅读 · 0 评论 -
用vuex数据共享实现购物车功能
用Springboot查询这个数据表并返回数据。商品列表 ShopList.vue。购物车列表：ShopCarList。先在数据库中创建一个MySQL表。购物车：ShopCar。App.vue根组件。商品shop.vue。原创 2023-04-26 23:04:51 · 398 阅读 · 0 评论 -
在vue3.0中elementUI表格中渲染button按钮
row是这一行的数据对象。原创 2023-04-24 01:25:54 · 365 阅读 · 0 评论 -
Vite项目环境的搭建
Vite项目环境的搭建原创 2023-03-16 17:06:46 · 750 阅读 · 0 评论 -
vue组件的传值方式
vue组件传值的方式原创 2023-03-11 16:47:57 · 209 阅读 · 0 评论 -
webpack中devServer节点的使用
在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，可以实现打包后自动打开html页面。原创 2022-11-30 14:01:08 · 317 阅读 · 0 评论 -
Vue路由导航守卫控制访问权限
import Vue from 'vue'import VueRouter from 'vue-router'import Login from '../components/Login.vue'Vue.use(VueRouter)const routes = [ { path:'/', redirect:'/login' }, { path:'/login', component:Login }]const router = new VueRoute原创 2022-06-01 10:50:29 · 350 阅读 · 1 评论 -
Vue项目常用的开发依赖插件的简单介绍：
1.webpack-merge作用：把公共的代码抽离出去，在需要的地方引入安装：npm install webpack-merge -D配置（手动指定config） package.json："scripts": { "build": "webpack --config webpack.prod.js", "dev": "webpack-dev-server --open --config wbpack.dev.js"}新建文件 ：webpack.common.js ：公原创 2021-11-22 23:06:04 · 1727 阅读 · 0 评论 -
用Vue前端路由实现tab栏切换
新建一个app.vue文件，写入下方代码<template> <div class="container"> <div class="tab"> <router-link to="/a" name='a'>管理1</router-link><br> <router-link to="/b" name='b'>管理2</router-link><br> <router-l原创 2021-10-20 20:32:39 · 4276 阅读 · 0 评论 -
在Vue项目中集成富文本编辑器
先用vue可视化图形界面创建一个vue项目安装依赖：npm install mavon-editor --save在main.js当中输入代码：import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'// useVue.use(mavonEditor)新建一个Test.vue：<template> <div id="main"> <mavon-edi原创 2022-03-28 16:30:09 · 1082 阅读 · 0 评论 -
vue的ref和$refs的使用方法
<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button></div><script>new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value ="22"; //this.$refs..原创 2022-03-07 11:11:00 · 156 阅读 · 0 评论 -
vue-cli的各个配置文件的详细介绍
1.dev-server.js// dev-server.js// 调用check-versions.js 模块，检查版本node和npm的版本require('./check-versions')()// 获取配置var config = require('../config')// 如果Node的环境变量中没有设置当前的环境(NODE_ENV), 则使用config中配置的环境作为当前环境if (!process.env.NODE_ENV) { process.env.NODE_EN原创 2021-11-23 00:01:22 · 1210 阅读 · 0 评论 -
HtmlWebpackPlugin的使用
HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。安装npm install --save-dev html-webpack-plugin基本用法该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 we转载 2021-11-22 23:00:06 · 546 阅读 · 0 评论 -
改变Vue的data数组数据，实时响应到页面当中
1.如果直接改变data当中的变量的值，页面会实时刷新，如果更新数组的话页面不会实时刷新，需要用到一个函数Vue.set(this.person,0,{msg:‘hh’})//this.$set(this.person,0,{msg:‘hh’})这两个函数是一样的，第一个参数是需要改变的data数组，第二个参数是这个数组对应的下标，第三个数据是需要替换的值如果想要替换一整个数组，就用循环一个一个替换就行<!DOCTYPE html><html> <head原创 2021-11-16 00:52:34 · 3154 阅读 · 0 评论 -
Vue预加载和懒加载的使用方法
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载 则会增加服务器前端压力。预加载：简单理解：就是在使用该图片资源前，先加载到本地来，真正到使用时，直接从本地请求数据就行了。 var arr = [ '../picture/1.jpg', '../picture/2.jp原创 2021-10-23 18:23:55 · 5060 阅读 · 0 评论 -
Uncaught TypeError: Cannot set property ‘onclick‘ of null
在使用vue时报错Uncaught TypeError: Cannot set property ‘onclick’ of null，原因是因为vue项目是有加载顺序的，当页面还没加载完成时js代码就已经执行了，因为获取不到而报错，只需要把代码写在onload函数当中就行window.onload = function(){ var btn = document.querySelector('#btn'); btn.onclick = function(){ console.lo.原创 2021-10-19 17:16:54 · 550 阅读 · 0 评论 -
Vue脚手架的基本使用
Vue脚手架用于快速生成Vue项目基础架构使用步骤：安装Vue脚手架npm install -g @vue/cli基于脚手架的图形化界面创建Vue项目在终端中输入vue ui命令，打开图形化界面原创 2021-10-17 13:01:44 · 272 阅读 · 0 评论 -
vue.esm.js:632 [Vue warn]: Unknown custom element: ＜router-link＞ - did you register the component co
在使用vue项目时报错出错原因：1.没有将Router挂载到Vue对象当中Vue.use(Router);2.router.js和index.js当中引入的Vue文件必须是同一个原创 2021-10-17 00:41:18 · 293 阅读 · 0 评论 -
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available
在index.js文件中写入下方代码报错import $ from 'jquery'import './css/1.css'import Vue from 'vue'import App from './components/app.vue'const vm = new Vue({ el:'#app', //render:h=>h(App), template: '<App/>', components: { App }})错误原因：原因分析vue有两种形式的.原创 2021-10-16 23:16:55 · 195 阅读 · 0 评论 -
[Vue warn]: Cannot find element: #vue-app报错解决
[Vue warn]: Cannot find element: #vue-app报错解决因为使用app.vue单文件组件时，页面先加载出了这个index.js文件，但是没有加载出来id为app的盒子，所以需要把引入js文件的代码写在这个div下面就能解决问题...原创 2021-10-16 01:33:33 · 857 阅读 · 0 评论 -
webpack的基本使用
一.创建；列表各行变色项目1.新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json2.新建src源代码目录3.新建src->index.html首页4.初始化首页基本的结构5.运行npm install jquery -S命令，安装jQuery6.通过模块化的形式，实现列表隔行变色效果<!DOCTYPE html><html> <head> <meta charset="utf-8">原创 2021-10-16 01:31:20 · 149 阅读 · 0 评论 -
vue与node模版引擎的渲染标记{{}}(双花括号)冲突
解决办法：将vue的{{}}替换为别的渲染var vm = new Vue({ el:'#app', delimiters:['$$','$$'], data:{ msg:"hello", list:[ { userId:"1",chat:"1"}, { userId:"2",chat:"2"}, { userId:"3",chat:"3"}, { userId:"4",chat:"4"}, { userId:"5",chat:"5"},原创 2021-10-10 14:32:48 · 329 阅读 · 0 评论 -
Vuex基础知识
原vue组件之间共享数据的方式：父组件向子组件传值的方式：v-bind属性绑定子组件向父组件的传值方式：v-on事件绑定兄弟组件之间共享数据：EventBus$on 接收数据的那个组件$emit 发送数据的那个组件Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享组件a可以把数据传递给store，再通过store把数据传递给组件b，不需要通过其他的组件来传递这个数据，并且存储在vuex中的数据都是响应式的，可以实时刷新。一般情况下，只有组件之间共享的数据原创 2021-10-09 21:53:50 · 149 阅读 · 0 评论 -
Vue项目介绍
1.Vue项目结构：build文件夹：项目构建（webpack）相关代码config文件夹：配置文件夹，配置目录，端口号等等node_modules:npm依赖的项目模块src文件夹：开发目录src包括：App.vue文件：项目入口文件main.js文件项目的核心文件router文件夹：存放路由文件，里面的index.js存放路由component文件夹：组件文件夹static文件夹：静态资源文件夹index.html文件：主页面文件package.json：配置文件2.vue单原创 2021-10-06 12:38:44 · 6831 阅读 · 0 评论 -
Vue前端工程化
ES6模块化开发的定义：每个js文件都是一个独立的板块导入模块成员用import关键字，导出用export关键字原创 2021-09-28 20:14:16 · 279 阅读 · 0 评论 -
Vue的前端路由
前端路由与后端路由：后端路由：根据不同的请求地址响应不同的内容Vue前端路由：通过改变URL的hash值，根据hash的变化控制组件的切换前端路由用法：点击a连接就会改变hash值//监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件名称 window.onhashchange = function(){ //通过location.hash获取到最新的hash值 }Vue Router的基本使用：官网：https://router.v原创 2021-09-19 13:13:04 · 326 阅读 · 0 评论 -
vue框架基础知识
官网：:https://cn.vuejs.org/v2/guide/vue的基本使用：例： <div id="app"> <div>{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({原创 2021-03-29 16:22:11 · 749 阅读 · 0 评论