草庐IT

后端必会的前端vue基础知识

远走与梦游 2023-05-06 原文

前端目录结构

build ------前端工程webpack构建设置

config ------ 前端工程构建参数设置(index.js 打包)

src ---- 项目代码

        api ---- 服务端口请求

        assets ---- 项目静态文件、图片

        coponents ---- 项目自定义组件

        mock ----- 模拟数据

        router ----- 项目路由配置

        style ----- 项目样式文件

        utils ----- 项目公告方法文件

        directives ----- 项目自定义指令文件

        mixins ---- 项目混入文件

        views ----- 页面

        app.vue ---- 项目入口渲染页面

        main.js ----- 项目入口文件，创建整个vue实列，将router、样式注入

index.html  ---- 项目入口模板

package.json ---- 项目依赖配置

sysconfig.js ----  项目常用接口配置

Render函数render

第一：语法是：render: (h, params) => {
此时它所代表得含义是：render:(h,params) => {
return h(" 定义的元素 “，{ 元素的性质 }，” 元素的内容"/[元素的内容])
实例：
title: ‘角色’,
key: ‘role’,
width: ‘70px’,
render: (h, params) => {
if (params.row.role === ‘m’) return h(‘span’, {style: ‘background-color: #17dc1d’}, ‘主’)
else if (params.row.role === ‘s’) return h(‘span’, {style: ‘background-color: #17c1dc’}, ‘备’)
else return h(‘span’, {style: ‘background-color: #dc8417’}, ‘无’)
}

this.$moment

main.js 挂载 引入

import moment from 'moment'//导入文件
Vue.prototype.$moment = moment;//赋值使用

在组件中使用this.$moment
this.$moment('string').format("YYYY-DD-MM")
this.$moment('2018-09-19T05:54:32.767Z').format("YYYY-DD-MM")

let galeDt = this.$moment(params.row.galeDt, "YYYYMMDD").format("YYYY-MM-DD");

Object.assign({}, this.data)

js 中 拷贝对象原生方法，用于对象合并 Object.assign({}, this.data)

总体页面介绍

data(){

        return{

        //保存当前页面的局部变量，data数据必须用return返回

        }

},

components:{

//当前页面引入自定义的组件

},

props:{

//当前页面组件接受外部变量

},

watch:{

//监听页面data、props变量变化

},

computed:{

//定义template中需要计算的变量，返回计算后的值

},

created(){

//页面创建完后需要执行的内容

//此时页面组件还没有挂载，不能获取document内容

},

mounted(){

//页面渲染后完成要执行的内容

},

updated(){

//数据更改需牛DOM重新渲染后要执行的内容

},

destroyed(){

//页面组件实例销毁后执行的内容

}

v-if玉v-show区别

v-if不会渲染，dom节点是没有的，v-show有dom节点，相当于display:none

v-model：界面上实时输入数据的时候，对应的表单绑定值已经被更改

父子通信prop

父组件的数据需要通过prop才能下发到子组件中

注意：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定，父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值，但是不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告

//子传父
getPropList(){
    if(this.PageShow){
      this.$emit('get-data',this.pageInfo)
    }else{
      this.#emit('get-data')
    }
}

//父页面
<title @get-data="getPropList">

基础知识vuespanstylecolor前端vue.jsjavascript

有关后端必会的前端vue基础知识的更多相关文章

  1. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  2. 软件测试基础 - 2

    Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug，发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则：20%的主要功能要重点测（eg：支付宝的支付功能，其他功能都是次要的）80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  4. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  5. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？

  6. 【网络】-- 网络基础 - 2

    （本文是网络的宏观的概念铺垫）目录计算机网络背景网络发展认识"协议"网络协议初识协议分层OSI七层模型TCP/IP五层(或四层)模型报头以太网碰撞路由器IP地址和MAC地址IP地址与MAC地址总结IP地址MAC地址计算机网络背景网络发展        是最开始先有的计算机，计算机后来因为多项技术的水平升高，逐渐的计算机变的小型化、高效化。后来因为计算机其本身的计算能力比较的快速：独立模式：计算机之间相互独立。    如：有三个人，每个人做的不同的事物，但是是需要协作的完成。    而这三个人所做的事是需要进行协作的，然而刚开始因为每一台计算机之间都是互相独立的。所以前面的人处理完了就需要将数据

  7. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  8. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  9. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert

  10. 【Elasticsearch基础】Elasticsearch索引、文档以及映射操作详解 - 2

    文章目录概念索引相关操作创建索引更新副本查看索引删除索引索引的打开与关闭收缩索引索引别名查询索引别名文档相关操作新建文档查询文档更新文档删除文档映射相关操作查询文档映射创建静态映射创建索引并添加映射概念es中有三个概念要清楚，分别为索引、映射和文档（不用死记硬背，大概有个印象就可以）索引可理解为MySQL数据库；映射可理解为MySQL的表结构；文档可理解为MySQL表中的每行数据静态映射和动态映射上面已经介绍了，映射可理解为MySQL的表结构，在MySQL中，向表中插入数据是需要先创建表结构的；但在es中不必这样，可以直接插入文档，es可以根据插入的文档（数据），动态的创建映射（表结构），这就

随机推荐