DataBinding

今天要进入用Vue.js实作出一个网页啦~今天要介绍的是资料绑定

这是写在html的部分也就是View的区块

<div class="txt">
  <p>{{introduction}} </p>
</div>

在JavaScript的部分就是所谓的Model

new Vue({
    el: '#it',    
    data: {
            introduction: 'Welcome to Vue.js'
     }
})

所以我们可以从View+Model=网页画面知道，我们所谓的ViewModel就是中间的那个"+"
而程序码的部分
new Vue顾名思义就是去产生一个Vue的实体
el是element元素的意思，他是用来帮我们把Vue的组件跟DOM绑在一起
而组件中的data则是拿来存放资料的地方
{{}}就是在做资料的绑定，这个称为mustache语法，这里它就是透过{{}}从data中去找到我们introduction的资料
这里的照片使用的是Lorem Picsum 假图产生器产生
这里的照片大小是设定宽:1200px,高:600px
Demo

接下来要介绍的是资料的双向绑定，先来看一段官网的介绍吧!

You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.

在官网中他告诉我们input, textarea和select elements这几个tag都可以利用v-model指令去做资料的双向绑定。那什麽是双向绑定呢?双向绑定就是会依照我们输入的资料去更新画面，所以今天的第二个网页就是使用v-model做双向绑定
这个网页是让使用者在输入框中输入自己的名字，然後他就会把使用者所填写的资料呈现在卡片的文章中，所以我们在input的tag中使用v-model指令绑定username也就是去绑定使用者所输入的名称
卡片中的文章使用的是乱数假文产生器 Chinese Lorem Ipsum产生
Demo

github