Vue-05-笔记

最新推荐文章于 2025-03-07 10:13:25 发布
原创 最新推荐文章于 2025-03-07 10:13:25 发布 · 1.7k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
Vue

当前文章被收录于：

Vue
6 篇文章 0 人学习
订阅专栏 查看详情
本文详细介绍了如何使用Vue.js构建一个学生管理系统，包括环境搭建、登录功能、分页查询、添加、修改和删除功能的实现。涉及到Vue组件、Axios请求、MyBatis以及Servlet的交互。

Vue-05-笔记

Vue综合案例 学生管理系统

1、效果环境的介绍

在这里插入图片描述
在这里插入图片描述

2、登录功能的实现

  • 环境搭建

    • 从资料中解压《学生管理系统原始项目》，并导入。

  • 代码实现

    • html代码

      onSubmit(formName) {
                // 为表单绑定验证功能
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //请求服务器完成登录功能
                        axios.post("userServlet","username=" + this.form.username + "&password=" + this.form.password)
                            .then(resp => {
                                if(resp.data == true) {
                                    //登录成功，跳转到首页
                                    location.href = "index.html";
                                }else {
                                    //登录失败，跳转到登录页面
                                    alert("登录失败，请检查用户名和密码");
                                    location.href = "login.html";
                                }
                            })
                    } else {
                        return false;
                    }
                });
            }

    • java代码

      • UserServlet.java
      package com.itheima.controller;

import com.itheima.bean.User;
import com.itheima.service.UserService;
import com.itheima.service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    private UserService service = new UserServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        //2.封装User对象
        User user = new User(username,password);

        //3.调用业务层的登录方法
        List<User> list = service.login(user);

        //4.判断是否查询出结果
        if(list.size() != 0) {
            //将用户名存入会话域当中
            req.getSession().setAttribute("username",username);
            //响应给客户端true
            resp.getWriter().write("true");
        }else {
            //响应给客户端false
            resp.getWriter().write("false");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}
      • UserService.java
      package com.itheima.service;

import com.itheima.bean.User;

import java.util.List;
/*
    业务层约束接口
 */
public interface UserService {
    /*
        登录方法
     */
    public abstract List<User> login(User user);
}
      • UserServiceImpl.java
      package com.itheima.service.impl;

import com.itheima.bean.User;
import com.itheima.mapper.UserMapper;
import com.itheima.service.UserService;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;
import java.util.List;

public class UserServiceImpl implements UserService {
    @Override
    public List<User> login(User user) {
        InputStream is = null;
        SqlSession sqlSession = null;
        List<User> list = null;
        try{
            //1.加载核心配置文件
            is = Resources.getResourceAsStream("MyBatisConfig.xml");

            //2.获取SqlSession工厂对象
            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);

            //3.通过SqlSession工厂对象获取SqlSession对象
            sqlSession = sqlSessionFactory.openSession(true);

            //4.获取UserMapper接口的实现类对象
            UserMapper mapper = sqlSession.getMapper(UserMapper.class);

            //5.调用实现类对象的登录方法
            list = mapper.login(user);

        }catch (Exception e) {
            e.printStackTrace();
        } finally {
            //6.释放资源
            if(sqlSession != null) {
                sqlSession.close();
            }
            if(is != null) {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        //7.返回结果到控制层
        return list;
    }
}
      • UserMapper.java
      package com.itheima.mapper;

import com.itheima.bean.User;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface UserMapper {
    /*
        登录方法
     */
    @Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}")
    public abstract List<User> login(User user);
}

