Vue学习笔记
文章平均质量分 70
每个人有自己的学习习惯,此专栏的内容为本人的学习和笔记习惯,没有面面俱到,也没有很细致,仅供参考
呦呀
这个作者很懒,什么都没留下…
展开
-
Vue项目安装less和less-loader
less-loader的版本号要搭配webpack的版本号来选择,webpack@4+可以选择的less-loader版本是5~7。完成less的安装后,我们只需要在style节点上加上lang=‘less’,就可以使用less语法了。在vue项目打开终端,进入项目安装(我记得less好像全局安装没用,每个vue项目要单独安装)less目前的最高版本是5+,但保险起见,我们还是安装4+比较好。上一步中,我们已经知道webpack的版本是4+如果没有安装,要先进行安装。打开cmd,通过命令查看。原创 2022-10-24 15:22:14 · 21913 阅读 · 6 评论 -
通过cookie和localstorage实现数据持久化
最近在写vue项目的时候,把登录的用户信息放在Vuex(store)中,但只要页面一刷新,登录时存入Vuex(store)的数据就被清除了,为解决这一问题,我决定将用户登录信息存入cookie中。使用cookie前,需要安装相应的插件封装方法新建/src/utils/cookie.js (文件夹和文件名可根据自己的习惯命名)实战此实战案例是在vue+mysql实现登录案例的基础上构建的,有需要请自行移步登陆页面输入用户名和密码,登陆成功时,将用户名存入cookie首页效果演示coo原创 2022-06-17 17:05:03 · 790 阅读 · 4 评论 -
Vue项目——数据表的模糊查询功能
数据表模糊查询全表内容模糊查询多条件模糊查询原创 2022-06-07 10:48:50 · 2404 阅读 · 0 评论 -
脚手架(vue-cli)创建Vue项目超详细过程
Vue创建项目1.创建项目2.项目手动配置3.选择vue版本4.路由模式...Vue项目运行...原创 2022-03-23 10:33:42 · 11230 阅读 · 0 评论 -
Vue+MySQL实现登录注册案例
Vue+MySQL实现登录案例1.新建vue项目并连接数据库具体步骤见vue连接mysql数据库2.新建/views/login.vue根据自己的喜好搭建页面原创 2022-03-09 10:05:51 · 21418 阅读 · 129 评论 -
Vue项目通过node连接MySQL数据库并实现增删改查操作
Vue项目通过node连接MySQL数据库1.创建Vue项目vue create 项目名2.下载安装需要的插件下载expressnpm install express下载cors,用于处理接口跨域问题npm install cors下载mysqlnpm install mysql下载axiosnpm install axios3.在项目中创建server文件夹,用于搭建本地服务器创建/server/app.js,用于配置服务器相关信息let expr原创 2022-03-01 14:19:36 · 56464 阅读 · 229 评论 -
Vue生成随机数
通过Math函数生成随机数Math.random()*10 //生成0-10的随机数,包含0,不包含10Math.ceil(Math.random()*10) //ceil向上取整,即生成1-10的随机整数,取0的概率极小Math.floor(Math.random()*10) //floor向下取整,即生成0-9的随机整数Math.round(Math.random()*10) //round四舍五入,即生成0-10的随机整数数,取0和10的概率是其他数的原创 2022-01-14 09:26:36 · 18357 阅读 · 0 评论 -
Vuex——vue的集中式存储仓库
Vuex的基本结构vuex的基本使用原创 2022-01-10 09:57:15 · 609 阅读 · 0 评论 -
数组中的响应式方法
数组中的响应式方法push():在数组后加入新数据pop():删除数组最后一位的元素shift():删除数组第一位的元素unshift():在数组最前面添加元素splice():删除/插入/替换reverse(): 数组反转等等…<script>export default { name: 'app', data() { return { fruit: ['苹果','香蕉','菠萝'] } }, methods: { func原创 2022-01-07 16:45:33 · 593 阅读 · 0 评论 -
vue-router路由
使用vue-router的步骤创建路由组件配置路由映射使用路由:router-link 和 router-view<template> <div id="app"> <router-link to='/home'>首页</router-link> <router-link to='/about'>关于</router-link> <router-view></router-vie原创 2022-01-07 16:45:05 · 168 阅读 · 0 评论 -
v-model双向绑定
v-mod的基本使用message和input双向绑定,其中一方的值发生变化,另一方的值也跟着发生变化<template> <div id="app"> <h2>{{message}}</h2> <input type="text" v-model="message"> </div></template><script>export default { name: 'app原创 2022-01-07 16:44:23 · 283 阅读 · 0 评论 -
父子组件的通信和函数调用
父组件向子组件传递数据<template> <div> <!-- 使用子组件并传递数据 --> <children :mes="message" :fruitlist="fruit"></children> </div></template><script>import children from '../components/children/children.vue' /原创 2022-01-07 16:43:51 · 271 阅读 · 0 评论 -
v-for循环遍历
v-for遍历对象、数组和数组对象原创 2022-01-07 16:43:00 · 1622 阅读 · 0 评论 -
v-if和v-show的使用以及他们的区别
v-if<template> <div id="app"> <div v-if="isshow" class="box1">这是一个盒子</div> <button @click="show">显示</button> </div></template><script>export default { name: 'app', data() { retu原创 2022-01-06 16:59:02 · 241 阅读 · 0 评论 -
v-on监听事件
v-on的基本使用语法糖(缩写) @<template> <div id="app"> <h2>{{num}}</h2> <button v-on:click='num--'>-</button> <button @click="add">+</button> </div></template><script>export defau原创 2022-01-06 16:58:39 · 158 阅读 · 0 评论 -
computed计算属性
计算属性的基本使用<template> <div id="app"> <h2>{{name}}</h2> </div></template><script>import home from './views/home.vue'export default { name: 'app', data() { return { firstname: '张', las原创 2022-01-06 16:58:15 · 416 阅读 · 0 评论 -
v-bind动态绑定
v-bind的基本使用语法糖(缩写) :标签内引用data中的数据,需要加上v-bind<template> <div id="app"> <img v-bind:src="img" alt=""> <a :href="url"></a> </div></template><script>export default { name: 'app', data() {原创 2022-01-06 16:57:13 · 340 阅读 · 0 评论 -
Vue项目的创建和托管
npm install @vue/cli -g 安装脚手架npm install -g @vue/cli-init 兼容旧版本vue init webpack 项目名 脚手架2创建项目vue create 项目名 脚手架3/4 创建项目vue run serve 运...原创 2022-01-12 08:14:09 · 334 阅读 · 0 评论