关注
分享
文章平均质量分 82
我现基础上都是多个终端，pc、安卓、苹果、墙上电视等，所以一般网站都会使用前后端分离。
简单掌握一个专业前端对于运维开发来说是有必要的。
vue.js比较火，上手也相对其它专业前端容易，主要是国内使用的还比较多，所以就拿它来学习。
hualinux
十年老运维教你《从0自学Linux运维》，也帮学生党解编程题！原创不易，求点赞和关注！
技术交流请私信
展开
-
hualinux 进阶 vue 6.0 ：关于学习其它vue插件或工具
我相信学完前面这些基础知识，应该有能力自学工作所需要的vue插件或工具了。在这里我就不再继续介绍。原创 2021-04-18 22:55:38 · 186 阅读 · 1 评论 -
hualinux 进阶 vue 5.4：用Element实现增删改查（五）vue实现代码
目录一、运行环境1.1 安装vue router及axios1.2 安装及引入element二、elemnet实现增删除改查代码三、运行效果后端写了，现在写前端使用vue+vue router+element实现代码。在《hualinux 进阶 vue 5.1：用Element实现增删改查（一）需求及分析》已经做了分析了，在这里我就不再讲了，直接上代码。一、运行环境1.1 安装vue router及axios前端element实现代码，这个是基于《hualinu.原创 2021-04-18 22:52:37 · 325 阅读 · 0 评论 -
hualinux 进阶 vue 5.4：用Element实现增删改查（四）后端thinkphp代码编写
前篇写的vue后端对应的mysql数据表，这篇继续讲后端thinkphp代码。需要的知识点：thinkphp，推荐《ThinkPHP6.0完全开发手册》thinkphp使用的是mvc框架，因为前后端分离，我这里只使用了mc，并没有使用它的模板视图v，现在前后端分离是主流，所以后端的话一般不用学v。一、需要修改的thinkphp目录文件红色框的需要添加或修改的，其它不动二、TP数据库的配置2.1 配置数据库（config/database.php）前篇说有my...原创 2021-04-17 21:39:32 · 676 阅读 · 0 评论 -
hualinux 进阶 vue 5.3：用Element实现增删改查（三）生成后端测试数据表
目录一、mysql数据库生成代码二、表结构说明2.1 vue数据库表相关字段及说明2.2 字段的拼接前篇讲了相关的nginx+php+mysql环境搭建，这篇开始写相关后端的用于测试数据。一、mysql数据库生成代码打开sqlyog，复制下面的sql命令，全选执行即可，我这里执行的是100条数据/*SQLyog Ultimate v13.1.1 (64 bit)MySQL - 8.0.12 : Database - hua*********************原创 2021-04-17 14:13:15 · 238 阅读 · 0 评论 -
hualinux 进阶 vue 5.2：用Element实现增删改查（二）后端环境搭建
目录一、环境说明二、相关软件安装2.1 phpStudy安装及配置2.1.1phpStudy下载2.1.2 修改软件版本2.2 使用SQLyog客户端链接一下mysql2.3PhpStorm三、thinkphp的安装3.1 使用composer安装thinkphp3.2 打phpStorm打开thinkphp项目3.3 修改nginx配置3.4 访问效果四、安装Postman上篇说了，如果用vue+vue router+element在前端实现...原创 2021-04-17 13:00:03 · 322 阅读 · 0 评论 -
hualinux 进阶 vue 5.1：用Element实现增删改查（一）需求及分析
我们知道运维开发更的是偏向后台管理方面，所以本章开始以Element UI为例子，展示数据的增删除改查，进行讲解。后端我使用的是PHP的web框架thinkphp，前端使用vue+vue router+axios+element ui 进行操作一、需求1.1 对后台数据进行增删除改操作某网站只是简单的宣传网站，要求工作人员可以对显示的数据进行增删改操作。使用element组件实现效果图，如下图所示：1.2 对某行的操作点某行后面的“编辑”按钮可以对本行进行编辑，编...原创 2021-04-16 21:23:36 · 698 阅读 · 0 评论 -
hualinux 进阶 vue 5.0：vue UI组件介绍及Element UI
目录一、vue流行的UI介绍1.1 un-app所有前端框架1.2 pc浏览器1.3小程序mpvue1.4 移动端1.5桌面端（客户端）Electron二、关于饿了么pc框架element UIvue作为前端软件，前端的UI（界面）我们也挻关心的。也有很多流行的第三方vue界面。有PC、移动端、小程序、桌面端等一、vue流行的UI介绍vue作为前端软件，前端的UI（界面）我们也挻关心的。也有很多流行的第三方vue界面。有PC、移动端、小程序、桌面端等，在...原创 2021-04-14 23:49:31 · 1017 阅读 · 0 评论 -
hualinux 进阶 vue 4.1：axios跨源错误CORS解决
目录一、使用php编写返回json格式的数据1.1 安装phpStudy一键盘集成工具1.2 编写php代码1.3 使用axios访问1.3.1 axios相关vue代码1.3.2 报cros错误二、 cros解决方法2.1解决方法一，充许同源（网站代码上修改）2.2解决方法二，nginx中充许同源2.3解决方法三，在vue中添加（推荐）2.3.1.创建webpack配置文件vue.config.js2.3.2修改vue文件上一篇《hualinu...原创 2021-04-14 22:56:46 · 1560 阅读 · 0 评论 -
hualinux 进阶 vue 4.0：使用axios与后端交互
前面说所说的vue及相关组件都没有与后端交互。因为显示设备的多样化，现在基本上都是使用前后端分离，后端基本上都是使用api方式，基本上是以restful api为主。所以这篇开始讲使用axios与后端api交互。可以先看一下vue.js官方的《使用 axios 访问 API》及 “axios中文文档”中的vue-axios一、axios介绍有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种，而使用基于 promise 的 HTTP 客户端axios...原创 2021-04-14 22:07:13 · 451 阅读 · 0 评论 -
hualinux 进阶 vue 3.3：静态化站及相关vue静态化工具介绍
目录一、为什么要静态化优缺点1.1 优点1.1.1 提高速度1.1.2 搜索引擎的收录1.1.3 安全性1.1.4 网站稳定性1.1.5 缓存加速1.2 缺点二、vue相关的静态化工具2.1Nuxt.js——34000 星和 280+贡献者2.1.1 介绍（有中文）2.1.2 优点2.1.3 缺点2.2VuePress——针对以内容为中心的静态站点优化2.2.1 介绍（有中文）2.2.2 优点2.2.3 缺点2.3Gridso...原创 2021-04-14 11:38:57 · 2359 阅读 · 0 评论 -
hualinux 进阶 vue 3.2：vue router的编写规则
目录一、router相关目录说明1.1 路由链接和渲染App.vue1.1.1 从App.vue代码中分析1.1.2 小结1.2 路由编写规则1.3 路由组件1.4 小结二、例子2.1 需求2.2 实现代码2.2.1 编写路由组件2.2.2 添加路由2.2.3 App.vue显示模板2.3 效果上篇《hualinux 进阶 vue 3.1：vue cli手工创建Vue router》讲了，如何使用vue cli创建带有router功能的项目。.原创 2021-04-13 23:02:26 · 779 阅读 · 0 评论 -
hualinux 进阶 vue 3.1：vue cli手工创建Vue router
目录一、vue-cli安装二、使用vue cli手工安装带router功能的项目2.1 以手工方式创建一个vue项目2.2.1 选择安装方式2.1.2 选择安装的组件2.2.3 选择版本2.2.4 选择历史模式2.2.5 选择css预处理器2.2.6 选择配置2.2.7选择2.2.8 选择配置文件2.2.9 是否保存为预设2.2.10 安装2.2.11 安装完成三、vue router目录结构介绍使用vue cli默认安装是没有路由功能的，.原创 2021-04-12 23:37:23 · 269 阅读 · 0 评论 -
hualinux 进阶 vue 3.0： 添加访问路径Vue Router介绍
我们在前面学的vue的两种方式，普通的以<script>标签导入或vue cli安装方式，都是以单页面，只有一个根路径“/”。在实际网站开发中，我们往往是有多个访问路径的，不同的路径实现不同的显示。vue也有这样的功能，那就是路由route，vue提供相对的插件叫vue router一、vue router介绍1.1 添加访问路径我们前面使用的vue都是只有一个主页，而且是单路径的，访问路径为“/”，如果我们要想普通网站那样，实现多种路径，不同路径访问显示不同的内容， ...原创 2021-04-12 22:14:41 · 476 阅读 · 0 评论 -
hualinux 进阶 vue 2.3：vue cli 实现slot插槽（重要）
在实际应用在slot（插槽）使用的也是很广的，是要求掌握的内容。一、为什么要用slot插槽我们前面所学的父子组件中，子组件中的模板一般是固定的，如果要像html那样，可以在标签之间填写内容，如下面形式<组件标签>内容<组件标签>上面的形式内容是不会被显示的，如下例子<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head>...原创 2021-04-11 22:23:17 · 171 阅读 · 0 评论 -
hualinux 进阶 vue 2.2：使用vue cli实现todolist
目录一、关于用vue cli实现todolist1.1 使用vue cli实现todolist说明1.2 目录说明二、实现代码2.1TodoItem.vue代码2.2App.vue代码2.3 运行效果我在《hualinux 进阶 vue 1.14：todolist（四）删除数据》的例子中，用<script>标签导入vue.js文件，并以数组的方式实现了添加和删除功能。现在我将使用上章vue cli方式创建的工程的基础上，编写一个todolist的添加和删..原创 2021-04-11 21:30:14 · 104 阅读 · 0 评论 -
hualinux 进阶 vue 2.1：vue cli默认项目结构及其vue编写规则
前面我们讲了使用vue cli安装vue，这章讲使用vue cli安装vue后，如何编写vue代码，和之前<script>导入vue.js文件有些出入。原创 2021-04-09 00:45:04 · 163 阅读 · 0 评论 -
hualinux 进阶 vue 2.0： 使用Vue cli工具以npm安装vue
前面使用vue都是以<script>标签引入vue.js文件的，只能用到vue的基础功能，如果要构建复杂有点的，还要用npm方式安装，这样可以使用vue、第三方工具、vue插件等。vue也提供了vue cli工具方便我们快速以npm方式创建vue。所以我们就以vue cli的方式学习之前建议先看一下vue cli官方导读一、Vue cli知识点前面所有例子，我们所有的代码都写在一个index.html中，当我们开发大型项目，用这种方式肯定是不行的。1.1npm介...原创 2021-04-08 17:37:57 · 369 阅读 · 0 评论 -
hualinux 进阶 vue 1.14：todolist（四）删除数据
目录一、需求二、分析2.1 js数组的删除方法2.2 子组件向父组件传值vm.$emit( eventName, […args] )三、实现代码在上章的例子中，我们实现了数据的添加，本章将实现删除数据。一、需求在上章父子组件中，实现todolist删除功能。上章代码回顾。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2021-04-07 20:13:11 · 227 阅读 · 0 评论 -
hualinux 进阶 vue 1.12：todolist（二）组件拆分
目录一、全局组件定义1.1 说明1.2 例子二、组件名大小写三、局部组件3.1 定义3.2 例子组件是指网页上的某一部分，当我们做的网页很大的时候，我们可以把一个大型的网页拆成几个部分。每一个组分就是一个小的组件，这个每个组件维护就简单多了。我们需要学习如何定义组件、组件之间如何通讯上章例子中的li数据展示只是简单的部分，如果数据展示或关系变得复杂的时候就要抽离出来变成一个单独的组件。一、全局组件定义1.1 说明在Vue官方对组件定义为组件是可..原创 2021-04-07 20:11:47 · 114 阅读 · 0 评论 -
hualinux 进阶 vue 1.11：todolist（一）功能开发
目录一、需求二、分析三、实现代码我这里写一个综合例子todolist（待办事情），列出待办事情的列表。一、需求如下图所示：我们希望，当在输入框中输入内容，点提交的时候，内容显示在列表中二、分析为了保存上面的数据，我们可以使用js的数组list功能，如果忘记了可以回看一下js数组。添加元素可以使用js数组的push方法三、实现代码<!DOCTYPE html><html lang="en"><head> &.原创 2021-04-07 20:10:57 · 142 阅读 · 0 评论 -
hualinux 进阶 vue 1.10：vue命令（六）循环v-for命令
目录一、v-for指令用法二、例子列出水果三、注意事项有时要以列表的方式，显示数据，使用循环命令是最好不过的了。vue也提供了v-for循环命令。一、v-for指令用法可以看Vue的v-for指令预期：Array | Object | number | string | Iterable (2.6 新增) 用法：基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法alias in expression，为当前遍历的元素提供别名：<div v-f...原创 2021-04-07 20:02:14 · 492 阅读 · 0 评论 -
hualinux 进阶 vue 1.13：todolist（三）组件与实例的关系
一、组件与实例的关系每一个Vue的组件都是vue的实例。任何一个Vue项目都是有千千万万的Vue实例组成的。二、例子怎样判断是一个vue实例，可以把前章的例子修改一下，添加一些方法和事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue test</title> <script src.原创 2021-04-07 20:12:34 · 131 阅读 · 0 评论 -
hualinux 进阶 vue 1.9：vue命令（五）显示隐藏v-show命令
目录一、v-show指令用法二、例子三、v-if与v-show隐藏的区别vue的v-show命令使用的频率也挻高的，主要是显示和隐藏。这个不会产生占位。一、v-show指令用法可以看Vue的v-show指令预期：any 用法：根据表达式之真假值，切换元素的displayCSS property。当条件变化时该指令触发过渡效果。参考：条件渲染 - v-show二、例子把前章v-if的例子改为v-show试下<div v-show="show"&..原创 2021-04-06 17:55:18 · 540 阅读 · 0 评论 -
hualinux 进阶 vue 1.8：vue命令（四）条件判断v-if命令
目录一、v-if用法二、例子这些讲vue的条件判断命令v-if，还有v-else 、v-else-if可以自己看一下一、v-if用法v-if条件可以看Vue中的v-if预期：any 用法：根据表达式的值的truthiness来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是<template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。当和v-if一起使用时，v-for的优先级比v-if更高...原创 2021-04-06 17:42:32 · 213 阅读 · 0 评论 -
hualinux 进阶 vue 1.7：vue命令（三）计算属性computed和侦听属性watch
目录一、计算属性1.1computed前言1.2computed说明1.3computed好处二、侦听属性2.1watch方法侦听属性2.2 例子继续vue命令，计算属性computed和侦听属性watch参考：Vue中的计算属性和侦听器一、计算属性1.1computed前言我们先看例子，在文本中输入姓名，在最下方显示姓名，代码如下：<body> <div id="root"> 姓：<...原创 2021-04-06 17:33:42 · 101 阅读 · 0 评论 -
hualinux 进阶 vue 1.6：vue命令（二）属性绑定v-bind 双向数据绑定v-model
目录一、属性绑定v-bind（单向）1.1 用法1.2 例子1.2.1没使用v-bind前的例子1.2.2 使用v-bind绑定二、双向绑定v-model2.1v-model用法2.2 例子继续vue命令属性绑定v-bind和双向数据绑定一、属性绑定v-bind（单向）1.1 用法单向绑定：数据决定页面的显示，但页面无法决定数据里面的内容。PS：当我们要把vue中的数据的值，赋值给html其中一个属性怎办？比如<p>标签的 tex...原创 2021-04-06 14:03:48 · 262 阅读 · 0 评论 -
hualinux 进阶 vue 1.5：vue命令（一）数据、事件和方法
目录一、vue数据相关命令1.1Mustache文件插值1.1.1 说明1.1.2 例子1.2v-text 命令1.2.1 说明1.2.2 例子1.3使用v-html命令1.3.1 说明1.3.2 例子二、事件2.1模板v-on指令2.2 例子2.3例2三、自定义事件（学完后回看）3.1 说明3.2 例子此章开始讲一下vue一些常用的主要命令，并不是每个vue命令都讲到，主要是方便初学者理解vue而已，起到指引作用。一...原创 2021-04-06 13:42:42 · 111 阅读 · 0 评论 -
hualinux 进阶 vue 1.4：挂载点、模板、实例的关系
目录一、挂载点1.1挂载点的概念1.2挂载点的作用二、模板template前章说vue实例的两个重要参数el挂载点和data数据显示，现在再说挂载点、模板、实例的关系。一、挂载点1.1挂载点的概念引用《hualinux 进阶 vue 1-1.2：使用webStrom创建vue例子（标签引入）》中的代码来说明<div id="root">hello {{ msg }}</div><script> new Vue({...原创 2021-04-06 13:07:24 · 131 阅读 · 0 评论 -
hualinux 进阶 vue 1.3：vue实例参数el data说明
目录一、前章vue代码回顾二、vue实例参数：el挂载点（必填）2.1 说明三、Vue实例参数：data数据显示（数据显示）3.1 说明3.2 原生js与vue对比四、注意事项前章我们讲了vue的简单例子，现在讲vue基础语法：挂载点、模板、实例一、前章vue代码回顾为了更好的对语法说明，我这里要借助一下上章vue的例子，代码如下：<!DOCTYPE html><html lang="en"><head> &.原创 2021-04-06 12:56:27 · 1031 阅读 · 0 评论 -
hualinux 进阶 vue 1.2：使用webStrom创建vue例子（标签引入）
目录一、webStrom下载及安装二、创建一个简单的vue2.1 创建一个空工程2.2 使用2.2.1 vue.js文件下载2.2.2 引导vue.js文件2.3 使用vue.js打印hello2.4 运行html这节我使用webStrom创建一个普通的html，并使用js的方式引用vue.js，方便新手学习。也可以先学习一下vue.js官网导读部分内容一、webStrom下载及安装可以去webStrom官网下载，双击安装即可，这里不详细说明了，如果真的是不懂的话，可以找我。原创 2021-04-06 12:33:45 · 131 阅读 · 0 评论 -
hualinux 进阶 vue 1.1：vue介绍及安装方式说明
此章主要是介绍vue.js及安装方式一、vue.js介绍vue.js官网就已经做了说明，vue是渐进式 JavaScript 框架。看到.js后缀一般都能猜出它是js框架；至于什么是渐进式，我这里引用别人网上的笔者理解的“渐进式框架”也非常简单，就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。场景一：公司刚开始一个项目，技术人员对Vue的掌握也不足够。那么我们就不能使用VUE了么？当然不是，如果你只是使用VUE做些基础操.原创 2021-04-06 11:14:45 · 126 阅读 · 0 评论 -
hualinux 进阶 vue 1.0：需要的基础知识
因为vue.js是专业的前端，所以需要有定的基础，要懂：1. html、css、javaScript，ES6（也称ES2015）、json2. 有点后端知识，主要是api的简单编写，如果不懂的话，要相关学习资料，可以看我相关专栏或私信我一、相关基础前端知识资料推荐1.1 相关书籍对于入门的人我觉得下面学过的资料挻不错的《HTML从入门到精通》、《js教程》、《JavaScript 教程》《ECMAScript 6 入门教程》《JSON 教程》《vue官网》...原创 2021-04-06 10:03:41 · 122 阅读 · 0 评论