3、分页查询功能的实现

  • 代码实现

    • html代码

      <script>
    new Vue({
        el:"#div",
        data:{
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            formData:{},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData:[],//表格数据
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            rules: {
                number: [
                    {required: true, message: '请输入学号', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                birthday: [
                    {required: true, message: '请选择日期', trigger: 'change'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'},
                    {min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}
                ],
            }
        },
        methods:{
            //分页查询功能
            selectByPage(){
                axios.post("studentServlet","method=selectByPage&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize)
                    .then(resp => {
                        //将查询出的数据赋值tableData
                        this.tableData = resp.data.list;
                        //设置分页参数
                        //当前页
                        this.pagination.currentPage = resp.data.pageNum;
                        //总条数
                        this.pagination.total = resp.data.total;
                    })
            },
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },
            showAddStu() {
                //弹出窗口
                this.dialogTableVisible4add = true;
            },
            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
                //清除表单的校验数据
                this.$refs[addForm].resetFields();
            },
            showEditStu(row) {
                //1. 弹出窗口
                this.dialogTableVisible4edit = true;

                //2. 显示表单数据
                this.editFormData = {
                    number:row.number,
                    name:row.name,
                    birthday:row.birthday,
                    address:row.address,
                }
            }   
        },
        mounted(){
            //调用分页查询功能
            this.selectByPage();
        }
    });
</script>

    • java代码

      • 1、创建StudentServlet.java
      package com.itheima.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageInfo;
import com.itheima.bean.Student;
import com.itheima.service.StudentService;
import com.itheima.service.impl.StudentServiceImpl;
import org.apache.commons.beanutils.BeanUtils;
import org.apache.commons.beanutils.ConvertUtils;
import org.apache.commons.beanutils.Converter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;

@WebServlet("/studentServlet")
public class StudentServlet extends HttpServlet {
    private StudentService service = new StudentServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取方法名
        String method = req.getParameter("method");
        if(method.equals("selectByPage")) {
            //分页查询功能
            selectByPage(req,resp);
        }
    }

    /*
        分页查询功能
     */
    private void selectByPage(HttpServletRequest req, HttpServletResponse resp) {
        //获取请求参数
        String currentPage = req.getParameter("currentPage");
        String pageSize = req.getParameter("pageSize");

        //调用业务层的查询方法
        Page page = service.selectByPage(Integer.parseInt(currentPage), Integer.parseInt(pageSize));

        //封装PageInfo
        PageInfo info = new PageInfo(page);

        //将info转成json，响应给客户端
        try {
            String json = new ObjectMapper().writeValueAsString(info);
            resp.getWriter().write(json);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}
      • 2、创建StudentService.java
      package com.itheima.service;

import com.github.pagehelper.Page;
import com.itheima.bean.Student;

/*
    学生业务层接口
 */
public interface StudentService {
    /*
        分页查询方法
     */
    public abstract Page selectByPage(Integer currentPage, Integer pageSize);
}
      • 3、创建StudentServiceImpl.java
      package com.itheima.service.impl;

import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.itheima.bean.Student;
import com.itheima.mapper.StudentMapper;
import com.itheima.service.StudentService;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

/*
    学生业务层实现类
 */
public class StudentServiceImpl implements StudentService {

    /*
        分页查询功能
     */
    @Override
    public Page selectByPage(Integer currentPage, Integer pageSize) {
        InputStream is = null;
        SqlSession sqlSession = null;
        Page page = null;
        try{
            //1.加载核心配置文件
            is = Resources.getResourceAsStream("MyBatisConfig.xml");
            //2.获取SqlSession工厂对象
            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
            //3.通过SqlSession工厂对象获取SqlSession对象
            sqlSession = sqlSessionFactory.openSession(true);
            //4.获取StudentMapper接口实现类对象
            StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
            //5.设置分页参数
            page = PageHelper.startPage(currentPage,pageSize);
            //6.调用实现类对象查询全部方法
            mapper.selectAll();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            //7.释放资源
            if(sqlSession != null) {
                sqlSession.close();
            }
            if(is != null) {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }

        //8.返回结果到控制层
        return page;
    }
}
      • 4、创建StudentMapper.java
      package com.itheima.mapper;

import com.itheima.bean.Student;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import java.util.List;

/*
    学生持久层接口
 */
public interface StudentMapper {
    /*
        查询全部方法
     */
    @Select("SELECT * FROM student")
    public abstract List<Student> selectAll();
}

4、添加功能的实现

  • 代码实现

    • html代码

      在stuList.html中增加“添加功能”代码

      //添加学生功能
            addStu(){
                let param = "method=addStu&number=" + this.formData.number + "&name=" + this.formData.name +
                        "&birthday=" + this.formData.birthday + "&address=" + this.formData.address +
                        "&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;
                axios.post("studentServlet",param)
                    .then(resp => {
                        //将查询出的数据赋值tableData
                        this.tableData = resp.data.list;
                        //设置分页参数
                        //当前页
                        this.pagination.currentPage = resp.data.pageNum;
                        //总条数
                        this.pagination.total = resp.data.total;
                    })
                //关闭添加窗口
                this.dialogTableVisible4add = false;
            }

    • java代码

      • 1、在StudentServlet.java中增加“添加功能”代码-addStu
      	/*
	*1、直接复制会报错
	*2、需要将此行代码需要添加到“doGet”方法中
	*3、增加“addStu”方法名的判断	
    */
	else if(method.equals("addStu")) {
            //添加数据功能
            addStu(req,resp);
     }	
==================================================================================

	/*
        添加数据功能
     */
    private void addStu(HttpServletRequest req, HttpServletResponse resp) {
        //获取请求参数
        Map<String, String[]> map = req.getParameterMap();
        String currentPage = req.getParameter("currentPage");
        String pageSize = req.getParameter("pageSize");

        //封装Student对象
        Student stu = new Student();

        //注册日期转换器方法
        dateConvert();

        try {
            BeanUtils.populate(stu,map);
        } catch (Exception e) {
            e.printStackTrace();
        }

        //调用业务层的添加方法
        service.addStu(stu);

        //重定向到分页查询功能
        try {
            resp.sendRedirect(req.getContextPath() + "/studentServlet?method=selectByPage&currentPage=" + currentPage + "&pageSize=" + pageSize);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /*
        日期转换
     */
    private void dateConvert() {
        ConvertUtils.register(new Converter() {
            public Object convert(Class type, Object value) {
                SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
                try {
                    return simpleDateFormat.parse(value.toString());
                } catch (ParseException e) {
                    e.printStackTrace();
                }
                return null;
            }
        }, Date.class);
    }
      • 2、在StudentService.java中增加“添加功能”-addStu
          /*
        添加数据方法
     */
    public abstract void addStu(Student stu);
      • 3、StudentServiceImpl.java中增加“添加功能”-addStu
      /*
        添加数据方法
     */
    @Override
    public void addStu(Student stu) {
        InputStream is = null;
        SqlSession sqlSession = null;
        try{
            //1.加载核心配置文件
            is = Resources.getResourceAsStream("MyBatisConfig.xml");
            //2.获取SqlSession工厂对象
            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
            //3.通过SqlSession工厂对象获取SqlSession对象
            sqlSession = sqlSessionFactory.openSession(true);
            //4.获取StudentMapper接口实现类对象
            StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
            //5.调用实现类对象添加方法
            mapper.addStu(stu);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            //6.释放资源
            if(sqlSession != null) {
                sqlSession.close();
            }
            if(is != null) {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
      • 4、StudentMapper.java中增加“添加功能”-addStu
          /*
        添加数据方法
     */
    @Insert("INSERT INTO student VALUES (#{number},#{name},#{birthday},#{address})")
    public abstract void addStu(Student stu);

5、修改功能的实现

  • 代码实现

    • html代码

      在stuList.html中增加“修改功能”代码

      //修改数据功能
            updateStu() {
                let param = "method=updateStu&number=" + this.editFormData.number + "&name=" + this.editFormData.name +
                    "&birthday=" + this.editFormData.birthday + "&address=" + this.editFormData.address +
                    "&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;
                axios.post("studentServlet",param)
                    .then(resp => {
                        //将查询出的数据赋值tableData
                        this.tableData = resp.data.list;
                        //设置分页参数
                        //当前页
                        this.pagination.currentPage = resp.data.pageNum;
                        //总条数
                        this.pagination.total = resp.data.total;
                    })
                //关闭编辑窗口
                this.dialogTableVisible4edit = false;
            }

    • java代码

      • 1、在StudentServlet.java中增加“修改功能”-updateStu
          /*
        修改数据功能
     */
    private void updateStu(HttpServletRequest req, HttpServletResponse resp) {
        //获取请求参数
        Map<String, String[]> map = req.getParameterMap();
        String currentPage = req.getParameter("currentPage");
        String pageSize = req.getParameter("pageSize");

        //封装Student对象
        Student stu = new Student();

        //注册日期转换器方法
        dateConvert();

        try {
            BeanUtils.populate(stu,map);
        } catch (Exception e) {
            e.printStackTrace();
        }

        //调用业务层的修改方法
        service.updateStu(stu);

        //重定向到分页查询功能
        try {
            resp.sendRedirect(req.getContextPath() + "/studentServlet?method=selectByPage&currentPage=" + currentPage + "&pageSize=" + pageSize);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
      • 2、在StudentService.java中增加“修改功能”-updateStu
      /*
        修改数据方法
     */
    public abstract void updateStu(Student stu);
      • 3、StudentServiceImpl.java中增加“修改功能”-updateStu
      	/*
	*1、直接复制会报错
	*2、需要将此行代码需要添加到“doGet”方法中
	*3、增加“updateStu”方法名的判断	
    */
	else if(method.equals("updateStu")) {
            //添加数据功能
            updateStu(req,resp);
     }	
==================================================================================

/*
        修改数据方法
     */
    @Override
    public void updateStu(Student stu) {
        InputStream is = null;
        SqlSession sqlSession = null;
        try{
            //1.加载核心配置文件
            is = Resources.getResourceAsStream("MyBatisConfig.xml");
            //2.获取SqlSession工厂对象
            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
            //3.通过SqlSession工厂对象获取SqlSession对象
            sqlSession = sqlSessionFactory.openSession(true);
            //4.获取StudentMapper接口实现类对象
            StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
            //5.调用实现类对象修改方法
            mapper.updateStu(stu);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            //6.释放资源
            if(sqlSession != null) {
                sqlSession.close();
            }
            if(is != null) {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
      • 4、StudentMapper.java中增加“修改功能”-updateStu
      /*
        修改数据方法
     */
    @Update("UPDATE student SET number=#{number},name=#{name},birthday=#{birthday},address=#{address} WHERE number=#{number}")
    public abstract void updateStu(Student stu);

6、删除功能的实现

  • 代码实现

    • html代码

      在stuList.html中增加“删除功能”代码

      //删除数据功能
            deleteStu(row) {
                if(confirm("确定要删除" + row.number + "数据?")) {
                    let param = "method=deleteStu&number=" + row.number +
                        "&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;
                    axios.post("studentServlet",param)
                        .then(resp => {
                            //将查询出的数据赋值tableData
                            this.tableData = resp.data.list;
                            //设置分页参数
                            //当前页
                            this.pagination.currentPage = resp.data.pageNum;
                            //总条数
                            this.pagination.total = resp.data.total;
                        })
                }
            }

    • java代码

      • 1、在StudentServlet.java中增加“删除功能”-
      	/*
	*1、直接复制会报错
	*2、需要将此行代码需要添加到“doGet”方法中
	*3、增加“deleteStu”方法名的判断	
    */
	else if(method.equals("deleteStu")) {
            //添加数据功能
            deleteStu(req,resp);
     }	
==================================================================================


/*
        删除数据功能
     */
    private void deleteStu(HttpServletRequest req, HttpServletResponse resp) {
        //获取请求参数
        String number = req.getParameter("number");
        String currentPage = req.getParameter("currentPage");
        String pageSize = req.getParameter("pageSize");

        //调用业务层的删除方法
        service.deleteStu(number);

        //重定向到分页查询功能
        try {
            resp.sendRedirect(req.getContextPath() + "/studentServlet?method=selectByPage&currentPage=" + currentPage + "&pageSize=" + pageSize);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
      • 2、在StudentService.java中增加“删除功能”-
          /*
        删除数据方法
     */
    public abstract void deleteStu(String number);
      • 3、StudentServiceImpl.java中增加“删除功能”-
      /*
        删除数据方法
     */
    @Override
    public void deleteStu(String number) {
        InputStream is = null;
        SqlSession sqlSession = null;
        try{
            //1.加载核心配置文件
            is = Resources.getResourceAsStream("MyBatisConfig.xml");
            //2.获取SqlSession工厂对象
            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
            //3.通过SqlSession工厂对象获取SqlSession对象
            sqlSession = sqlSessionFactory.openSession(true);
            //4.获取StudentMapper接口实现类对象
            StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
            //5.调用实现类对象删除方法
            mapper.deleteStu(number);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            //6.释放资源
            if(sqlSession != null) {
                sqlSession.close();
            }
            if(is != null) {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
      • 4、StudentMapper.java中增加“删除功能”-
          /*
        删除数据方法
     */
    @Delete("DELETE FROM student WHERE number=#{number}")
    public abstract void deleteStu(String number);
标签
#vue #js #ajax #java #servlet
vue-impression：用于移动设备的Vue.js 2.0 UI元素
03-03
视觉印象 用于移动设备的Vue.js 2.0 UI元素。 演示版 安装 yarn add vue-impression 用法 样式： @import ' ~vue-impression/dist/styles/index.scss ' ; 脚本： import Vue from 'vue' ; import VueImpression from 'vue-impression' ; Vue . use ( VueImpression ) ; 摇树： yarn add babel-plugin-transform-imports -D { " plugins " : [ [ " transform-imports " , { " vue-impression " : {
vueimpression移动Vuejs2UI元素
08-07
vue-impression移动Vuejs2 UI元素
探索 Vue-Impression：打造动态首屏加载体验的新利器
gitblog_00002的博客
04-23 370
探索 Vue-Impression：打造动态首屏加载体验的新利器 是一个专门为 Vue.js 应用设计的高效、轻量级的首屏优化解决方案。它旨在提升用户体验，特别是在网络环境不佳时，通过预先渲染关键内容，实现快速的首屏展现。 技术分析 懒加载策略 Vue-Impression 实现了组件级别的延迟加载。它允许开发者标记哪些组件是首屏必需的，其他非关键组件则在视口进入时再进行加载。这减少了初始页面请求...
VUE插件总结——总有你能用上的插件
sky___Show的博客
08-14 1741
框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 vue-blu - 帮助你轻松创建web应用 vue
vue上拉加载
Bright2017的博客
10-17 6766
vue上拉加载
day05笔记--VUEJS
LittleBlack
07-27 382
day05笔记--VUEJSVUEJSVUEJS 语法入门案例数据显示1.v-text命令2.v-html命令 VUEJS VUEJS 语法 1.count 定义常量 2.let 作用和var类似，有作用域的概念 3.var 特点：没有作用域 入门案例 入门案例步骤 1.导入vue.js文件 2.指定区域进行渲染 需要准备div 3.创建vue.js对象 指定渲染区域 动态调用 <!DOCTYPE html> <html> <head> <meta char
【Vue2学习笔记】03-05
最新发布
m0_58622975的博客
03-07 256
vue2 尚硅谷 b站课程 笔记 03-05
Vue 笔记 05
Alice_Lee_Lee的博客
12-20 362
Vue封装的过渡与动画、配置代理、插槽
小兔鲜Vue3 项目学习笔记Day05
不被定义的程序媛写的博客儿
05-27 1755
Day05 文章目录Day05登录1. 整体认识和路由设置2. 表单校验实现3. 表单-统一校验4. 基础登录业务实现5. Pinia管理用户数据6. Pinia 数据持久化7. 登录和非登录状态下的模板适配8. 请求拦截器携带Token9. 退出登录功能的实现10. Token失效401拦截处理购物车1. 流程梳理2. 本地购物车-加入购物车功能实现3. 头部购物车列表渲染4. 头部购物车删除功能5. 头部购物车统计计算总结 登录 1. 整体认识和路由设置 准备模板 Login/index.vue &
vue学习笔记05
weixin_52517502的博客
01-08 772
（1）兄弟（并列关系的）组件之间传递数据，目前所学的知识，只能将需要的数据定义到他们共同的父组件，通过props进行数据传递。（1）给Vue做功能增强的。（3）当是checkbox表单时，它的checked的值就类似于其他表单value的值，可以直接使用v-model进行双向数据绑定，它的值是true绑定的值就是true，它的值是false绑定的值就是false。（2）当公共的js中有一个方法a，组件中也有一个同名的a，并不会产生覆盖效果，只执行组件中的a方法，即混入并不会破坏原组件的机构。
Vue笔记05
weixin_45081813的博客
02-25 323
1.什么是Vue CLI 2.Vue CLI使用环境 Vue CLI使用前提 - Node Vue CLI使用前提 - Webpack 3.vue cli2 vue cli2安装 npm install @vue/cli -g vue脚手架3安装 npm uninstall vue-cli -g 卸载vue脚手架 使用脚手架3也可以初始化脚手架2的模板 拉取使用脚手架2的模板：npm install @vue/cli-init -g 使用Vue CLI2初始化项目：vue init webpac
Vue学习day05笔记
m0_73158362的博客
06-07 1203
这都是Vue给咱们内置的一些指令，可以直接使用自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能全局注册//在main.js中Vue.directive('指令名', {// 可以对 el 标签，扩展额外功能el.focus()})局部注册//在Vue组件的配置项中"指令名": {// 可以对 el 标签，扩展额外功能el.focus()使用指令。
Vue学习笔记-05
JZYCLL的博客
07-21 274
Vue3学习笔记-05 一、列表的过滤 1.用watch实现的列表过滤 `immediate:true` , 表示立即执行handler函数 <div id="root"> <!--遍历数组--> <h2>人员信息</h2> <input type="text" placeholder="请输入名字" v-model="keyWord" /> <ul>
Vue笔记05-Vuex
王劭阳的博客
08-14 296
Vuex概念 Vuex是在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），可以实现组件间通信，适用于任意组件间通信。 当多个组件依赖同一状态、不同组件行为需要变更同一状态的时候，需要使用Vuex，也就是用Vuex来管理公共的变量或者数据。 案例 首先引出一个案例，这个案例是单组件，不使用Vuex来完成的。 有一个Count.vue组件，组件中有几个按钮和一个显示当前数据的区域，通过按钮修改当前值并重新显示。 在App.vue中引入Count..
VUE学习系列笔记day05
qq_41522183的博客
12-23 400
VUE中文官网：https://vuejs.bootcss.com/guide/custom-directive.html 目录1、路由的基本概念、原理基本概念简易实现前端路由**Vue Router**2、vue-router的基本使用基本使用路由重定向3、嵌套路由4、动态路由匹配动态路由与$route.params传参Props传参5、命名路由6、编程式导航：   本篇涉及知识：路由的基本概念与原理、基本使用、嵌套路由、动态路由匹配、命名路由、编程式导航 1、路由的基本概念、原理 基本概念   路由的本
Vue学习笔记day05总结
Gavid的博客
12-05 528
目录 1.Watch属性 1.1监听文本框数据的变化，出发对应函数   1.2 监听路由地址的改变 2.computed属性 3. watch、computed 和 methods 之间的对比 4. Webpack  4.1 webpack 的基本概念 4.2 webpack的安装 4.3 webpack 的基本使用  4.4 webpack-dev-server 配置命令 ...
Vue学习笔记day05
l1021351889的博客
02-29 231
监听文本框数据的改变 1.@keyup 2.watch 监视文本框用@keyup比较方便 但是watch可以监视路由地址的改变 3.computed属性监听 利用率高 这三种方式中，watch和computed都必须使用function，但是compated有返回值，而watch没有，compated必须拥有返回值，methods里面也是function，但是methods更注重业务逻辑的...
Vue学习笔记05-H5实例百度音乐
临渊-测试开发
02-08 727
ddd
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值