vue的两个特性、vue中v-model指令

vue的两个特性：

1.数据驱动视图:

• 数据的变化会驱动视图自动更新
• 好处:程序员只管把数据维护好，那么页面结构会被vue自动渲染出来!

在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构。示意图如下:

注意:数据驱动视图是单向的数据绑定。

2.双向数据绑定:
在网页中，form表单负责采集数据，Ajax负责提交数据。

• js数据的变化，会被自动渲染到页面上
• 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中
• 好处:开发者不再需要手动操作DOM元素，来获取表单元素最新的值!

在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。示意图如下:

注意:数据驱动视图和双向数据绑定的底层原理是MVVM (Mode数据源、View视图、ViewModel就是vue的实例)。详细内容可跳转至MVVM

v-model双向绑定指令（input框等）

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

 <div id="app">
    {{ message }} <br>
    <input type="text" v-model="message"> <br>
    <!-- 如果不用v-model则需要用v-bind和v-on来实现 -->
    <input type="text" v-bind:value="message" v-on:input="handleInput" />
    
    <input type="checkbox" v-model="checked">
    <input type="checkbox" v-bind:checked="checked" v-on:change="checked=$event.target.checked">
    {{ checked }}
  </div>

  <script src="./libs/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app', // View
      data: { // Model
        message: 'Hello Vue.js',
        checked: false,
      },
      methods: {
        handleInput(event) {
          // console.log('输入...', event.target.value)
          this.message = event.target.value
        //   事件函数中第一个参数是event（事件对象），event.target(事件目标即事件源元素)，event.target.value就可以获得input输入框当中输入的内容，
        //   即实现双向绑定（输入框中输入什么内容，下面就对应显示什么内容）

        },
      }
    })
  </script>