[鼠年全马] W19 - Vue心得笔记 - MVVM篇

上一篇最后有提到怎么建立一个Vue应用, 朋友看完之后有问我两个问题

当下我听到是有点愣住..., 因为会建立一个了, 之后就会建立两个三个...多个Vue应用可以举一反三
所以不太懂他不懂得点...QQ
不过我这边附上回覆他的答案
(如果有更适合的解请大大在下面留言)
建立一个应用是这样:

var app = new Vue({  el: '#app'})

建立第二个应用可以是这样:

var app2 = new Vue({  el: '#app2'})

...
...
...
建立第N个应用可以是这样:

var appN = new Vue({  el: '#appN'})

看需求来判断需不需要建多个应用来用
当下他听我讲完也是有点"哦~原来如此~"的感觉

这问题就有比较建设性一点(xD)
他的抓法其实就跟原生js的 document.querySelector 一样, 是用CSS选择器来抓元件的
所以也可以设定抓class或是节点, 但通常id是唯一值, 所以会设定抓id
如果!!!
抓到多个元件时, 就只有第一个会有效, 例如抓class有app的元件:

<!--第一个元件--><div class="app">    {{ message }}</div><!--第二个元件--><div class="app">    {{ message }}</div>

var app = new Vue({    el: '.app',    data: {        message: 'Hello 我是来乱的!'    }})

结果只会看到第一个被渲染出来, 第二个则是维持原状没有被Vue出来

两个问题大概是这样~仅供参考~
接着开始今天正题~

#MVVM是什么?

MVVM（Model–view–viewmodel）是一种软体架构模式。 --维基百科-MVVM

Model - 就是Vue应用的资料状态
View - 就是视图层, 也就是浏览器所呈现的画面

而 Vue 透过中间的 ViewModel 达到 资料(Model) 与 视图(View) 的双向沟通

#双向沟通实例

首先我们把刚才 我来乱的 的範例拿来用
并在 div 内新增一个 input

<div id="app">    <input type="text" />    {{ message }}</div>

var app = new Vue({    el: '.app',    data: {        message: 'Hello 我是来乱的!'    }})

接着在 input 加上绑定资料的指令 v-model, 让它绑定 message

<input type="text" v-model="message" />

我们要做的範例目标是透过 input 输入一些文字, 改变 Vue应用的资料, 最后回来渲染视图
从资料跑的流程上看会是:
输入文字(View)
-> 文字透过v-model绑定资料(ViewModel)
-> 改变资料(Model)
-> 资料透过双花括号呈现(ViewModel)
-> 渲染视图(View)

完成后可以看到透过改变input内的值, 进而改变message, 达成双向沟通的效果

今天透过介绍双向绑定提到了一个 Vue 的指令 v-model
下次会提到其它的指令, 每一个都会完整介绍