-
后端程序员学习vue
2020-09-18 22:50:58vue基本语法学习 一：概述 1. vue是什么？ 2. 基本的指令有哪些？ 3. 指令的修饰符有哪些？ 4. 什么是事件？ 5. 事件修饰符是什么？ 6. 如何自定义指令？ 7. 对象的生命周期是什么？ 8. 局部过滤器和全局过滤器是...展开全文vue基本语法学习
一：概述
1. vue是什么？ 2. 基本的指令有哪些？ 3. 指令的修饰符有哪些？ 4. 什么是事件？ 5. 事件修饰符是什么？ 6. 如何自定义指令？ 7. 对象的生命周期是什么？ 8. 局部过滤器和全局过滤器是如何定义的？ 9. 局部组件和全局组件是如何定义的？ 10. 组件是如何值是如何传递的？ 11. 如何调用接口？ 12. 什么是路由？ 13. 开发中如何实现路由？ 14. 什么是模块化？ 15. webpack是什么？ 16. vue单文件组件如何实现？ 17. vue脚手架如何使用？ 18. Element-UI如何使用？二：vue是什么
vue是一个前端框架。html和数据、方法隔离。2.1：vue入门程序
在使用vue时候，要先导入vue包。 //src="../utils/vue.js"代表vue相对路径 <script type="text/javascript" src="../utils/vue.js"></script><body> <!-- 页面表现层 --> <div id="first"> <div>{{ msg }}</div> <div>{{ 1 + 2 }}</div> <div>{{ msg + "-------------" + 123}}</div> </div> <!-- 导入vue包 --> <script type="text/javascript" src="../utils/vue.js"></script> <script> // 数据和数据处理 var vm = new Vue({ //id为first的标签 el: "#first", //为<div id="first">标签中数据 data: { msg: '学习前端知识太难了' } }); </script> </body>
2.2：v-text、v-html、v-pre、v-once、v-on、v-bind、v-model
- v-text、v-html、{{}}（取值标签）
<html> <body> <div id="app"> <div>{{msg1}}</div> <div v-text="msg1"></div> <div v-html="msg2"></div> </div> </body> <script type="text/javascript" src="../utils/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { msg1: "<h1>hello vue</h1>", msg2: "<h1>hello vue</h1>", msg3: "<h1>hello vue</h1>" } }); </script> </html>
2. v-model(取值标签)<html> <body> <div id="app"> <div>{{msg1}}</div> <input type="text" v-model="msg1"> </div> </body> <script type="text/javascript" src="../utils/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { msg1:"1111" } }); </script> </html>
3. v-pre(修饰标签)
//跳过编译，直接显示原始内容。<html> <body> <div id="app"> <div v-pre>{{msg1}}</div> </div> </body> <script type="text/javascript" src="../utils/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { msg1:"1111" } }); </script> </html>
忙于新的任务，估计得等段时间学习了。
-
后端程序员学习vue|第一章 前后端分离
2019-12-05 09:20:07因为自己的项目前端是基于vue的，导致很多同学看不懂前端代码，这边我简单的介绍一下我学习vue的过程，加快后端同学对前端的学习理解。 什么是前后端分离 已经懂前后端分离和RestfulAPI意义的可以跳过这个章节。 早...展开全文前言
因为自己的项目前端是基于vue的，导致很多同学看不懂前端代码，这边我简单的介绍一下我学习vue的过程，加快后端同学对前端的学习理解。
什么是前后端分离
已经懂前后端分离和RestfulAPI意义的可以跳过这个章节。
早些时候的web开发是基于servelet的jsp，前后端冗余，那时候的前端和现在含义并不一样，以前的前端更适合叫UI，开发大都还是后端来写。但是这种开发模式有几个问题，一是开发压力很大，既要考虑后端代码，也要考虑前端实现，二是随着小程序，混合app开发，传统的jsp里的接口都要重写，功能明明一样，但是代码却2份，三就是维护问题，jsp项目后期的维护难度很大，四是代码逻辑冗余，需要解耦等。
各种问题爆发之后，前后端分离刻不容缓，java开发最适合的技术选择就是springboot+vue，这里推荐看下我“Springboot单体架构搭建”系列文章（RestfulAPI在那里有介绍，这里就不介绍了）。Springboot是最适合java后端RestfulAPI开发的框架，目前没有之一。前端的选择则很多，只要支持请求RestfulAPI都行，目前主流是vue，react，angular（老版本angular.js，不推荐学习了）。我选择vue的原因很简单，因为简单易学。
前后端分离之后，前端代码也可以直接单独部署（通常部署到nginx，建议看下我docker系列文章），如果你前端代码都不能单独运行，你们项目肯定不是分离的了。当然也不是一定要分离，如果你们确实没有前端人员，为了方便也可以选择后端模版引擎，jsp真心已经过时不要再为难自己和后续接手开发了，这里推荐thymleaft和freemarker，开发模式和jsp很像，简单易学。前后端分离注意点
前后端分离之后的权限验证也需要重新设计，这里推荐jwt模式（JSON Web Tokens），简单理解就是登陆请求之后给前端发一个token，之后每次前端请求都要带上token头来证明自己的权限，我在自己“Springboot单体架构搭建”系列文章有实现一个简单的jwt模式。
不支持ie低版本，比如Vue 不支持 IE8 及以下版本。
对于爬虫支持不是很好，不太适合做官网首页展示等需要百度爬虫的业务，推荐使用模版引擎。学习资料
官网https://cn.vuejs.org/不多说，先速通一轮官网教程，知道有哪些功能在哪找到，不需要全部记住，开发时候能找到位置就行。
优秀的开源项目，目前只推荐https://github.com/PanJiaChen/vue-element-admin
适合的UI框架，web端element-ui（强推），app端iview（暂时不推荐vue直接开发app，react和angular更成熟）
-
后端程序员学习Vue的第一天
2019-10-06 23:55:27学习Vue的第一天 觉得身为后端程序员，以后必不可免都需要接触到前端，后端程序员至少也需要具备一种数据交互的手段，所以从今天开始，学习Vue来弥补短板 ...展开全文学习Vue的第一天
觉得身为后端程序员，以后必不可免都需要接触到前端，后端程序员至少也需要具备一种数据交互的手段，所以从今天开始，学习Vue来弥补短板
标签 效果 v-cloak 在文本标签中使用 v-cloak 能够解决插值表达式闪烁的问题 v-text=“msg” 默认使用v-text没有闪烁问题，但是会覆盖标签中的内容 v-html=“msg” 与text一样，但是text无法编译内容中的标签，html可以 v-bind:title=“msg1” 是Vue提供的用于绑定属性的指令,v-bind中可以书写合法的JS表达式 :title =“msg1” 与v-bind:title是同样的效果 v-on=“msg” 事件绑定机制 Vue的使用
<body> <div id="app"> <p v-cloak>{{msg}}</p> <p v-text="msg"></p> <p v-html="msg1"></p> <input type="button" value="按钮" v-bind:title="msg +'123'"></input> <input type="button" value="按钮" v-on:click="show"></input> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el:"#app"//某个div的id data:{ msg:'123',//{{msg}}可以使用插值表达式获得值 msg1:'<h4> 222 </h4>', } methods:{//在methods里定义所有可用的方法 show:function(){ alert('Hello') } } }) </script> </body>
-
后端人员学习vue-饿了么
2018-08-01 14:10:01第三篇-后端人员学习vue(项目实战) 教程地址：https://blog.csdn.net/m0_37499059/article/details/81328836 -
后端程序员学习前端篇（一）
2020-05-07 18:27:25web前端学习篇——vue Vue CLI(脚手架) Vue CLI(脚手架)是用于快速Vue.js开发的完整系统： 通过交互式项目脚手架@vue/cli。 通过@vue/cli+ 零配置快速原型@vue/cli-service-global。 运行时依赖项（@vue/cli-...展开全文web前端学习篇——vue
Vue CLI(脚手架)
Vue CLI(脚手架)是用于快速Vue.js开发的完整系统：
- 通过交互式项目脚手架@vue/cli。
- 通过@vue/cli+ 零配置快速原型@vue/cli-service-global。
- 运行时依赖项（@vue/cli-service）
- 丰富的官方插件集合，集成了前端生态系统中的最佳工具
- 完整的图形用户界面，用于创建和管理Vue.js项目。
安装
安装环境
- 1.首先需要安装node.js
- 2.切换npm安装插件的服务器地址(一般切淘宝) 一台电脑只需要切1次 npm config set registry https://registry.npm.taobao.org
- 3.然后在vs code 里面的终端安装脚手架
npm install -g @vue/cli
创建项目
Vue create 项目名称
然后等待就会有要你选择的提示
选择manually select features 手动选择
只后在选择下面三个就欧克了：(记得去掉规范 linter/formatter)
babel
router
vuex然后一直回车
第一个项目创建完成
-
谁说后端程序员不懂前端(vue专场)
2020-03-15 11:34:54vue框架跟面试官吹牛的必备技能 -
给后端程序员看的 Vue 快速入门教程
2019-04-09 08:39:00Vue 是近两年极为火热的前端框架。作为一个后端，你是否曾经想要去了解一下 Vue？是否使用过 Vue 来完成自己的 Side Project。在这篇文章中，我将向你分享... -
vue入门第二天，后端程序员需要掌握的vue技术，五天带你玩转vue
2019-03-13 14:22:45有了第一天对vue的一些基本认识，如果你有了以下的认识，说明你已经入门vue了 1.0Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，不要再有操作dom的思想了，忘掉以前jquery的思想 1.1.在Vue中，已经实现了... -
vue入门第一天，后端程序员需要掌握的vue技术，五天带你玩转vue
2019-03-12 17:49:18我相信很多后端程序员都会有这个感触，我这边想说，你们错了，大错特错啊，正是因为前后端分离，这才需要我们后端程序员掌握的更多，一个只会写接口的程序员注定会被淘汰，未来的社会肯定是一个全栈的社会，没有金刚... -
后端程序员开发页面一点心得
2020-07-29 16:06:53好久写前端，最近一个项目要写点界面，使用vue写了下，10多年前写过，多年前还是看javascript高级编程那本绿书，非常好，不知道现在还有没有新版本。简单使用后和以前比较了下，希望对别人有一定用途 1、前端知识 ... -
vue 致后端程序员.xmind
2021-01-29 09:08:04适合后端程序员的vue思维导图 -
后端程序员的前端知识体系学习---vue.js
2019-09-11 09:39:17作为一名后端程序员，我们通常专注于后端代码开发，当然也会涉及到一些常用前端脚本语言框架，像jquery（逐步被淘汰），偶尔也会写一些css样式。可以说除了UI之外，我们什么都做。但是这些放在今天是远远不够的，... -
后端 Java 程序员眼中的 Vue——（一）创建及运行
2020-07-04 22:05:52现在 Vue 用的越来越多，工作上有时前后端都要搞，作为后端程序员接手 Vue 该如何做呢，下面来记录一下基础的东西，并创建一个 Vue 项目 谈 Vue 不能避开的 3 个东西 Node.js npm vue-cli Node.js是运行前端 ... -
React踩坑笔记 —— 一个后端程序员的React进击之路
2018-11-20 17:52:41目录引言Web前端前端三座大山后端中的前端障碍为什么学习前端？为什么要学习React？正文1. CSS布局2. JavaScript ES63. Npm/Yarn4. 脚手架5. React教程6. Redux7. React-Redux8. React-Router9. Promise10. Fetch ... -
后端程序员的 VUE 入门上手笔记
2021-09-12 21:15:51现在的各种开源项目中使用 Vue 的越来越多了，作为一个后端程序员不会点 Vue 也都玩不转了。所以抽空学习了一下 Vue 的简单用法，整理成笔记，方便有需要的同学一起学习。 Vue 是一个前端的框架，被称作是 渐进式... -
后端 Java 程序员眼中的 Vue——（三）Vue解决跨越问题
2020-06-29 08:54:56在 Spring Boot 和 Vue 的前后端分离项目中，线上、测试环境可以通过 Ngnix 来处理避免跨越问题，即前端往 Ngnix 上发，后端从 Ngnix 接收，就没有跨越问题。但如果我在本地运行前后端，或者自己是前端同事的电脑是... -
后端程序员学习uni-app
2020-09-26 09:52:02后端程序员学习uni-app闲谈1 uni-app用来做什么？2 开发工具是什么？开发工具如何创建项目和导入项目？3 全局配置是什么？tabbar如何设置？3.1 新建uni-app项目目录和文件介绍 闲谈 uni-app用来做什么？ 开发工具是... -
Java学习笔记-全栈-web开发-22-后端程序员用的前端框架——layUI
2020-01-21 13:33:17其实先学Vue、elementUI，还是先学jQuery，纠结过一阵子。 毕竟，很多人都说jQuery过时了。 jQuery能做到的，Vue都可以做到。 但是，Spring全家桶提供了非常好的开发生态，如果不是非常大的大型项目，个人感觉... -
一个后端程序员如何被公司逼的开始写前端代码！
2020-07-20 11:25:56阿粉自从学会Java以来，一直都是在从事关于Java的开发，不论是换了几家公司，阿粉一直都是负责的关于后台的业务，很多都是前后端分离的，前端是写前端的代码，后端只负责逻辑实现和返回所需要的值，但是让人没想到的... -
学习记录374@写给Java后端程序员看的vue安装与项目创建教程
2020-12-27 14:27:43vue是前端的框架，但是因为需要前后端交互，我们还是需要学会简单使用vue的，最基本的当然是安装啦 下载node node是什么？自己百度，这里你只需要知道她需要被用来安装vue就可以了 进入node.js官网下载。注意下载... -
nice-router-taro:nice-router 第0适合后端程序员的前端小程序开发框架-源码
2021-05-02 13:06:58第0适合后端程序员的前端小程序开发框架 nice-router 是一个前端低代码框架(低码)，可以使用JSON数据驱动页面渲染，可以极大节省页面开发工作量，极大提升开发前端界面的效率。(可手动定制页面) 多端统一开发体验 + ... -
请问有什么适合后端程序员开发的框架么？
2021-09-16 20:54:25我想开发一个网站，从前端到后端的那种。... 我后端java，mysql，spring，mybatis， 前端能力很差，能用用bootstarp，指挥书写html的那种页面，不会vue什么的，会jquery。 有什么适合我的框架推荐么？ -
后端程序员学习前端篇（二）
2020-05-08 17:25:17vue实现简单购物车 首先上效果 主要实现了删除，全选，全部取消 技术点 对计算属性和侦听器的掌握及@change和watch的区别 上代码： html部分： <div id="app"> <div class="center">购物车</div&... -
后端 Java 程序员眼中的 Vue——（二）vuedemo项目目录介绍
2020-07-26 18:08:59这两个文件都是管理前端依赖的，类似 java 后端的 maven 管理jar包 为什么会有两个呢？ 是因为 js 的包的版本依赖不太严格，如果只有package.json,在同一个大版本，不同时间或者不同 npm 下载源（类似maven的镜像... -
// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112
收藏数
10,478
精华内容
4,191
vue
订阅