PHPer需要学习VUE之类的前端框架么?

鱼米三香 发布于 2016/11/30 09:44
阅读 4K+
收藏 2

【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”

很多时候分工没那么明确或者写一些测试用例的时候需要写到前端去,这些js框架有什么值得一用的亮点或者省时省力的功能么?我看了下Vue的教程,只讲了一些功能,很难找到合适的例子用这些功能,还请大牛指点一下谢谢
加载中
1
愤怒的码农0
愤怒的码农0

用VUE之类的前端,PHP/Java就变成了接口开发了,返回数据什么的。 不像以前还要结合模板引擎

VUE这种相当于运行在浏览器上的模板引擎,当然功能不止于此

鱼米三香
鱼米三香
回复 @曾超0215 : 这个方式很清真
愤怒的码农0
愤怒的码农0
回复 @鱼米三香 : 我说的就是 <?php for...> <tr><td></td></tr> <?php> 这种输出
retref
retref
@曾超0215 回复 @曾超0215 : 搜噶
鱼米三香
鱼米三香
回复 @曾超0215 : php循环输出不需要展示样式吗?直接把数组输出出来么?
愤怒的码农0
愤怒的码农0
该评论暂时无法显示,详情咨询 QQ 群:点此入群
下一页
1
tsysler
tsysler
vue偏前端,如果不是专门搞前端,我觉得没有必要,还是有一定的学习成本的
tsysler
tsysler
该评论暂时无法显示,详情咨询 QQ 群:点此入群
retref
retref
用jQuery的ajax不可以搞前后端分离吗,后端就提供接口.
tsysler
tsysler
回复 @鱼米三香 : 是的
鱼米三香
鱼米三香
请问这个框架能简化开发前端界面的工作么?
1
be-quiet
be-quiet

表示正在学react三件套. 

项目中有用到react.

其实我是希望只做php, 至少目前为止php好多不会.

王阿觉
王阿觉
我也是,还是要关注新的技术,不求太懂,但还是需要了解一下
1
yak
yak
在可以预见的将来,php套模板的工作很快会转移到 Angular/react/vue上面来,后台json接口会转移到性能高10倍的java/高5倍的nodejs实现的接口上去,现在可以下定论的是,再过2,3年,@eechen这个脑残又开始到处复制粘贴    vue是最好的语言了
逍遥-0-
逍遥-0-
回复 @waitliu : 那岂不是golang的天下?
waitliu
waitliu
后端如果只用提供json,php被同时干掉的可能性也很大。后端势必会倾向高并发,高模块化的语言。
1
红薯官方
红薯官方

MVVM 缺点就是模板数据绑定部分难以调试,除非MVVM框架能够给出准确的报错信息。

如有兴趣那就建议学习MVVM框架。但不是必须的。单页体验虽好,但开发成本也高一些。

1
邻里
邻里
学习吧,我也在学习。我们前端项目组各做各的框架,有项目组用Angular 有项目组用React 有项目组用Vue 而我就是学Vue. 不过在学这之前前端的知识真的去补一补,不然学得一头懵!
0
六月是你的谎言
六月是你的谎言
我觉得有必要,如果你不想搞PHP,还可以去做前端....
0
eechen
eechen
PHP自带的模板很好用,前端配合jQuery也很方便,不像 @yak 这种前端不行的JAVAer依赖前端渲染界面.

你可以看下实现同样功能Vue和jQuery的对比:

在input中输入内容后按enter键往ul里添加一条li和删除:
从回调函数里的操作可以看出,Vue面向数据编程,jQuery面向DOM编程.

Vue:
<div id="app">
    <input v-model="newTodo" v-on:keyup.enter="addTodo">
    <ul>
        <li v-for="todo in todos">
            <span>{{todo.text}}</span>
            <button v-on:click="removeTodo($index)">X</button>
        </li>
    </ul>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        newTodo: '',
        todos: [{text: 'Add some todos'}]
    },
    methods: {
        addTodo: function() {
            var text = this.newTodo.trim();
            if(text) {
                this.todos.push({text: text});
                this.newTodo = '';
            }
        },
        removeTodo: function(index) {
            this.todos.splice(index, 1); //从下标index开始,删除1个元素
        }
    }
});

jQuery:
<div id="app">
    <input>
    <ul>
        <li><span>jQuery</span> <button>X</button></li>
    </ul>
