通过vue完成表格数据的渲染展示和vue的生命周期及小结

案例

通过vue完成表格数据的渲染展示

把视图区展示的数据 死数据替换掉

从vue的数据模型中读取 展示在视图区

vue中的数据 模型是js中的自定义类型 形成的数组

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue案例</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>
  <!--定义视图层的展示区域-->
  <div id="app">

    <table border="1" cellspacing="0" width="60%">
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>成绩</th>
      <th>等级</th>
    </tr>
    
    <!--在第二个 tr 上加上指令-->
    <tr align="center" v-for="(user,index) in users">
      <td>{{index+1}}</td>
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
      <td>
        <span v-if="user.gender==1">男</span>
        <span v-if="user.gender==2">女</span>
      </td>
      <td>{{user.score}}</td>
      <td>
        <span v-if="user.score>=85">优秀</span>
        <span v-else-if="user.score>=60">良好</span>
        <span style="color: red;" v-else>不及格</span>
      </td>
    </tr>

  </table>
  </div>
  
</body>
<script>
    //定义 vue 对象
    //将 vue 中的数据模型遍历展示在视图层的表格中
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
        users:[{
          name:"Tom",
          age:20,
          gender:1,
          score:78,
        },{
          name:"Rose",
          age:18,
          gender:2,
          score:86,
        },{
          name:"Jerry",
          age:26,
          gender:1,
          score:90,
        },{
          name:"Tony",
          age:30,
          gender:1,
          score:52,
        }]
      },
      //定义函数
      methods:{
        
      }
   })

</script>
</html>

生命周期

一个对象从创建到销毁的全部过程

知道了vue的生命周期后

我们可以在指定的生命周期内完成对应的任务

我们主要是学习mounted这个生命周期

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue案例</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>
  <!--定义视图层的展示区域-->
  <div id="app">

  
  </div>
  
</body>
<script>
    //定义 vue 对象
    //将 vue 中的数据模型遍历展示在视图层的表格中
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
       
      },
      //定义函数
      methods:{
        
      },
      //定义 vue 生命周期的方法
      //在 vue 生命周期中是自动调用 不需要我们启动
      mounted (){
        alert("vue 挂载完成 发送请求到服务端");
      }
   })

</script>
</html>

mounted

挂载成功 Vue初始化成功 HTML页面渲染成功

发送请求到服务端 加载数据

小结

相关推荐
江拥羡橙4 小时前
Vue和React怎么选?全面比对
前端·vue.js·react.js
千码君20164 小时前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
楼田莉子6 小时前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝6 小时前
Vue总结
前端·javascript·vue.js
木易 士心6 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER6 小时前
Web 开发 21
前端·学习
又是忙碌的一天6 小时前
前端学习day01
前端·学习·html
Joker Zxc6 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
excel6 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
大前端helloworld7 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端