Vuejs
关注
分享
扫一扫
文章平均质量分 53
小灰灰学编程
毕业设计：web、小程序
展开
-
vue中router实现路由跳转和parmas传参
文件结构：student.vue：<template> <div> <h1>学生</h1> <p>{{msg}}</p> </div></template><script> export default { data () { return { msg: '原创 2021-11-16 14:33:41 · 1157 阅读 · 0 评论 -
vue中this.$set更新视图的使用
在vue的开发过程中，偶尔会遇到在想要更新数据的情况下，控制台中已经有更新数据打印，但是视图中没有更新的情况，比如在data中我们需要给data定义一个对象，在使用的过程中需要个对象添加属性：代码如下：<template> <view> {{list.name}} <input v-model="list.age" /> <button @click="btnAdd">点击添加属性</button> </view&g原创 2021-11-12 15:59:39 · 982 阅读 · 0 评论 -
Vue.js实现点击左右按钮图片切换
关于图片切换，网上也有很多的说法，这边通过参考给出了如下所示的解决方案效果：html通过v-for循环展示图片列表itemlist，将图片路径保存在data中的itemlist中，添加上下按钮的点击事件。<template> <div> <div class="zs-adv"> <a title="上一页" :href="'#'" class="adv-pre" @click="leftScroll">上一个<原创 2021-08-18 11:30:07 · 6161 阅读 · 1 评论 -
多个Button实现tab顶部导航栏
定义多个Button按钮<button :class="flag === 1?'active':'tab-button'" @click="tab1" id="tab1">标签1</button><button :class="flag === 2?'active':'tab-button'" @click="tab2" id="tab2">标签2</button><button :class="flag === 3?'active':'tab原创 2021-08-05 09:17:10 · 759 阅读 · 0 评论 -
vue.js+express+mysql实现登录注册
vue.js+express+mysql实现登录注册本次的项目练习中，在登录注册中，需要运用了vue-cli搭建项目，通过webpack静态模块打包工具对项目进行管理，通过express+mysql等依赖实现vue项目对本地数据库的连接，在登录注册功能中，通过vue-router\v-model\v-show:class\sessionstorage等相关功能对页面进行操作。vue.js对数据库的增删改查操作，请看下面链接博客Vue.js + express +mysql实现数据库增删改查完整代码原创 2021-07-19 23:47:09 · 2010 阅读 · 3 评论 -
Vue.js + express +mysql实现数据库增删改查
Vue.js + express +mysql实现数据库增删改查1、 下载安装Node.js在Node.js官网可下载2、下载vue-cli脚手架npm install vue-cli -g3、 创建项目后面是项目名称，在安装项目过程中需要选择安装vue-routervue init webpack mysqlconnect4、安装vue-resource依赖npm install vue-resourve5、 安装express模块npm install expre原创 2021-07-15 17:18:37 · 3680 阅读 · 1 评论 -
Vue中兄弟组件之间进行通信
Vue中兄弟组件之间进行通信1、 先将组件1的数据传给父组件//组件1中定义方法send()将数据传给父组件send(){ this.$emit('data-msg',this.message);}// 父组件通过定义事件响应获取组件1数据@data-msg="msg2($event)"msg2(message){ console.log(message); this.msgbro2 = message;}-->2、 再将父组件的数据传给组件2props属性获取父组原创 2021-07-08 11:18:21 · 910 阅读 · 0 评论 -
vue-lazyload实现图片懒加载
vue-lazyload实现图片懒加载1. 在终端通过npm工具下载安装vue-lazyload图片懒加载插件npm install vue-lazyload --save2. 在项目的mian.js文件中导入插件import VueLazyLoad from 'vue-lazyload';3. 通过Vue.use()使用插件// 使用图片懒加载插件Vue.use(VueLazyLoad);4. 在组件中通过v-lazy=“”方式加载图片<img v-lazy="showIma原创 2021-07-04 09:12:54 · 570 阅读 · 0 评论 -
Vue的生命周期
Vue的生命周期Vue的生命周期一共有8个阶段，分别是：创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreated阶段：ue实例的挂载元素$el和数据对象data都为undefined，还没初始化；在created阶段，Vue实例的数据对象都有了data，而el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换；在mounted阶段，vue实例挂载完成，data.原创 2021-07-03 22:55:28 · 196 阅读 · 2 评论 -
Vue中v-html的用法
在Vue语法中，通过{{}}可以输出文本变量，当时它并不能实现在一个标签语句加入一个新的标签语句，这时候需要用到v-html属性来完成操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist原创 2021-06-14 10:01:09 · 17309 阅读 · 0 评论