2021年4月21日

时间:2个小时左右

代码:230行左右

博客:1

知识点:双向数据绑定，v-model，mvvm等等

1.v-model
v-model是一个指令，限制在 <input>、<select>、<textarea>、components 中使用

<div id="app">
<div>{{msg}}</div>
<div>
当输入框中内容改变的时候， 页面上的msg 会自动更新
<input type="text" v-model='msg'>
</div>
</div>

2.mvvm

MVC 是后端的分层开发概念；MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel

m model：数据层 Vue 中数据层都放在 data 里面

v view ：视图 Vue 中 view 即我们的HTML页面

vm （view-model）：控制器将数据和视图层建立联系 vm 即 Vue 的实例就是 vm

3.v-on

用来绑定事件的形式如：v-on:click 缩写为 @click;

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{{msg}}</div>
      <div>
        <input type="text" v-model='msg'>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
        双向数据绑定
        1、从页面到数据
        2、从数据到页面
      */
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue'
        }
      });
    </script>
  </body>
  </html>