PHPer快速上手VUE——边学边练2–把html页面转化成vue页面(1)
上一篇我们把项目的架子搭起来了。并且做了一个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、自定义组件内有变量，有计算，有方法。
接下来就直接上代码解析：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<template> <div class="ui-tooltips" v-bind:class="tipsStyle" :style="styles" > <div class="ui-tooltips-cnt ui-border-b" v-bind:class="tipsTxtStyle"> <i></i> <slot></slot> <div v-html="buttonLink"></div> </div> </div> </template> <script> import xss from 'xss'; export default { name: 'Tips', data: function () { return {} }, //调用该组件提供的变量 props: { //外框显示的css type: { type: String, default: '' // warn,guide,footer }, //style的值 styles: { type: String, default: '' }, //文字是否带> linkType: { type: String, default: '' }, //是否有关闭符号或者按钮 btnLink: { type: Array, // default: function () { return [] } default: () => [] } }, computed: { //外框样式 警告 引导 底部 tipsStyle: function () { return { 'ui-tooltips-warn': this.isItemType('warn'), 'ui-tooltips-guide': this.isItemType('guide'), 'ui-tooltips-guide ui-tooltips-action': this.isItemType('footer') } } , //文字框样式 是否带有> tipsTxtStyle: function () { if (this.btnLink == 'undefined') { return { 'ui-tooltips-cnt-link': this.isLinkType('link') } } } , //文字后面带东西 buttonLink: function () { if (this.btnLink[0] == 'link') { return '<a class="ui-icon-close"></a>'; } else if (this.btnLink[0] == 'button') { return '<button class="ui-btn-s">按钮</button>'; } else { return ''; } } } , methods: { isItemType(type) { if (this.type === type) { return true } return false } , isLinkType(linkType) { if (this.linkType === linkType) { return true } return false } , click() //备用，晚点完善 { this.$emit('click') } } } </script> |
代码解析【从上到下，我只写要点】：
- 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的源码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li> <a href="https://vuejs.org" target="_blank" > Core Docs </a> </li> <li> <a href="https://forum.vuejs.org" target="_blank" > Forum </a> </li> <li> <a href="https://chat.vuejs.org" target="_blank" > Community Chat </a> </li> <li> <a href="https://twitter.com/vuejs" target="_blank" > Twitter </a> </li> <br> <li> <a href="http://vuejs-templates.github.io/webpack/" target="_blank" > Docs for This Template </a> </li> </ul> <h2>Ecosystem</h2> <ul> <li> <a href="http://router.vuejs.org/" target="_blank" > vue-router </a> </li> <li> <a href="http://vuex.vuejs.org/" target="_blank" > vuex </a> </li> <li> <a href="http://vue-loader.vuejs.org/" target="_blank" > vue-loader </a> </li> <li> <a href="https://github.com/vuejs/awesome-vue" target="_blank" > awesome-vue </a> </li> </ul> <gk-tips type="warn" linkType="link" :btnLink="['button','http://www.baidu.com']">自定义组件测试</gk-tips> </div> </template> <script> import Tips from "./Tips.vue"; export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, components: { 'gk-tips' : Tips } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style> |
噢！评论已关闭。