PHPer快速上手VUE——边学边练2–把html页面转化成vue页面(1)

    |     2020年6月16日   |   学习偶记   |     评论已关闭   |    72

上一篇我们把项目的架子搭起来了。并且做了一个APP的筐(root根),准备展示我们做好的页面。我们先放过它,把main.html【那个九宫格的页面】做成组件,方便APP这个页面显示它。

1、vue文件的命名一般采用PASIC的命名方式,即每个单词首字母为大写字母。所以这个首页的组件我命名成Home.vue

2、组件是包裹在<template></template>中间的。

3、在制作组件的时候,要考虑复用性。比如main页面上的那些提示。

main 【点击后可以看到源页面,下同】是原先的html文件,我们分析文件页面后,发现以下3点:

1、提示,可以做成可复用的组件

2、九宫格的可以用上一节中的渲染插槽slot方式,也可以用for代码。

3、源文件使用的是CDN的css,根据vue组件的方式,每个组件是独立的css,需要下载到本地进行引用。


VUE中使用外部CSS:

我的做法是把CSS下载下来,放在src\asset\css目录下,然后在APP.vue文件中引入【全局起效】。如果想局部起效,就放在相应的vue文件里即可。


做一个公用的提示组件:

我们先把css下载到本地,放在asset目录下的css目录中。然后我们集中精力搞这个提示组件。因为源html使用的是frozenui前端UI框架,所以大家移步到项目的文档中查看:

https://frozenui.github.io/components/components#%E6%8F%90%E7%A4%BA

经过分析,我们发现所有的提示组件有几个变量:

A、外层div的主类是ui-tooltips,然后警告增加css ui-tooltips-warn 引导的css增加 ui-tooltips-guide 底部的css增加 ui-tooltips-guide ui-tooltips-action

B、文字div的主类是:ui-tooltips-cnt ui-border-b ,如果加>号,则添加类:ui-tooltips-cnt-link

C、文字后面可以添加关闭的链接和按钮。

 

因为大家都是成年人了。。哦不对,都是PHPer了,所以我就用编程的语言描述一下自定义组件。

A、自定义组件和类差不多。可以想象成模块。

B、每个组件只能有一个<template>有一个顶级<div>

C、组件使用要引用:import Tips from “./Tips.vue”; 【这是我做的提示自定义组件】

D、引用后需要实例化,实例化的时候,定义一个名称,这个名称不能用驼峰,必须小写用-连字符这样子的命名规范。

E、组件名字要按照驼峰规范。

F、自定义组件内有变量,有计算,有方法。

接下来就直接上代码解析:

代码解析【从上到下,我只写要点】:

  • import xss from ‘xss’; 因为我们要传入<a>标签,为了防止xss攻击,所以使用了vue的一个防止xss攻击插件。直接使用npm install xss –save安装,然后引入即可。
  • v-bind:class=”tipsStyle” ,查找一下v-bind的介绍即可。这句的意思是绑定一个类,这个类是变量tipsStyle。
  • 这个变量是由 computed:计算出来的,你可以捎带去了解一下生命周期
  • 计算返回的值的解析:’ui-tooltips-warn’: this.isItemType(‘warn’), 返回类名:ui-tooltips-warn, 这个类 : 后面是个bool值,如果是真,则显示。参考资料:https://cn.vuejs.org/v2/guide/class-and-style.html
  • this.isItemType 是方法,methods:中是一个个函数,isItemType 这个函数,就是判断传过来的变量值,和参数是否一样,如果一样,则返回true。if (this.type === type)中,this.type 就是变量,type则是 this.isItemType(参数) 中的参数。
  • 变量的定义是:props: ,一般定义是 props:[变量名,变量名],本例中也可以写成:props:[type,styles,linkType,btnLink]
  • 本例中,props变量的写法是对变量进行了类型的定义,以及返回一个初始化的值。最主要的是为了让大家学会变量是数组赋值。
  • 变量数组的初始化,不能直接写[],而是:default: () =>[] (即:default: function () { return [] })

我们再看一下如何引用这个组件:【变量type linktype 是返回字符,而btnLink返回的是绑定的值,所以需要加:】

最终效果:

 

welcome.vue的源码如下:

 

噢!评论已关闭。