</div>
//处理enter添加事件
$("#app input").on("keyup", function(e){
    if(e.keyCode == 13 && $(this).val() != "") {
        $("#app ul").append("<li>"+this.value+" <button>X</button></li>");
        $(this).val("").focus();
    }
}).focus();
//处理button删除事件(因为button是后期动态生成的,所以需要把选择器写在on里面)
$("#app").on("click", "button", function(){
    $(this).parent().remove();
});

PHP开发者还是先玩好jQuery比较有优势,而且PHP后端渲染HTML返回的方式也利于SEO.比如我自己写的一个jQuery小插件,后端不用改变,前端几行代码就能实现PJAX无刷新加载页面,而不支持PJAX的老旧浏览器则使用原始的方式刷新加载整个页面.
/* jquery.pjax.mine.js */
(function($){
	$.fn.pjax = function(selector, container) {
		
		//IE8之流不支持HTML5 onpopstate,自然不会执行插件
		if("onpopstate" in window) {
			
			//AJAX加载函数
			var load = function(href) {
				var time = 600;
				$(document).trigger("pjax:start", [time]); //执行开发者的自定义事件(如:显示加载进度条)
				var start = new Date().getTime();
				$.ajax({
					type: "GET",
					url: href,
					data: {_pjax_: new Date().getTime()}
				}).done(function(data){
					//在回调函数中解析出head中的title和body中的指定块并更新(这样服务器端就不需要改变输出格式)
					var dom = $("<div>").html(data);
					document.title = dom.find("title").first().text();
					$(container).first().html(dom.find(container).first().html());
					var spend = new Date().getTime() - start;
					setTimeout(function(){
						$(document).trigger("pjax:done"); //执行开发者的自定义事件(如:隐藏加载进度条)
					}, spend >= time ? 0 : time - spend);
				});
			};
			
			history.replaceState({href:location.href}, "", location.href);
			
			window.onpopstate = function() {
				//用户点击后退和前进按钮时触发该事件
				if(history.state != null) {
					load(history.state.href);
				}
			}
			
			$(document).on("click", selector, function(e){
				//用户点击页面链接时改变地址栏(URL)并写入历史记录以及AJAX加载页面
				e.preventDefault();
				var href = $(this).attr("href");
				if(href != "javascript:void(0)") {
					history.pushState({href:href}, "", href);
					load(href);
				}
			});
		}
	};
})(jQuery);

//调用插件,用户点击链接后局部刷新class为pjax-container(要求唯一)的块并写入历史记录
$(document).pjax("a:not([target='_blank'])", ".pjax-container");
$(document).on("pjax:start", function(e, time){
	//显示加载进度条
	$(".load").css("width", 0).show().animate({width: '100%'}, time, 'swing');
});
$(document).on("pjax:done", function(){
	//隐藏加载进度条
	$(".load").hide();
});





PHP自带那么好用的模板引擎,我一点都不稀罕什么前后端分离.
用我这个PJAX小插件的思路不需要改造后端就能实现单页应用的体验.
yak
yak
该评论暂时无法显示,详情咨询 QQ 群:点此入群
eechen
eechen
回复 @yak : 你这块废柴,少在这丢人现眼,有本事就show出你的code,少唧唧歪歪瞎比比.
eechen
eechen
回复 @waitliu : 等你不用搜索引擎的时候再自信说SEO不重要吧,呵呵.解决不了当然不提了,你会见那些框架维护者去提怎么去兼容IE8的么?SEO硬伤,避无可避的生死劫.
eechen
eechen
回复 @百世经纶之傲笑红尘 : 你真是好笑,你听说过jQuery EasyUI这种重量级UI库么,它的数据网格DataGrid是不是一个复杂的组件.我告诉你就算没有MVVM的IE年代,DataGrid这种复杂的表格操作组件就已经有了,所以别吹得MVVM上来就逆天,Java想靠前端MVVM翻身,想多了.
eechen
eechen
该评论暂时无法显示,详情咨询 QQ 群:点此入群
下一页
0
大王来巡山
大王来巡山
毕竟公司给你的是工资,你还要生活,所以非常有必要学习
0
绿水本无忧
绿水本无忧

我一直很好气,vue的出现关php屌事,你java或者node的性能好,你倒是去用啊。。。市面上这么多小型创意型项目,还真以为自己的项目一天到晚都能遇到性能瓶颈了。。。

绿水本无忧
绿水本无忧
好气-》好奇。附:vue很不错,建议学一下,jquery并不是不好,而是用多了会曲解你的js的理解。双向绑定的思路还有轻量级的前端框架库,不考虑什么逼格高不高,性能好不好,至少对自己的开发效率有一定帮助
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部