Posted in BWG BWH官网 搬瓦工 搬瓦工VPS

vue.js 教程(七)改变样式的魔术棒v-bind

离上一篇的for loop又隔了一段时间(擦汗),除了思考要说什么以外,也忙了一堆不知道在忙什么的事,不过我一直都没有忘记我的教学还没写完……我想,应该也是我觉得我太忙了,所以我才每年都没参加铁人赛吧(摇头)。 如果你会做网页(我是指前端的部分),那你一定知道HTML一定要搭配一个叫CSS的东西才能让版面变漂亮、变好看,问题是我如果我用了vue.js,我要怎么改变我的配色?比方说要提醒的东西就要上红色、警告的东西就要上黄色、只是一般普通讯息就要上绿色的这种红绿灯讯息,我要…

Continue Reading... vue.js 教程(七)改变样式的魔术棒v-bind
Posted in BWG BWH官网 搬瓦工 搬瓦工VPS

vue.js 教程(六)一定要懂for loop

在写教学的过程中很囧的一件事就是,教学还没写完新版本就诞生了,这就是我中途又去忙了一个多月之后,回来发现的第一件囧事,是的, Vue.js 2.0 释出了,所以我花了一点时间概略地再看了一下,还有之前写的五篇教学。 所幸,因为我写的是快速上手,都是基本用法与观念,在新版的Vue.js变化不大,不影响之前五篇的教学范例,所以已经看了这系列教学的朋友其实不用太担心,我也将教学里面本来使用1.0.26版本的Vue.js,全数都改成了2.0.1版本的Vue.js了。 好了,这篇我们要来学一个跟if一样很…

Continue Reading... vue.js 教程(六)一定要懂for loop
Posted in BWG BWH官网 搬瓦工 搬瓦工VPS

vue.js 教程(五)Vue.js要如何v-on的其他运用

上一篇我们讲了很多v-on:click的运用,但是说到按钮,最常出现的地方应该就是表单了。既然是表单,那就有所谓的submit这个动作。所以本篇一开始,我们就来说说v-on:submit吧! <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>3 click</title> </head> <body> <div id=”app…

Continue Reading... vue.js 教程(五)Vue.js要如何v-on的其他运用
Posted in BWG BWH官网 搬瓦工 搬瓦工VPS

vue.js 教程(四)Vue.js要如何v-on:click

从开始到现在,我们的范例都是real time即时执行,但是一般网站几乎都不是real time即时执行的,尤其是希望那些透过网友点击才会出现互动的内容,本篇我们就来谈谈v- on这个属性吧!v-on呢其实就有点类似jquery的on(),所以就会有click、submit、keyup等等这些延伸设定,我们假设画面上有一个按钮,按钮按下后会跳出文字框,以下是范例程式码。 <!DOCTYPE html> <html> <head> <meta charse…

Continue Reading... vue.js 教程(四)Vue.js要如何v-on:click
Posted in BWG BWH官网 搬瓦工 搬瓦工VPS

vue.js 教程(三)必学的if else!v-show

在上一篇我们学到了real time即时更新页面的方法,在学习任何一种程式语言时,基本上都会有一些必学的东西,比方说变数、参数、if else 、 for loop 、 for each 、 while与一些运算子(加、减、乘、除、and、or等等),这些都是一定会学到的东西。一旦你真的搞懂,即便换了一套程式语言,你也会发现这些部分都很似曾相识。所以这篇我们要来讲的就是if else! 来介绍一下这一篇你会学到的三个html 扩充属性:  v-show :这是Vue.js特有的写法,基本上就是等…

Continue Reading... vue.js 教程(三)必学的if else!v-show
Posted in BWG BWH官网 搬瓦工 搬瓦工VPS

vue.js 教程(二)第一支Real-Time即时更新

在上篇我们教了Hello World的写法,是不是非常简单好懂?Vue.js其实还有许多不同的写法是在辅助各种开发情况下,可以快速维护,减少前端人员来来回回找code的时间。快速维护也变得是这一两年来最重要的网站发展重点,不管是MVC、MVP或MVVM等等开发模式,其实主要的本质我觉得都在画清职责、方便维护、提升效能。这些写法在后续的教学里,如果有机会或者有好的例子,我会会尽量一一举例让大家可以了解。 学习所有的写法有助于您判断、规划一个好的开发架构,让你日后维护或是开发类似的功能时可以事半功倍…

Continue Reading... vue.js 教程(二)第一支Real-Time即时更新
Posted in BWG BWH官网 搬瓦工 搬瓦工VPS

vue.js 教程(一) Hello World!

Vue.js有人说它像React,也有人说它像Angular,Vue.js主要是View跟Model的部分,但是效能、速度以及学习门槛都比React或Angular低,所以上手简单,对于javascript苦手,或是一直迟迟无法学会React或Angular的同学们来说,简直是一道曙光! Vue.js的优点呢,主要就是专注在web技术上,支援html template、pug (jade)、coffeescript,甚至可与sass、less等加强版CSS做整合,而扩充性质的plugin也是颇多…

Continue Reading... vue.js 教程(一) Hello World!