vue基础页面模板

太过爱你忘了你带给我的痛 2023-01-23 06:55 2阅读 0赞

<template>
        
        <div id="page">
          <div class="demo">{
       {data}}</div>
          <ComponentsDemo></ComponentsDemo>
        </div>
    </template>
    
    <script>
      import {demoApi} from '@/services/api' // 接口引用
      import ComponentsDemo from './ComponentsDemo' // 组件引用
      export default {
        name: "demo",
        components: { // 组件定义
          ComponentsDemo
        },
        data() {
          return { // 数据
            data: 'demo'
          }
        },
        mounted() { // 生命周期：页面煊染后执行
          this.initPage()
        },
        methods: { // 函数方法，默认不执行，需调用
          initPage() {
            console.log('hello world!')
            this.handleData()
          },
          handleData() {
            // 接口请求
            let para = {
              page: 1
            }
            demoApi(para).then(res => {
              if (res.code === 200) {
                this.data = res.data
              }
            }).catch(() => {
            })
          }
        }
      }
    </script>
    
    <style scoped>
      /*样式*/
      .demo{
        font-size: 12px;
      }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue设置快速创建vue页面，手动添加vue页面模板

使用vue创建页面时，如果你想快速创建一个你喜欢的完整vue页面模板，就请手指动起来==> 1.首先在头部导航部分找到文件文件(F)-->首选项-->文件代码片段-...

旧城等待，/ 2024年04月19日 09:08/ 0 赞/ 98 阅读

相关 Vue基础-3.Vue 组件模板语法

前言 [我只介绍了常用的，更全的可以去看官网][Link 1] 基本语法当涉及到Vue组件模板语法时，有很多不同的概念和元素需要考虑。以下是一个更详细的Vue组

骑猪看日落/ 2024年03月24日 18:30/ 0 赞/ 150 阅读

相关【Vue基础】Vue路由，实现页面跳转

一、需求说明点击不同的模块实现页面跳转，如下点击“员工管理”右侧会显示员工管理页面，如下图1；点击“入住信息”右侧会显示入住信息，如下图二 ![7cf2eb2df4a64

偏执的太偏执、/ 2023年10月11日 22:04/ 0 赞/ 112 阅读

相关二.Vue基础-Vue模板语法

文章目录二.\`Vue\`基础-\`Vue\`模板语法一.插值标签属性绑定二.指令

超、凢脫俗/ 2023年06月18日 12:59/ 0 赞/ 36 阅读

相关 Vue基础（二）--模板和过滤器

模板 1.简介 Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据模板就是\{ \{\}\}，用来进行数据绑定，显示在页面中也

川长思鸟来/ 2023年06月11日 06:28/ 0 赞/ 34 阅读

相关 Vue 模板

[原文][Link 1] 在Vue中，Vue模板对应的就是Vue中的View（视图）部分，也是Vue重中之一，而在Vue中要了解Vue模板我们就需要从两个方面来着手，其一

淡淡的烟草味﹌/ 2023年02月16日 04:14/ 0 赞/ 60 阅读

相关 vue基础页面模板

<template>  <div id="page"> <div class="demo">{

太过爱你忘了你带给我的痛/ 2023年01月23日 06:55/ 0 赞/ 3 阅读

相关 Vue基础(三)模板语法

插值 1. 文本 vue 使用 "\{ \{" 和 "\}\}" 作为数据绑定的文本插值语法, 这个也可以修改成你习惯的形式, 比如: <

迷南。/ 2022年12月02日 00:44/ 0 赞/ 212 阅读

相关 HTML中使用VUE的模板页面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

墨蓝/ 2022年11月29日 08:13/ 0 赞/ 235 阅读

相关 vue文件快速生成页面模板

一 Vscode新建模板 1 菜单选择 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

超、凢脫俗/ 2021年07月24日 20:35/ 0 赞/ 918 阅读