AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue系列——通过moke进行数据模拟

2023-04-20 791
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 通过moke进行数据模拟

使用mock模拟数据

通过脚手架创建基本项目 脚手架详情请参考脚手架这篇安装教学

01、在项目中安装mock

两种安装 命令如下：

npm install mockjs
vue add axios

安装完成后可在node_modules中查看是否安装成了mockjs

e9f3cc9ed64f4d45aa9d98cb8a0a2e68.png

4518e42169e342a7a06f3c3d218dff02.png

02、新建文件夹并在其创建建index.js

a00cf427c3684098a6763fdb20c6312e.png

03、 将mock文件夹的index.js文件在main.js中导入

56b316bd83274969964b81ff8c3823c2.png

04、对index.js添加mock语法

（此处用来测试）详细语法请从官网中获取 Mock.js

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

e18d0591e96f46c5bb1d4ea62bf1e1fc.png

测试完毕后下载elementui插件，从vue ui中下载

c6d96d3f8709433ca2357f4dbd7fb8e8.png

97fbf44615794a6b9f5d2a6a865828aa.png

接下来可以运用element-ui来实现分页数据的请求，添加以及删除等功能

一、删除vue中的原有样式

在index.js中添加四种数据

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|20-60': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        "id": '@increment()',
        "title": "@ctitle",
        "content": "@cparagraph",
        "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }]
})
// 输出结果
console.log(JSON.stringify(data))

这里打印要先把他转换成字符串格式，并且如果只加了data那么效果如下：

9880e11be91ce58c8cc53e40724fd84.png

特别不容易查看数据，所以需要对其进行排版。像以下这种：

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|20-60': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        "id": '@increment()',
        "title": "@ctitle",
        "content": "@cparagraph",
        "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }]
})
// 输出结果
console.log(JSON.stringify(data,null,4))

效果如下图 所示：

9c4ff74b044e01c7fe8eaa9c904bca4.png

console.log(JSON.stringify(data,null,4))
Mock.mock('/api/get/user','get',(options)=>{
    console.log(options);
    return {
        status: 200,
        message: '获取新闻列表数据成功',
        test:data.list
    }
})

App.vue 

mounted(){
    this.getData()
  },
  methods: {
    getData(){
      this.$axios.get('/api/get/user').then(res=>{
        console.log(res);
      })
    }
  },

7ba9f533581a465ab72b152bd2f2beec.png

接下来可以设置App.vue中的样式了

可从官网中提取所需的样式：element-ui官网

，并加以修改即可

7dc70966e172400c8807618ecb9b2b66.png

在div #app里添加如下代码 

<h3 style="text-align: center">数据展示</h3>
    <!-- 添加 -->
    <el-row :gutter="24">
      <el-col :span="8">
        <el-input v-model="title" placeholder="请输入标题"></el-input
      ></el-col>
      <el-col :span="8"
        ><el-input v-model="content" placeholder="请输入内容"></el-input
      ></el-col>
      <el-col :span="8"
        ><el-button type="primary" @click="handelAdd">添加</el-button></el-col
      >
    </el-row>

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

2de6d7c89da948ba8a15d991f06c252b.png

效果如下：

f4f1b5210ba0452391b66fdc07f6cb55.png

接下来就是选择表格

85a7b121804d4c02a1b0f208aa7cd6bd.png

<el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
export default {
  name: "app",
  data() {
    return {
      // tableData: [],
      title: "",
      content: "",
      pagenum: 1,
      pagesize: 10,
      total: 0,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get("/api/get/user").then((res) => {
        console.log(res);
      });
    },
  },
};

添加删除按钮

78f107d12a7e481dae0a0c343b3ba2e6.png

    

<el-table-column label="操作">
          <template v-slot="scope" >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
handleDelete(index, row) {
      console.log(index, row);
    },

2b17e079db274e9da673e94cacc5ce41.png

然后修改头部名称

9582ad57e64e421c9ba2c6aa84982a2e.png

代码如下：

