v-model双向绑定的defineProperty实现

• 多选框绑定v-model时，会把选中的对应的value值加入到v-model绑定的数组中

• 下拉列别选取单个值时使用字符串，多个值(multiple)需要使用数组

• select下option 可以用v-for遍历，但是要用v-bind绑定

  • 如果option有value时，选中时会把option的innerHTML内容替代掉

• Vue下原生js实现数据双向绑定

  defineProperty可以修改对象下某一个属性值，且实时监听修改的内容变化，采用数据劫持，发布者和订阅者的原理，defineProperty去劫持set中的属性，实时变化，在数据变动时发布消息给订阅者，触发响应的回调

  let obj ={txt:""}
  document.addEventListener("keyup",function(e){
      obj.txt = e.target.value;//监听input框内容
  })
  Object,defineProperty(obj,'txt',{
      set:function(val){
          document.getElementById("box").innerHML = val;
      },
      get:{
          return obj
      }
  })
  Object.defineProperty(obj, prop, descriptor)
  obj
  要在其上定义属性的对象。
  prop
  要定义或修改的属性的名称。
  descriptor
  将被定义或修改的属性描述符。
  

• v-model数据双向绑定

  • v-model 语法糖 必须有值， 会忽略value,checked,selected

• checkbox radio select 当被选中时，可以把写入的value值赋值给v-model,

  option可以进行循环,使用v-bind绑定value值，value和innerHTML共存时mvalue会替代innerHTML

• 复选框：当选中时把true-value的值赋值给v-model，未选中时把false-value赋值给v-model

• 表单修饰符 ：

  • .lazy:让表单失去焦点后再触发(还原change事件 )

  • .number：当数字使用v-model绑定后就变成了String类型，可以把值重新转化成number类型

  • trim:同jq下的trim（），去掉表单中输入的前后空格

• 动画过渡

  当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

v-enter v-enter-active v-enter-to v-leave v-leave-active v-leave-to

常用:v-enter-active v-leave-active

​ 2. 过渡模式:mode=“in-out” in-out 注意把DOM加上唯一的key值

​ 3. is方法的使用:进行组件过渡时,要使用v-bind:is绑定is的方法,查找相对应的组件名, 过渡显示在DOM节点中;组件中特殊标签嵌套规则要使用is