Vue指令

内容处理

• v-once
• v-text
• v-html

v-once : 使元素内部的插值表达式只生效一次

  
 {{xxxxx}} 

---

v-text : 元素内容整体替换为指定纯文本数据

• 与插值表达式区别：插值表达式是用来进行元素动态设置的，v-text是直接将 纯文本内容 设置为 指定数据，会覆盖老元素
• 只会显示纯文本，添加标签元素，也不会生成标签元素

  
 这段内容会被覆盖 

new Vue({
  el:"#app",
  data:{
    content:"我是新内容" // 纯文本

    content:" span内容 " // 非纯文本 不会生成span标签
  }
})

---

v-html ：元素内容整体替换为指定的HTML文本

• 类似于v-text，但是非纯文本可以转换成对应元素

  
 这段内容会被覆盖 

new Vue({
  el:"#app",
  data:{
    content:"我是新内容" // 纯文本 ok

    content:" span内容 " // 非纯文本 生成span标签
  }
})

属性绑定

v-bind指令：v-bind指令用于动态绑定HTML属性

• Class绑定
• Style绑定

内容绑定方法只能处理内容，如果对标签属性进行处理，通过绑定属性

  
 内容 
  
 内容 
  // 简写

new Vue({
  el:"#app",
  data:{
    content_title :"我是title属性内容",
    demo:"hello"
  }
})

• v-bind允许使用表达式 , 与插值表达式类似
• 不允许使用语句内容

  , error

  
 内容 
 // ok

• 如果需要一次绑定多个属性，还可以绑定对象。

  
 内容 

new Vue({
  el:"#app",
  data:{
    attrObj:{

      id :"box", // id属性

      title :"我是title", // title属性

      class :"clsbox", // class属性

      'data-title':"这是内容" // 自定义属性
    }
  }
})

---

Class绑定

• class是HTML属性，可以通过v-bind进行绑定，并且可以与class属性共存

  
 内容 

new Vue({
  el:"#app",
  data:{
    clsbox:"x" // 此时添加了两个class 一个 "a" 一个 "x", clsbox是动态绑定的
  }
})

注意事项

• 元素多个动态类名的绑定的错误写法

 内容 
  // error

 内容 
  // ok

new Vue({
  el:"#app",
  data:{
    clsbox:"x y z" // 多动态名称 不常用

    // clsbox1:"y"
    // clsbox2:"z"
  }
})

• 三元运算动态添加 class

 内容 
  // ok

new Vue({
  el:"#app",
  data:{
    bol:true,
    clsbox1:"y",
    clsbox2:"z"
  }
})

• 如果类名既有条件判断，又同时存在多个类名，组合则写法比较复杂。对于class绑定，Vue.js中还提供了特殊处理方式。
• 对象表示法，键表示类名，值表示键是否生效。对于带横线类名用引号包裹

 内容 

new Vue({
  el:"#app",
  data:{
    isB:true,
    isC:false
  }
})

• 数组表示法，对 对象表示法 的扩展

 内容 

new Vue({
  el:"#app",
  data:{
    isB:false,   // 此时有 a class-d z 三个属性
    c:"z"
  }
})

---

Style绑定

• style是HTML属性，可以通过v-bind进行绑定，并且可以与style属性共存。
• 不建议写在行内不好维护，建议从 data 中获取 , 注意要加单位px等。
• 相同属性，框架会优先取 绑定的属性的值

 内容 

new Vue({
  el:"#app",
  data:{
    styleObj:{
      width:'100px',  // 覆盖之前设置的 50px width
      height:'100px',
      border:'1px solid #ccc',
      backgroundColor:'red', // 驼峰
      'font-size':'30px' // 非驼峰
    }
  }
})

• 当我们希望给元素绑定多个样式对象时，可以设置为数组

 内容 

new Vue({
  el:"#app",
  data:{
    styleObj1:{ ... },
    styleObj2:{ ... }
  }
})

常用于公共样式和单独样式的组合，如图

image.png

渲染指令

• v-for
• v-show
• v-if

v-for指令

• 用于遍历数据渲染结构，常用的数组与对象均可遍历。
• 哪个元素要多次创建，将指令添加到哪个元素
• 遍历时的参数： index为索引,key为键

  

    
{{ item }}
 // 数组
  

  

    
{{ val }}
 // 对象
  

new Vue({
  el:"#app",
  data:{
    arr:["1","asd",2],
    obj:{ 
      content1:"内1",
      content2:"内2"
    }
  }
})

• 数值遍历 : 适用于没有基础数据，凭空创建 数值个 元素

  

    
{{ item }}
  // 1,2,3,4,5
  

注意事项

• 使用v-for的同时，应始终指定唯一的 key属性
• key属性是通过 v-bind 绑定的一个属性，是标识 每项的 唯一值
• for循环中 index下标 无法作为 key，如果属性值也不唯一（无法作为key）。可以把数据改成对象，添加唯一key属性
• 为什么会要添加key?
  • vue.js 在进行结构渲染时，会为了提高执行效率，对于结构一致的内容只进行修补操作，不会进行移除替换，因此用户输入的内容得以保留未被删除。

如图，初始时文本1->输入框1，一一对应。当控制台执行 vm.arr.reverse() 时

vue 修改而非替换的操作，会导致结构和内容不一致

正确写法

  
{{ item }}

---

• 通过