<template>
  <div id="app">
    <h3 style="text-align: center">数据展示</h3>
    <!-- 添加 -->
    <el-row :gutter="24">
      <el-col :span="8"><el-input  v-model="title" placeholder="请输入标题"></el-input></el-col>
      <el-col :span="8"><el-input  v-model="content" placeholder="请输入内容"></el-input></el-col>
      <el-col :span="8">
        <el-button type="primary">添加</el-button>
      </el-col>
    </el-row>
    <template>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="name" label="内容" width="180">
        </el-table-column>
        <el-table-column prop="address" label="时间"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      // tableData: [],
      title: "",
      content: "",
      pagenum: 1,
      pagesize: 10,
      total: 0,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get("/api/get/user").then((res) => {
        console.log(res);
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>
<style>
</style>

效果如下：

cae690425c844b52aa91c39b41eb903f.png

在index.js中 绑定total

Mock.mock('/api/get/user','get',(options)=>{
    console.log(options);
    return {
        status: 200,
        message: '获取新闻列表数据成功',
        test:data.list,
        total:data.list.length
    }
})

在app.vue中删除数据项并获取数据

getData() {
      this.$axios.get("/api/get/user").then((res) => {
        console.log(res);
        // 渲染到页面中
        this.tableData = res.data.test
        console.log(this.tableData);
      });
    },

效果如下：

2d029e130fd24f27972a07dda73080a7.png

重新设置宽度

 

<el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="title" label="标题" width="160">
        </el-table-column>
        <el-table-column prop="content" label="内容" >
        </el-table-column>
        <el-table-column prop="add_time" label="时间" width="180"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

效果如下：af5422db255c42d98b1655959bc89efa.png

接下来做分页

02024df8e5164f81a51215a5e8392d05.png

30b4a770a8974c2ca638f2b03cecadcb.png

<el-pagination style="text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
 methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },

因为分页默认向左边对齐，所以要在标签上添加一个style样式设置为文本居中

461c04302c5d4d789e523ae5c4440aa1.png

所有的页面渲染就已经完成了

接下来进行删除和添加效果

index.js中的对删除进行操作

首先先把分页样式给注释掉，不然控制台会引起错误

1493f85dae3c4d86bc503f2e0d49c8a2.png

4ae4a2826ca049608029e4391d3d9c19.png

// 用正则表达式来写
Mock.mock(/\/api\/delete\/user/,'post',(options)=>{
    console.log(options);
    return{
        status: 200,
        message: '删除成功',
        list:data.list,
    }
})

app.vue部分 

// 删除
    async handleDelete(id) {
      // console.log(index, row);
      // 传一个参数id post就直接传
      // 解构写法
      // const {data,res} = await('/api/get/user',{ id })
      const result = await axios.post('/api/delete/user',{ id })
      console.log(result);
      this.getData()
      // 如果是get请求
/*       const {data,res} = await('/api/get/user',{ 
        params:{
          // id:id
          id
        }
       }) */
    },
/*     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }, */

将删除按钮进行修改：

<template v-slot="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>

20c002b918944fedb832f020c9988605.png

使用async要把axios引入

38d3a1b1f35d488bacaea62d44cbebea.png

index.js中获取options里的body

Mock.mock(/\/api\/delete\/user/,'post',(options)=>{
    console.log(options);
    // 要转成对象的形式
    // const body = options.body
    const body = JSON.parse(options.body)
    console.log(body);
    // 过滤数据
    return{
        status: 200,
        message: '删除成功',
        list:data.list,
    }
})

01b39c5eff674dd68d0c19eda0653138.png

使用findindex进行复杂数据类型的查找

const index = data.list.findIndex(item=>item.id === body.id);
    data.list.splice(index,1)

d7d3b1f10b784f13b729696330aa34b0.png

效果如下：

c70c49245dda4c939b3e1725d9b3dfb1.gif

当然也可以添加一个弹窗

411e5161b7274020b5d2e10edac8b2b3.png

如何添加？

把里面的代码放到app.vue的方法中

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

并且在删除成功里渲染数据

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        // 把this.getData放到此处
          this.getData();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

效果如下：

859eeb3550d1490a932c217b34bf4dfd.gif

添加操作

app.vue

async handelAdd() {
      if (!this.title || !this.content) {
        alert('请您务必填写标题以及内容信息！');
        return;
      }
      // 可以使用重复的result，其作用域不同
      const result = await axios.post("/api/add/user", {
        // 传入的参数为标签中的标题栏以及内容栏
        title: this.title,
        content: this.content,
      });
      // 重新加载一遍数据
      console.log(result);
      this.getData();
    // 输入完毕后清空内容
      this.title=''
      this.content=''
    },

5d46c849b25a461b8a9821a74f9d45cf.png

加上一个判断条件（如果为空值时，则调出弹窗提醒用户未完善信息）

if (!this.title || !this.content) {
        alert('请您务必填写标题以及内容信息！');
        return;
      }

a24cf4fa7815484d83d9d222ee05e939.png

index.js部分

Mock.mock(/\/api\/add\/user/,'post',(options)=>{
    console.log(options);
    const body = JSON.parse(options.body)
    data.list.unshift(Mock.mock({
           // 这里切记不要添加随机数 ，要把随机的数据给去除换成body.title和body.content
            "id": '@increment()',
            "title": body.title,
            "content": body.content,
            "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }))
    return{
        status: 200,
        message: '添加成功',
        list:data.list,
    }
})

效果如下：

e4bc72c691a742249cff1925dde95e07.gif

分页部分

分页控件

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[1, 3, 5, 7]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

分页的方法：

handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageindex = val;
      this.getList();
    },

index.js部分：

8ae40d26c0224f1da4744f86324d4d95.png

这个就不要了

直接在下面写个新的 

// 含有分页的数据列表,有需要接受的参数要使用正则匹配
// /api/get/news?pageindex=1&pagesize=10
Mock.mock(/\/api\/get\/user/, 'get', (options) => {
  console.log(options)
  // 获取传递的参数pageindex
  const pageindex = getQuery(options.url,'pageindex')
  // 获取传递的参数pagesize
  const pagesize = getQuery(options.url,'pagesize')
  // 截取数据的起始位置
  const start = (pageindex-1)*pagesize
  // 截取数据的终点位置
  const end = pageindex*pagesize
  // 计算总页数
  const totalPage = Math.ceil(data.list.length/pagesize)
  // 数据的起始位置：(pageindex-1)*pagesize  数据的结束位置：pageindex*pagesize
  const list = pageindex>totalPage?[]:data.list.slice(start,end)
  return {
    status: 200,
    message: '获取新闻列表成功',
    list: list,
    total: data.list.length
  }
})

参数名可以自己取

4bb0f5aebe754f4793a31b62cba5ac95.png

a3cc8d706de94264b445c63efc7e9c1e.png

7b14578df97743648e814496808c5ad2.png

最后在生命周期内 先运行一下即可：

create() {
    this.getData();
  },

实现效果如下：  

2b2e875931b646d78f095193cd215f73.png

本章中间更变数据后有细微错误，下面代码是为完整代码

vue.app部分：

<template>
  <div id="app">
    <h3 style="text-align: center">数据展示</h3>
    <!-- 添加 -->
    <el-row :gutter="24" style="margin: 0">
      <el-col :span="8"
        ><el-input v-model="title" placeholder="请输入标题"></el-input
      ></el-col>
      <el-col :span="8"
        ><el-input v-model="content" placeholder="请输入内容"></el-input
      ></el-col>
      <el-col :span="8">
        <el-button type="primary" @click="handelAdd">添加</el-button>
      </el-col>
    </el-row>
    <template>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="title" label="标题" width="160">
        </el-table-column>
        <el-table-column prop="content" label="内容"> </el-table-column>
        <el-table-column prop="add_time" label="时间" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </template>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "app",
  data() {
    return {
      tableData: [],
      title: "",
      content: "",
      pageindex: 1,
      pagesize: 10,
      total: 0,
    };
  },
  mounted() {
    this.getData();
  },
  create() {
    this.getData();
  },
  methods: {
    getData() {
      // 写分页
      this.$axios
        .get("/api/get/user", {
          params: {
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.list;
          // console.log(this.tableData);
          this.total = res.data.total;
        });
    },
    // 删除
    async handleDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(index, row);
      // 传一个参数id post就直接传
      // 解构写法
      // const {data,res} = await('/api/get/user',{ id })
      const result = await axios.post("/api/delete/user", { id });
      console.log(result);
      // 如果是get请求
      /*       const {data,res} = await('/api/get/user',{ 
        params:{
          // id:id
          id
        } 
       }) */
    },
    // 添加
    async handelAdd() {
      if (!this.title || !this.content) {
        alert("请您务必填写标题以及内容信息！");
        return;
      }
      // 可以使用重复的result，其作用域不同
      const result = await axios.post("/api/add/user", {
        // 传入的参数为标签中的标题栏以及内容栏
        title: this.title,
        content: this.content,
      });
      // 重新加载一遍数据
      console.log(result);
      this.getData();
      // 输入完毕后清空内容
      this.title = "";
      this.content = "";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getData();
      console.log(this.pagesize);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageindex = val;
      this.getData();
    },
  },
};
</script>
<style>
</style>

moke/index.js部分

// 使用 Mock
import Mock from 'mockjs'
const data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|20-60': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        "id": '@increment()',
        "title": "@ctitle",
        "content": "@cparagraph",
        "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }]
})
const getQuery = (url,name)=>{
  const index = url.indexOf('?')
  console.log(index);
  if(index !== -1) {
    const queryStrArr = url.substr(index+1).split('&')
    for(var i=0;i<queryStrArr.length;i++) {
      const itemArr = queryStrArr[i].split('=')
      console.log(itemArr)
      if(itemArr[0] === name) {
        return itemArr[1]
      }
    }
  }
}
/* // 输出结果
// console.log(JSON.stringify(data,null,4))
Mock.mock(/\/api\/get\/user/,'get',(options)=>{
  console.log(options);
  return {
      status: 200,
      message: '获取新闻列表数据成功',
      list:data.list,
      total:data.list.length
  }
}) */
// 含有分页的数据列表,有需要接受的参数要使用正则匹配
// /api/get/news?pageindex=1&pagesize=10
Mock.mock(/\/api\/get\/user/, 'get', (options) => {
  console.log(options)
  // 获取传递的参数pageindex
  const pageindex = getQuery(options.url,'pageindex')
  // 获取传递的参数pagesize
  const pagesize = getQuery(options.url,'pagesize')
  // 截取数据的起始位置
  const start = (pageindex-1)*pagesize
  // 截取数据的终点位置
  const end = pageindex*pagesize
  // 计算总页数
  const totalPage = Math.ceil(data.list.length/pagesize)
  // 数据的起始位置：(pageindex-1)*pagesize  数据的结束位置：pageindex*pagesize
  const list = pageindex>totalPage?[]:data.list.slice(start,end)
  return {
    status: 200,
    message: '获取新闻列表成功',
    list: list,
    total: data.list.length
  }
})
// 删除通过post请求
Mock.mock('/api/delete/user','post',(options)=>{
  console.log(options);
  // 要转成对象的形式
  // const body = options.body
  const body = JSON.parse(options.body)
  console.log(body)
  // 如果每一项的id与body的id相等时，则删除本身一行数据
  const index = data.list.findIndex(item=>item.id === body.id);
  data.list.splice(index,1)
  // 过滤数据
  return{
      status: 200,
      message: '删除成功',
      list:data.list,
  }
})
// 添加
Mock.mock('/api/add/user','post',(options)=>{
    console.log(options);
    const body = JSON.parse(options.body)
    data.list.unshift(Mock.mock({
            // 属性 id 是一个自增数，起始值为 1，每次增 1
            "id": '@increment(1)',
            "title": body.title,
            "content": body.content,
            "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }))
    return{
        status: 200,
        message: '添加成功',
        list:data.list,
    }
})
文章标签：
JavaScript
关键词：
数据VUE.js
VUE.js数据
vue数据VUE.js
vue数据
SouthernWind
目录
相关文章
程序员彭于晏
|
25天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
28 1
大树营养快线
|
27天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
31 2
光明顶阳顶天
|
22天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
126 64
阿里巴巴叫我来巡山
|
1天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
34 17
雨溪-yuxi
|
28天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
32 1
vue学习第一章
九月天空
|
25天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
九月天空
23 1
G0518
|
25天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
G0518
27 1
html的七十二变
|
28天前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理：从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制，从数据劫持到视图更新的全过程，详细讲解了其实现原理和运作流程。
html的七十二变
53 2
程序员彭于晏
|
25天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
36 0
程序员彭于晏
|
25天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
程序员彭于晏
37 0

热门文章

最新文章

  • 1
    vue视图更新原理、nextTick()原理
  • 2
    Vue环境下，在单页面中遍历显示出多个Echarts图表
  • 3
    基于springboot+vue的医院预约系统(前后端分离)
  • 4
    Vue打包后Echarts图表不显示问题解决
  • 5
    vue数据绑定原理
  • 6
    揭密 Vue 的双向绑定
  • 7
    vue中异步函数async和await的用法
  • 8
    renrenfast开源项目打包过程，前端使用vue element-UI，前后端分离，打包为一个jar包运行
  • 9
    模拟Vue数据的双向绑定
  • 10
    vue使用echarts实现世界地图和中国地图以及切换地图功能
  • 1
    使用Vue.js构建交互式前端的技术探索
    88
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    164
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    132
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    149
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    180
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    103
  • 7
    vue3中使用动态组件
    102
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    141
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    76
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    120

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云oss存储简介和如何使用