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

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

学习所有的写法有助于您判断、规划一个好的开发架构,让你日后维护或是开发类似的功能时可以事半功倍。本篇当然延续上篇,用“Hello World!”来做范例,不过会做一些修改与调整好来做展示。

首先在这里我先提出一种与上篇不一样的写法,也是最简单的变形,那就是将参数设定另外写,也就是当你参数预设值非常复杂时,为了让您可以发便维护,会建议你采用这种写法。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>

<div id=”app”>
{{ message }}
</div>

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var data = {
message:’Hello World!’
}
new Vue({
el:’#app’,
data:data
});
</script>
</body>
</html>

接下来,我要在这里介绍一个新的html扩充属性,叫V-model,如果直接按照属性名来翻译大概就是呼叫vue里面的model功能,所以其实还蛮直白的,在Angular也有所谓的ng -model属性,功能上是差不多的。怎么使用V-model?很简单,我们将刚刚的“Hello World!”加上一个input,如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>

<div id=”app”>
<h1>{{ message }}</h1>
<input type=”text” v-model=”message”>
</div>

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var data = {
message:’Hello World!’
}
new Vue({
el:’#app’,
data:data
});
</script>
</body>
</html>

我们将{{message}}加上h1标签,然后在下方新增一个文字的input输入表单,接着v-model名称是message,所以这个input就会自动带入与{{message}}相同的参数内容,而你只要变更inupt里面的文字,页面上的{{message}}参数也会立刻马上一起更新,非常好玩。而且,恭喜你!你在不知不觉中写了第一只用Vue.js完成的Real-time即时更新页面,真是太厉害了你!有没有很简单?

这到底是什么原理呢?如果你上一篇有注意看,你会发现我在解释data里面的message时,我是说“预设值”是”Hello World!”,是的!它是预设值,所以当你在v-model里面输入文字或删减文字时,你修改的其实就是data里面message的参数值,既然参数值改变,vue.js就会自动帮你启动model进而修改{{message}}在页面上呈现的内容,进而达到Real-time即时更新页面的效果。

最后要来说一下一个简单的debug方式,开头我们有说将data另外写可以避免参数过多时显得混乱,那们我们要怎么确定我们参数的内容是对的?最简单得方式就是显示在页面上,我们只要多一行就可以达到我们要的效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>

<div id=”app”>
<h1>{{ message }}</h1>
<input type=”text” v-model=”message”>

<div>{{ $data | json }}</div>
</div>

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var data = {
message:’Hello World!’
}
new Vue({
el:’#app’,
data:data
});
</script>
</body>
</html>

在这里又看到{{}}了,在里面写的是$data,也就是下面var data的内容,而|在这边是filter的意思,也就是筛选,还蛮好用的,之后有时间会再好好的提一提,而最后的json就是大家可能还蛮熟悉的json格式,所以最后在画面上你就可以看到用json格式组出来的data参数值了。

再试试看修改input内容看看,下方json格式的参数值是不是也会跟着改变?没错,你又再一次证明你真的完成了一个Real-Time即时更新页面了,恭喜你!

最后附上jsfiddle,让各位可以在线上看到本篇教学最后一段code所呈现的结果:

Author: bwh

发表评论