vue进阶

1、vue-cli 使用

在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦,vue官方提供了一个快速搭建vue项目的脚手架,使用它能快速的构建一个web工程模板。

官网: Vue CLI

  • 安装vue-cli3命令:
npm install -g @vue/cli@3.x
  • 创建项目:
vue create my-project
  • 运行项目
npm run serve

2、vue组件化及其通信

  • 单文件组件

  • 什么是组件?

所谓组件化,就是把页面拆分成多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。

方便重复使用,提高开发效率。

  • 组件通信

常见使用场景可以分为三类:

    • 父子通信:一般通过props 和 $emit 实现
      • 什么是props? 例如el-button,我们使用它时,传递了不同的type,而el-button组件就会根据不同的type属性值,渲染不一样的按钮。

      • 什么是$emit

如el-select下拉框组件,当选中值发生变化时,它会执行 this.$emit('change','目前选中值')。

我们在页面中引用el-select 的地方使用事件监听 @change,接收子组件传来的change事件并进行处 理。

    • 兄弟通信:

Bus 或者 Vuex

    • 跨级通信:

Bus;Vuex;provide / inject API、$attrs/$listeners

3、 vue-router使用

Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。地址:https://router.vuejs.org/zh/

4、 vuex使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 是什么? | Vuex

5、 Axios使用

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

官网:使用说明 · Axios 中文说明 · 看云

6、 UI框架-后台管理系统端

iview: iView - A high quality UI Toolkit based on Vue.js

element-ui: Element - The world's most popular Vue UI framework

7、 项目目录

  • vue-cli3下的目录结构

  • 与vue-cli2工程目录的区别
    • vue-cli3移除了配置文件目录:config 和 build 文件夹,增加了vue.config.js文件
    • vue-cli3移除了static 静态文件夹
    • vue-cli3新增了public文件夹,将index.html移动到了 public 中。

常用单页面模版 xxx.vue

<template></template><script>
export default {name: '',mixins: [],components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},destroyed () {},methods: {}
}
</script><style scoped  lang="less"></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357337.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每天一个linux命令(1):ln 命令

每天一个linux命令&#xff08;35&#xff09;&#xff1a;ln 命令 ln 是linux中又一个非常重要命令&#xff0c;它的功能是为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录&#xff0c;用到相同的文件时&#xff0c;我们不需要在 每一个需要的目录下都放…

ehcache 程序_将Ehcache添加到Openxava应用程序

ehcache 程序介绍 本文介绍如何在Openxava应用程序上快速启用Ehcache&#xff0c;从而提高性能。 查看实体及其图形时&#xff0c;将加载关系。 添加第二级缓存可加快关联元素的检索速度&#xff0c;因为已加载的元素是从缓存而不是数据库中检索的。 最终&#xff0c;该页面解…

Diff 算法核心原理

什么是虚拟DOM 讲Diff算法前&#xff0c;我先给大家讲一讲什么是虚拟DOM吧。这有利于后面大家对Diff算法的理解加深。 虚拟DOM是一个对象&#xff0c;一个什么样的对象呢&#xff1f;一个用来表示真实DOM的对象&#xff0c;要记住这句话。我举个例子&#xff0c;请看以下真实…

比较Java 8中的命令式和功能性算法

Mario Fusco的流行推文令人印象深刻&#xff0c;显示了类似算法的命令性和功能性方法之间的主要区别实际上是&#xff1a; 势在必行–功能分离pic.twitter.com/G2cC6iBkDJ — Mario Fusco&#xff08;mariofusco&#xff09; 2015年3月1日 两种算法都做同样的事情&#xff0…

mvc的视图中显示DataTable的方法

mvc的视图中显示DataTable的方法&#xff1a; 不断的循环画出table {ViewBag.Title "ShowDataTable"; } using System.Data; model Models.ConModel{var table Model.ExcelTable as DataTable; }<script src"~/Scripts/My97DatePicker/WdatePicker.js"…

rem,em,px,rpx等

1、任意浏览器的默认字体高都是16px。谷歌浏览器显示的最小字体大小是12px。 exp&#xff1a;突破谷歌浏览器显示12px限制。 &#xff08;1&#xff09;、<div>文本</div> 文本嵌套块标签&#xff0c;这是因为缩放只对有宽高的标签有效&#xff0c;缩放的时候也是…

python 列表 字典 读写文件:pickle模块的基本使用

建议大家使用cPickle&#xff0c;速度更快&#xff01;&#xff01;&#xff01; python数据持久存储&#xff1a;pickle模块的基本使用&#xff08;转载&#xff09; 作者: pzxbc出处: http://pzxbc.cnblogs.com/本文版权归作者和博客园共有&#xff0c;欢迎转载&#xff0c;但…

