六.Vue.js界面绑定指令-元素、事件、属性绑定

界面通过绑定vue指令对dom进行操作，通过数据与dom的结合，完成渲染。按照vue绑定dom操作，将其分为操作dom内容节点、事件、属性

操作内容节点：v-text、v-html、v-model、v-show、v-if、v-else、v-else-if、v-for、v-pre、v-cloak、v-slot、v-once

操作事件：v-on

操作节点属性：v-bind、key、ref、is

1. 操作内容节点

• v-text：绑定纯文本，v-text ="name"和 {{ name }}一样
• v-html：绑定的时一段html代码，html代码会插入绑定位置，scoped 的样式不会应用在 v-html 内部，可定义全局css或为绑定的html写style
• v-model:  绑定表单元素，如input、textarea等，此方式 可使用修饰符来达到限制作用，如：.lazy（input事件变成change事件失去焦点 或者 按下回车键时才更新）、.number（输入的值转化为Number类型）、.trim（自动过滤掉输入的首尾空格）   v-model.lazy = "val"
• v-show、v-if：控制dom元素显示或隐藏，v-show通过display：none控制元素的，v-if则是控制元素创建及销毁
• v-if、v-else、v-else-if：三者配合使用，相当于javascript中的条件判断
• v-for：遍历循环，优先级比 v-if 高
• v-pre：不编译此元素，如：{{ this.name }},html显示就是 {{ this.name }}
• v-cloak：与样式[v-cloak] { display: none; }配合使用，隐藏未编译的标签，如：{{ this.name }}在界面加载中时会出现{{ this.name }}，使用v-cloak后则不会出现
• v-solt：组件html填充，具体查看组件
• v-once：只渲染元素和组件一次

2. 操作事件

• v-on：绑定事件监听器，如绑定点击事件用 v-on:click，等同于@click。绑定多个事件可通过对象方式，如 v-on="{ click: clickFn, mouseover: mouseoverFn }",参数$event为鼠标对象。修饰符有.stop（调用 event.stopPropagation()）、.prevent（调用 event.preventDefault()）、.capture（先执行父级的函数，再执行子级的触发函数）、.self（触发元素本身时才触发回调）

3. 操作节点属性

• v-bind：绑定元素属性，v-bind:class等同于:class，绑定内容方式 :class="{ red: isRed } 、:class="[classA, classB]、:class="[classA, { classB: isB, classC: isC }]
• key：用于v-for中。key时遍历key-index对象（快），无key时遍历旧Vnode（慢）
• ref：本页面获取dom元素，如：

  // 本页面获取内容
  <div ref="rDom">你好呀！</div>
  
  this.$refs.rDom会输出<div>你好呀！</div>
  
  
  // 组件中可以获取子组件中的data和去调用子组件中的方法
  <nav ref="navObj"/>
  
  this.$refs.navObj 能访问组件nav中的data，methods

• is：运用组件，如ul,li标签，li使用组件时会报错，这时候则需要li使用is方式来替换成组件，如下代码。还可以用于tab标签切换，内容更改，使用内容组件

  <ul>
    <my-component></my-component>
    <my-component></my-component>
  </ul>
  替换成
  <ul>
    <li :is='my-component'></li>
  </ul>