PHP开发利器-PRADO 1.6范例

第三章 范例:the Hangman Game 这一章将会讲一下开发一个基于Web的Hangman
Game。这里面会用到一些PRADO的组件。这个游戏说明了显示状态使PRADO页面具有很强的交互性。
这个游戏只包括了一个页面来实现以下的功能:当用户第一次访问的时候,允许用户选择三种不同难度来开始这个游戏,不同的难度对应着不同的可以猜错的次数。游戏开始后,页面的上半部分会显示要猜得单词,没有猜中的字母用下划线显示。页面的下半部分列出了26个字母,用户可以点击对应字母来选择要猜的字母。如果用户放弃游戏或者错误次数超过了难度限制,会显示失败信息;如果猜对了,会显示成功信息。任何时候用户都可以重新开始游戏。
范例中会使用的 PRADO 组件包括: TRadioButton: 显示一个单选框。TPanel:
显示 div 元素。TLabel: 显示文本。TButton:
显示一个提交按钮。TLinkButton: 显示一个提交操作的超链接。TForm: 显示
form 元素。
这些定义好的组件通过属性和事件已经封装好了很多功能。比如,可以设置TPanel澳门新葡萄京官网注册,
Visible 属性来控制整个div元素是不是可见。可以给TButton
组件的OnClick
事件指定一个响应函数,这样当用户点击按钮的时候就会自动调用响应函数。请参考PRADO
API文档中关于这些组件更详细的信息。
游戏中的一些数据在游戏过程中需要一值保持着的。因为这里只用了一个页面,所以可以使用显示状态而不需要使用session来保存这些数据。下面这些数据需要保存在显示状态中:
Word:要猜得单词。GuessWord: 正在猜的单词。Level:游戏的难度级别。Misses:
猜错的次数。 他们都被定义在页面的属性中。
我们需要创建6个文件。假定这个应用放在Web服务器的根目录下,这些文件是:
hangman.php : 应用的主入口; WEB-INF/hangman.spec: 应用的配置文件;
WEB-INF/hangman/HomePage.php: 页面类文件;
WEB-INF/hangman/HomePage.spec: 页面规格文件;
WEB-INF/hangman/HomePage.tpl: 页面模板文件;
WEB-INF/data/hangman.txt: 包含要猜得单词的文本文件。

一 ,什么是Vue.js?

vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计。(自底向上设计方法是根据系统功能要求,从具体的器件、逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接、修改和扩大,构成所要求的系统。)Vue
的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue
也完全能够为复杂的单页应用程序提供驱动。

下面先简单了解Vue.js中的几个重要组成部分:声明式渲染条件与循环处理用户输入组件

二,声明式渲染。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进
DOM,即使用双大括号声明包裹数据变量,实现声明式渲染。这里的声明主要有两大类,第一类,渲染元素内部的内容;第二类,渲染元素标签里的属性。下面是演示:

html代码:第一个div,message声明起到填充文本的作用;第二个div,通过v-bind实现对元素title的操纵。

       <div id="smsxr">{{message}}</div>
            <div id="bind-attr">
                鼠标悬浮查看加载事件。使用v_bind指令。指令一般加v_前缀,会在渲染的dom上应用特殊的响应行为,比如此处将title和message对应。
            </div>

JavaScript代码:先定义Vue对象,然后通过el,data等属性将对象与dom节点绑定,从而实现dom和对象中数据及方法等的对应。

      //声明式渲染,调用时只要{{message}},即可使用message的值来填充dom元素的内容。
            var smsxr=new Vue({
                el:'#smsxr',
                data:{
                    message:"声明式渲染,通过双大括号声明指明数据来源!"
                }
            })
            //动态加载属性,通过动态化属性值变量来实现 v-bind:title="message".

       var dtjzsx=new Vue({ el:"#bind-attr", data:{ message:"文字加载于"+new Date() } })

三,条件与循环。

在JavaScript中我们通常用if和for来实现条件和循环功能。Vue中我们使用类似的v-if和v-for来实现条件和循环。使用方式是在对应标签内部通过v-if=”和v-for=”这样的指令。引号内可以是变量也可以是简单的语句。下面分别来看条件和循环的实现:

通过v-if实现元素内容的显示和隐藏:

html代码:v-if=”seen”,seen为true时元素显示,为false时元素隐藏,这样通过重置seen的值就可实现对元素可见状态的操纵。

     <div id="kztj">
            <p v-if="seen">现在你可以看到我,当seen为false时你将看不到我,Vue通过v_if来控制条件。此处演示也说明我们利用Vue可以将dom结构绑定到数据,即通过数据控制dom的显示结构。</p>
        </div>

JavaScript代码:这里声明元素id为kztj的元素里面seen的取值。

       //v-if控制条件,seen定义处。
            var kztj=new Vue({
                el:"#kztj",
                data:{
                    seen:true
                }
            })

通过v-for实现元素的循环生成:

html代码:addListNew()是一个自定义函数,用于实现单击后添加新的子项。定义见本段末尾。

     <div id="xh">
            我是通过v-for循环生成的列表<button id="xh_btn" onclick="addListsNew()">单击我添加新项</button>
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>