first-child、first-of-type等属性的差别

1、xxx:first-child 伪类 xxx作为第一个子元素 //p元素作为第一个子元素的都会变色 p:first-child { background:yellow; } //p作为父元素的 第一个子元素。不要求第一个元素的类型 p>:first-child {background:yellow; }//p作为父元素的 第一个子元素。要求第一个元素的类…

js 手机端触发事事件、javascript手机端/移动端触发事件

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统…

java 8 lambda_Java 8的烹调方式– Lambda项目

java 8 lambda什么是project lambda &#xff1a;Project lambda是用于以Java语言语法启用lambda表达式的项目。 Lambda表达式是功能编程语言&#xff08;如lisp&#xff09;中的主要语法。 Groovy将是支持lambda表达式&#xff08;也称为闭包&#xff09;的java的最接近亲戚。…

我的Serverless实战——引领云计算的下一个十年

前言&#xff1a;如今&#xff0c;越来越多的大厂企业开始大规模使用Serverless&#xff0c;处于变革中的开发者&#xff0c;大多已从观望状态转向尝试阶段&#xff0c;越来越多Serverless落地场景被解锁。作为基础研发底座&#xff0c;越来越多企业开始接受Serverless&#xf…

各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解

1、clientWidth、offsetWidth、scrollWidth <!DOCTYPE html> <html><head><meta charset"utf-8" /><style>#box1 {padding: 50px;position: static;}#box {border: 1px solid red;overflow: scroll;height: 200px;width: 500px;}#con…

encodeURIComponent的使用

URL 元字符&#xff1a;分号&#xff08;;&#xff09;&#xff0c;逗号&#xff08;,&#xff09;&#xff0c;斜杠&#xff08;/&#xff09;&#xff0c;问号&#xff08;?&#xff09;&#xff0c;冒号&#xff08;:&#xff09;&#xff0c;at&#xff08;&#xff09;&a…

如何以及何时使用枚举和注释

本文是我们名为“ 高级Java ”的学院课程的一部分。 本课程旨在帮助您最有效地使用Java。 它讨论了高级主题&#xff0c;包括对象创建&#xff0c;并发&#xff0c;序列化&#xff0c;反射等。 它将指导您完成Java掌握的过程&#xff01; 在这里查看 &#xff01; 目录 1.简…

花了两天时间用html+css+js做了一个网页版坦克大战游戏

大家好&#xff0c;我是孙叫兽&#xff0c;本期内容给大家分享如何用htmlcssjavaScript去做一个简易网页版坦克游戏。 目录 坦克游戏玩法及介绍 项目结构 源码地址&#xff1a; 坦克游戏玩法及介绍 我们先来看一下首页。 打开这个首页很简单&#xff0c;基本是上面这个样子&…

软件工程第一次冲刺进度条(1-10天)

第一天&#xff08;4.20&#xff09;昨天做了什么今天做了什么遇到的问题配置安装所需要的环境和相关软件 查询android关于界面编程与视图的相关资料并且初步编写代码 配置虚拟机的时候电脑上总是失败第二天&#xff08;4.21&#xff09;昨天做了什么今天做了什么遇到的问题查询…

css基础过渡与动画与应用于vue、react

一、css属性过渡transition 1、解释&#xff1a; 使用该属性后变化不会在一瞬间完成&#xff0c;会有一个连续的变化效果。第一个参数设置哪些属性变化时需要有连续的效果。 不论用什么方式使属性的值发生变化&#xff0c;transition都会生效。 2、语法&#xff1a; trans…

Android项目开发填坑记-Fragment的onAttach

背景 现在Android开发多使用一个Activity管理多个Fragment进行开发&#xff0c;不免需要两者相互传递数据&#xff0c;一般是给Fragment添加回调接口&#xff0c;让Activity继承并实现。 回调接口一般都写在Fragment的onAttach()方法中&#xff0c;Fragment 3.0 的onAttach()方…

前端开发——移动端及响应式布局解决办法总结(适配)

问题分析:前端开发一个产品(网站、系统、APP等)会遇到的一个难点就是适配问题,比如开发一个网站,你在一个页面开发的时候从视觉看起来没什么异样,换个不同分别率的设备,电脑,手机等,发现样式全乱了,这个不是我们想要的结果,所以,浏览器适配,响应式布局就显得尤为重…

来点小技巧,Array.filter(Boolean)、 [].slice.call(this)等等

1、Array.filter(Boolean) 移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string)。 Boolean 是一个函数相当于直接传了个函数进去 Array.filter(Boolean)Array.filter(i>Boolean(i)) Array.filter(i>i) let a [1, 2, b, 0, {}, , N…