vue.js之v-model与v-once

v-model指令( 双向绑定 )

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。

<div id="app">
  <input v-model="message">
  <p>输入：{{ message }}</p>
</div>

<script>let vm = new Vue({
    el: "#app",
    data: {
      message:''
    }
  });</script>

Vue 是单项数据流，v-model 只是语法糖而已(第一行的代码其实只是第二行的语法糖。)：

<input v-model="message" />
<input v-bind:value="message" v-on:input="message = $event.target.value" />

观察语法糖和原始语法那两行代码，可以得出一个结论：
在给元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 ‘input’ 事件作为实时传递 value 的触发事件

---

v-once 指令

它的特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

<div id="app">
  <input v-model.lazy="message">
  <p v-once>输入：{{ message }}</p>
</div>

<script>let vm = new Vue({
    el: "#app",
    data: {
      message:'test'
    }
  });</script>