JavaScript代码:定义元素数据源。data本身是一个对象,它的子元素可以是对象或者特殊化的对象数组。调用时可通过v-for遍历。

      //v-for控制循环
            var xh=new Vue({
                el:"#xh",
                data:{
                    todos:[
                        {text:"声明式渲染。"},
                        {text:"动态加载属性。"},
                        {text:"v-if控制条件。"},
                        {text:"v-for控制循环。"}
                    ]
                }
            })

    function addListsNew(){
                xh.todos.push({text:"xh.todos.push添加新项。O(∩_∩)O哈哈~"});
            }

四,处理用户输入

这里的输入包括行为,操作,数据等等。例如单击,传入状态等。本例中选择的是用户的单击输入。

html代码:在标签内用v-on:click=”函数名”声明click事件的响应函数。

    <div id="clyhsr"><p>{{message}}</p>
            <button v-on:click="reverseMessage">逆转消息</button>
        </div>

 JavaScript代码:通过Vue的methods属性,定义响应函数reverseMessage()。

    //处理用户输入
            var clyhsu=new Vue({
                el:"#clyhsr",
                data:{
                    message:"处理用户输入,这个输入泛指,包括输入的操作,状态等等,比如单击,某个动作"
                },
                methods:{
                    reverseMessage:function(){
                        this.message=this.message.split(',').reverse().join(',')
                    }
                }
            })

 这是通过v-model双向绑定用户输入和应用状态:

html代码:v-model=’message’将用户输入内容绑定到message变量上,需要时进行调用。

     <div id="sxbd">
            v-model使应用状态和用户输入之间的双向绑定变得容易。
            <p>{{message}}</p>
            <input v-model="message" />
        </div>

 JavaScript代码:初始化变量。

      //用户输入和应用状态的双向绑定
            var sxbd=new Vue({
                el:"#sxbd",
                data:{
                    message:"用户输入和应用状态的双向绑定。"
                }
            })

五,组件化应用的构建

组件系统是 Vue
的另一个重要概念,因为它是一种抽象,允许我们使用小型、自包含和通常可复用的组件构建大型应用。也就是允许我们“工厂化”生产我们的应用吧。

html代码:组件调用时,在页面中添加组件标签名称,并为之添加上相应的指令。v-for遍历数据源,取得每一个元素放在item里面;v-bind:todo=”item”,将遍历获得的每个元素传给组件的todo属性,用于通过模板生成元素。两个指令结合,实现了组件的实例化。(可以理解为todo属性使得todo-item组件可以实现多态吧。)

      <div id="component">
                <ol>
                    <todo-item v-for="item in lists" v-bind:todo="item"></todo-item>
                </ol>
            </div>

 JavaScript代码:注册组件,通过组件的props属性,实现数据的跨域传递(实例化)。如,todo对于不同的Vue对象代表不同的数据,相应的todo.text也就不同,最终生成的组件也就不一样.

      //注册组件
            Vue.component('todo-item',{
                props:['todo'],
                template:"<li>{{todo.text}}</li>"
            })
            //调用组件,每一个todo都是lists里的一个元素,v-for实现循环
            var component=new Vue({
                el:"#component",
                data:{
                    lists:[
                        {text:"第一,注册组件。"},
                        {text:"第二,像使用原始标签一样,在页面中使用组件。"},
                        {text:"第三,通过定义原始数据,个性化调用组件。"},
                        {text:"组件可以有属性,用来将数据从父域传到子域,如本例中的prop"},
                        {text:"组件可以利用v-for,v-bind,实现循环和绑定事件监听。"}
                    ]
                }
            })

 组件和自定义元素的区别:

Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue
的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is
特性。但是,还是有几个关键差别:
1,Web 组件规范仍然处于草案阶段,并且尚无浏览器原生实现。相比之下,Vue
组件不需要任何补丁,并且在所有支持的浏览器(IE9
及更高版本)之下表现一致。必要时,Vue
组件也可以包装于原生自定义元素之内。
2,Vue
组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流,自定义事件通信以及构建工具集成。

做个小总结,就目前认知而言,我觉得,声明式渲染主要是数据相关,数据是一个应用的核心组成部分,是一个应用的灵魂,声明式渲染就是通过一个个声明来渲染应用的各个小框架,让应用有生命,例子中的声明只简单的发生在js脚本里,如果是复杂的应用则肯定少不了服务器语言,数据库,数据来源和数据结构也会相对复杂,但是最基本的东西万变不离其宗,所以一定要掌握声明式渲染的基本原理和实现;条件与循环,判断和遍历,可理解为对声明的数据进行分析必不可少的工具,当然,一般情况下循环对数据进行遍历的同时会进行相应的操作;处理用户输入,狭义的用户输入是单纯的文本输入,广义的输入可指代用户的任何输入,也就是用户对应用的任意操作,包括单击某个按钮,刷新页面等等,这里的输入即指广义的用户输入,处理的前提是辨识输入类型分类处理,比如通过v-on:click=‘’,来辨识单击操作并指定对应的处理函数。另一种处理输入的方式是使用v-model=”,来记录用户输入,然后在需要的地方通过变量名调用;最后说说组件,Vue里的组件在理解上可以类比于html元素,但是,它又优于html元素,因为Vue组件能够实现很多复杂的功能,例如跨组件数据流,使得父子组件的解耦成为可能。

发表评论

电子邮件地址不会被公开。 必填项已用*标注