-
后端程序员学习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-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|第一章 前后端分离
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-07-02 03:31:24在这篇文章中,我将向你分享我自己是如何学习 Vue 的,以及一些基础的流程,一些 Vue 和 后端渲染模式下的概念进行对比,帮助你快速上手 Vue。 文章内容: 如何认知 SPA 开发; 后端渲染时我们关注什么; Vue 渲染...Vue 是近两年极为火热的前端框架。作为一个后端,你是否曾经想要去了解一下 Vue?是否使用过 Vue 来完成自己的 Side Project。
在这篇文章中,我将向你分享我自己是如何学习 Vue 的,以及一些基础的流程,一些 Vue 和 后端渲染模式下的概念进行对比,帮助你快速上手 Vue。
文章内容:
- 如何认知 SPA 开发;
- 后端渲染时我们关注什么;
- Vue 渲染时我们关注什么;
- Vue 的应用。
阅读全文: http://gitbook.cn/gitchat/activity/5c75b7bfb7bb4906f36f2c15
您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ,阅读更多 GitChat 专享技术内容哦。
-
spring后端让页面alert_后端程序员应该对vue了解多少
2020-12-30 03:00:50前言vue说来话长话第一次接触的时候是在个人毕设中,前端框架这块当时是bootstrap+vue。当时也没用到复杂的东西,比如webpack和cli这些,这次公司项目中接触到vue,看见一些脚手架之类的东西,认为还是有必要看一下... -
后端程序员学习前端篇(一)
2020-05-07 18:27:25web前端学习篇——vue Vue CLI(脚手架) Vue CLI(脚手架)是用于快速Vue.js开发的完整系统: 通过交互式项目脚手架@vue/cli。 通过@vue/cli+ 零配置快速原型@vue/cli-service-global。 运行时依赖项(@vue/cli-... -
后端程序员学习前端篇(二)
2020-05-08 17:25:17vue实现简单购物车 首先上效果 主要实现了删除,全选,全部取消 技术点 对计算属性和侦听器的掌握及@change和watch的区别 上代码: html部分: <div id="app"> <div class="center">购物车</div&... -
学习记录374@写给Java后端程序员看的vue安装与项目创建教程
2020-12-27 14:27:43vue是前端的框架,但是因为需要前后端交互,我们还是需要学会简单使用vue的,最基本的当然是安装啦 下载node node是什么?自己百度,这里你只需要知道她需要被用来安装vue就可以了 进入node.js官网下载。注意下载... -
vue入门第一天,后端程序员需要掌握的vue技术,五天带你玩转vue
2019-03-12 17:49:18我相信很多后端程序员都会有这个感触,我这边想说,你们错了,大错特错啊,正是因为前后端分离,这才需要我们后端程序员掌握的更多,一个只会写接口的程序员注定会被淘汰,未来的社会肯定是一个全栈的社会,没有金刚... -
后端程序员的前端知识体系学习---vue.js
2019-09-11 09:39:17作为一名后端程序员,我们通常专注于后端代码开发,当然也会涉及到一些常用前端脚本语言框架,像jquery(逐步被淘汰),偶尔也会写一些css样式。可以说除了UI之外,我们什么都做。但是这些放在今天是远远不够的,... -
后端程序员如何使用px2rem简单实现移动端自适应html方式
2018-08-16 22:25:17作为后端程序员,前端的东西就只会一些基本的HTML,CSS,JavaScript的。突然我要做一个手机上的HTML。需要实现响应式,适应不同分辨率的手机,这个是一个让我头大的问题。在网上找了好久,都说用什么VUE + px2rem... -
后端程序员跨平台应用的前端框架uni-app初探
2020-08-06 10:12:26uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。开发者通过编写 Vue.js 代码,uni-app 将其编译到html5,iOS、Android、微信小程序,支付宝小程序,头条小程序等多个平台,保证其正确运行并达到优秀体验。 ... -
Java学习笔记-全栈-web开发-22-后端程序员用的前端框架——layUI
2020-01-21 13:33:17其实先学Vue、elementUI,还是先学jQuery,纠结过一阵子。 毕竟,很多人都说jQuery过时了。 jQuery能做到的,Vue都可以做到。 但是,Spring全家桶提供了非常好的开发生态,如果不是非常大的大型项目,个人感觉... -
html5编写安卓前台框架_后端程序员跨平台应用的前端框架uni-app初探
2021-01-08 04:23:20公司经常会接到各种前端h5,安卓,IOS,小程序开发的工作,开发的同事前端这块相对...uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。开发者通过编写 Vue.js 代码,uni-app 将其编译到html5,iOS、Android、... -
Vue入门学习---01
2020-05-09 15:59:32Vue.js 学习是很有必要的,毕竟大部分公司是做不到前后端分离开发的,后端程序员打打前端的杂活是常见的。这里记录自己学习vue的知识。这里只记录如何使用,不探索原理。 vue的双向绑定 双向绑定就是你改变data中... -
android canvas 工作流_GitHub - shiftwinting/vue-activiti-demo: 前端:vue+bpmn-js实现activiti的流程...
2021-01-13 09:23:14前端:vue+bpmn-js实现activiti的流程设计器,后端Springboot+Activiti开发工作流前端:vue + bpmn-js项目,实现activiti设计器, 后端: springboot + activiti鉴于广大程序员们开发设计器苦不堪言以及后端不知道... -
java程序员如何使用CDN的方式写Vue
2020-06-28 14:06:10虽然现在前后端分离已成大趋势,java后端就不用写页面了,但是偶尔自己写个小项目也是需要自己写前端页面的。不分离的时候页面写在templates或者static文件夹下,使用npm的方式就显得有点麻烦了,那么我们就用CDN... -
vue开发环境搭建
2018-12-06 20:37:48作为一个后端程序员,但是又想搭建网站.不依靠别人,那只得 自己学点前端. 除了常用的bootstrap之外还想学一样,物色几样 如 easyUI , angular.Js,React.js,VUE 等之后,还是选中了 由中国人 开发的 VUE 不但火而且 ... -
vue-cli项目启动失败问题
2019-09-04 16:04:15作为一名后端程序员刚刚学习前端再idea里面启动项目失败了启动命令是npm run dev,但是都配置好的,如下: 然后问了一下专业前端,他教我看配置文件package.json文件里面的配置: 然后这个配置文件的意思是启动... -
vue的ajax(Axios从远程/后台读取数据)
2018-07-18 11:29:04后端数据,只要调用相应的页面就可以调取,在实际开发中,这些后台数据是需要后端程序员和你共同讨论制作的。我们现在只做前端,数据大家只要会调用即可。 Axios是一个基于Promise(ES6中用于处理异步的)的HTTP库... -
程序员与程序员的差距,正在业余时间中慢慢积累
2020-05-31 18:29:10但是前端百花齐放,隔个几年就弄出个新框架,早起jQuery还火的很,vue.js出来后,前端程序员改用vue了,jQuery就被前端慢慢抛弃了。所以保持学习很重要。 然而程序员日常的工作时间比较忙碌,有很多公司经常加班,... -
vuedemo1-4
2018-05-21 20:45:00学这节课时技术胖已经为大家准备好了后端数据,你们只要调用相应的页面就可以调取,在实际开发中,这些后台数据是需要后端程序员和你共同讨论制作的。我们现在只做前端,数据大家只要会调用即可。 安装Axios ... -
Vue学习-常用属性(一)
2020-10-12 16:17:52作为后端转前端程序员,一直都不会Vue 只会用jQuery,说来惭愧,最近项目写完了 抽空学习了Vue,大爱!把最近的学习总结一下 。 v-cloak ----解决页面刷新 显示插值 [v-cloak]{ display: none; } <div id="app... -
Vue中Axios从远程/后台读取数据
2020-12-12 16:56:49后端数据,只要调用相应的页面就可以调取,在实际开发中,这些后台数据是需要后端程序员和你共同讨论制作的。我们现在只做前端,数据大家只要会调用即可。 安装Axios 我们直接使用npm install来进行安装。 cnpm ... -
[Vue 牛刀小试]:第一章 - 一些基础概念
2018-08-28 16:55:00Vue、React、Angular,当今前端界的三驾马车,作为传统的后端程序员,前端再也不是我们想的那种切切图就可以了,第一次接触的话,先了解了解一些基础的概念。 学习系列目录地址:... -
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
2018-09-07 23:44:00今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈)。 书接上文,昨天正式的开始了Vue的代码的学习,简单的... -
axios访问后台404_Vue中Axios从远程/后台读取数据
2020-12-23 18:31:56这篇文章主要为大家详细介绍了Vue中Axios从...后端数据,只要调用相应的页面就可以调取,在实际开发中,这些后台数据是需要后端程序员和你共同讨论制作的。我们现在只做前端,数据大家只要会调用即可。安装Axios我... -
React和Vue对比
2020-10-09 11:32:261、Vue上手更简单,特别是从dom和jquery时代过来的程序员,或者习惯模板语言的后端开发,更容易接受Vue。 2、Vue从设计上讲,跟趋向于简化使用,就是说Vue从骨子里面就是想用起来简单,但React更多的是为大型工程...