精华内容
下载资源
问答
  • 后端程序员学习vue

    2020-09-18 22:50:58
    vue基本语法学习 一:概述 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

    1. 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的,导致很多同学看不懂前端代码,这边我简单的介绍一下我学习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的第一天 觉得身为后端程序员,以后必不可免都需要接触到前端,后端程序员至少也需要具备一种数据交互的手段,所以从今天开始,学习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(项目实战) 教程地址:https://blog.csdn.net/m0_37499059/article/details/81328836
  • web前端学习篇——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开发的完整系统:

    1. 通过交互式项目脚手架@vue/cli。
    2. 通过@vue/cli+ 零配置快速原型@vue/cli-service-global。
    3. 运行时依赖项(@vue/cli-service)
    4. 丰富的官方插件集合,集成了前端生态系统中的最佳工具
    5. 完整的图形用户界面,用于创建和管理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框架跟面试官吹牛的必备技能
  • Vue 是近两年极为火热的前端框架。作为一个后端,你是否曾经想要去了解一下 Vue?是否使用过 Vue 来完成自己的 Side Project。在这篇文章中,我将向你分享...
  • 有了第一天对vue的一些基本认识,如果你有了以下的认识,说明你已经入门vue了 1.0Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,不要再有操作dom的思想了,忘掉以前jquery的思想 1.1.在Vue中,已经实现了...
  • 我相信很多后端程序员都会有这个感触,我这边想说,你们错了,大错特错啊,正是因为前后端分离,这才需要我们后端程序员掌握的更多,一个只会写接口的程序员注定会被淘汰,未来的社会肯定是一个全栈的社会,没有金刚...
  • 后端程序员开发页面一点心得

    千次阅读 2020-07-29 16:06:53
    好久写前端,最近一个项目要写点界面,使用vue写了下,10多年前写过,多年前还是看javascript高级编程那本绿书,非常好,不知道现在还有没有新版本。简单使用后和以前比较了下,希望对别人有一定用途 1、前端知识 ...
  • vue后端程序员.xmind

    2021-01-29 09:08:04
    适合后端程序员vue思维导图
  • 作为一名后端程序员,我们通常专注于后端代码开发,当然也会涉及到一些常用前端脚本语言框架,像jquery(逐步被淘汰),偶尔也会写一些css样式。可以说除了UI之外,我们什么都做。但是这些放在今天是远远不够的,...
  • 现在 Vue 用的越来越多,工作上有时前后端都要搞,作为后端程序员接手 Vue 该如何做呢,下面来记录一下基础的东西,并创建一个 Vue 项目 谈 Vue 不能避开的 3 个东西 Node.js npm vue-cli Node.js是运行前端 ...
  • 目录引言Web前端前端三座大山后端中的前端障碍为什么学习前端?为什么要学习React?正文1. CSS布局2. JavaScript ES63. Npm/Yarn4. 脚手架5. React教程6. Redux7. React-Redux8. React-Router9. Promise10. Fetch ...
  • 现在的各种开源项目中使用 Vue 的越来越多了,作为一个后端程序员不会点 Vue 也都玩不转了。所以抽空学习了一下 Vue 的简单用法,整理成笔记,方便有需要的同学一起学习。 Vue 是一个前端的框架,被称作是 渐进式...
  • 在 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用来做什么? 开发工具是...
  • 其实先学Vue、elementUI,还是先jQuery,纠结过一阵子。 毕竟,很多人都说jQuery过时了。 jQuery能做到的,Vue都可以做到。 但是,Spring全家桶提供了非常好的开发生态,如果不是非常大的大型项目,个人感觉...
  • 阿粉自从学会Java以来,一直都是在从事关于Java的开发,不论是换了几家公司,阿粉一直都是负责的关于后台的业务,很多都是前后端分离的,前端是写前端的代码,后端只负责逻辑实现和返回所需要的值,但是让人没想到的...
  • vue是前端的框架,但是因为需要前后端交互,我们还是需要学会简单使用vue的,最基本的当然是安装啦 下载node node是什么?自己百度,这里你只需要知道她需要被用来安装vue就可以了 进入node.js官网下载。注意下载...
  • 第0适合后端程序员的前端小程序开发框架 nice-router 是一个前端低代码框架(低码),可以使用JSON数据驱动页面渲染,可以极大节省页面开发工作量,极大提升开发前端界面的效率。(可手动定制页面) 多端统一开发体验 + ...
  • 我想开发一个网站,从前端到后端的那种。... 我后端java,mysql,spring,mybatis, 前端能力很差,能用用bootstarp,指挥书写html的那种页面,不会vue什么的,会jquery。 有什么适合我的框架推荐么?
  • vue实现简单购物车 首先上效果 主要实现了删除,全选,全部取消 技术点 对计算属性和侦听器的掌握及@change和watch的区别 上代码: html部分: <div id="app"> <div class="center">购物车</div&...
  • 这两个文件都是管理前端依赖的,类似 java 后端的 maven 管理jar包 为什么会有两个呢? 是因为 js 的包的版本依赖不太严格,如果只有package.json,在同一个大版本,不同时间或者不同 npm 下载源(类似maven的镜像...
  • // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,478
精华内容 4,191
关键字:

后端程序员学vue

vue 订阅