Vue 指令 / 页面展示

页面展示

基本指令

• v-text
  用于在页面中展示数据，可以简写为{{ }}的形式

  
  {{msg}}
  
  

• v-html
  同样是用于展示数据，与v-text区别相当于innerHtml和textContent

• v-pre
  用来在展示页面是跳过渲染某一段代码，该方法主要可以用来跳过没有指令的代码来提高加载速度

  {{msg}}
  

• v-once
  添加了该指令的元素/组件只会渲染一次，之后vue重新渲染时会直接跳过该元素/组件，即使我们改变元素/组件引用的数据，元素也不会重新渲染，我们可以在内容固定的元素/指令上使用该指令来节省性能

  
  {{msg}}
   
  

• v-bind
  可以绑定一个或多个动态，或者一个组件的prop，在vue中可以使用v-bing来将元素本身的属性变为动态特性， 成为动态特性后可以接受变量值，使元素更加灵活，可以简写为 " : " 的形式

• v-on
  绑定事件监听器，事件类型由参数指定，表达式可以是一个方法的名字或者是一个内联语句，当用在普通元素上时只支持原生DOM事件，用在组件上时可以支持自定义事件，可以简写为"@"形式

• v-cloak
  该指令是vue用来配合css样式在vue没有在页面渲染完成之前，使用该指令的元素不显示，使用户界面不会展示在渲染未完成之前的{{msg}}之类的修饰符，该指令会在页面渲染完成之后自动被去除

• ref
  ref用来给元素或者子组件设定引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM上使用，引用指向的就是DOM元素对象，如果在组件上使用，引用指向的就是子组件对象

  {{picked}}
  
  new Vue({
   ...
   created(){
      console.log(this.$refs.p,"created"); // p undefined
      this.$refs.p.style.color="red"; //Cannot read property 'style' of undefined"
    },
    mounted(){
      console.log(this.$refs,"mounted"); //p:p
      this.$refs.p.style.color="red";
    }
  })
  

  通过ref注册的元素/组件可以在父组件的this.$refs中获取，但是需要注意的是，我们注册的元素/组件初始渲染时不能被获取到的，只有在创建完成时才能被获取，因为ref本身是作为渲染结果被创建的，同时refs也不是响应式的

绑定HTML class样式

    
    
hello
    
    
hello
    
    
hello
    
    
    
hello
    
    
hello

:class样式能够和原生的class属性共存，在元素被渲染后，：class样式和class的样式都会被保留

在使用组件的时候，在组件上内部添加的样式将会和在组件上添加的样式一同被渲染

绑定内联 style样式

• 对象语法
  ：style的对象语法十分直观，css属性名可以用驼峰命名法或者短横分割命名

  
  
  data:{
    activeColor:'red',
    fontSize:30
  }
  

  直接绑定到一个样式对象通常更好，让模板更清晰

  
  
  data:{
    styleObj:{
      color:'red',
      fontSize:'13px'
    }
  }
  

  同样可以集合返回对象的计算属性使用

• 数组语法

  ：style的数组语法可以将多个样式对象应用到一个元素上

  
    
  data:{
    baseStyles:{
      color:"red"
    },
    overr:{
      fontSize:"40px"
    }
  }
  

• 自动添加前缀

  当:style使用需要特定前缀的css属性时，如transform，vue会自动侦测并添加相应的前缀

条件渲染

v-if,v-else,v-else-if

v-if的判断条件可以是数据表达式，也可以是一个变量的值,或者是一条逻辑判断语句

A


B


C

也可以通过v-if来控制组件是否能够显示

v-show

v--show用法与v-if的大致相同，除了v-show没有v-else，不同的是带有v-show属性的元素始终会被渲染并保留在DOM中，v-show是通过切换元素的css样式disoplay的值来控制元素是否显示，而v-if则是通过创建和销毁来控制元素是否可见，所以相比而言v-if的切换开销更高一些，但是v-if是惰性的，如果初始的条件为false的话，那么它会保持什么也不做，直到条件发生变化，而v-show不论条件是什么都会进行渲染，一般来说，v-show会有更高的初始渲染开销
一般来说，如果需要非常频繁的进行切换，那么我们会使用v-show，如果运行条件不是经常改变，那么我们会使用v-if

列表渲染

v-for

我们使用v-for指令根据一组数组选项的列表进行渲染，v-for指令需要以item in items形式的特殊语法，items是源数据组，item是元素迭代的别名

也可以使用of代替in作为分割符

在v-for块中，我们拥有对父级作用域完全的访问权限，还支持可选的第二参数为当前项的索引值

    
{{item}}{{index}}


new Vue({
  data:{
    items:["tom","xm"]
  }
}).$mount("#box")

我们也可以使用v-for通过一个对象来迭代

    
{{value}}


new Vue({
  data:{
    items:{
      name:"tom",
      age:18
    }
  }
}).$mount("#box")

vue对于对象的迭代默认会展示对象的键值对的值，可以通过提供第二个参数来获取对象的键名

{{value}}{{key}}

也可以传入第三个参数来获取索引值

{{value}}{{key}}{{index}}

这里的遍历顺序遵照JS中Object.keys()的顺序

:key

当vue.js在渲染是时发现已有元素再次被使用时会复用已有元素而不是重新渲染，这会加快vue渲染的速度，同时还有一个好处，例如下面这个例子

在这个例子中，我们点击button进行切换时，veu会复用重复的元素，template中相同的元素如llabel，input等元素只会渲染一次，在第二次出现时会被复用，如lable只会替换它的文字，input只会替换元素的placeholder，而不会再次重复渲染标签，所以在点击切换时我们会发现输入框中我们输入的内容会依然存在

这种复用会提高vue的运行效率，但是有时在实际开发中我们可能需要避免这种情况，此时需要我们用到:key，我们可以通过为每一个input设置不同的:key来通知vue需要将该元素重新渲染

建议在使用v-for循环时如果要使用:key要给每一个不同的元素不同的key值，推荐使用如下方法

{{item}}

显示过滤/排序结果

有时候我们想要显示一个数组的过滤或排序副本，而不改变或重置原始数据，在这种情况下，可以创建返回过滤排序数组的计算属性

{{item}}

new Vue({
        data:{
          num:[1,2,3,4,5,6,7,8]
        },
        computed:{
            items:function () {
                return this.num.filter(function (item) {
                    return item % 2 === 0+it
                    
                })
            }
        }
 }).$mount("#box")        

在计算属性不适用的情况下，可以使用methods来配合filter

{{item}}
 
 
 new Vue({
        data:{
          nums:[1,2,3,4,5,6,7,8]
        },
        methods:{
            even(n){
               return n.filter(function (n) {
                   return n%2===0
               })
            }
        }
}).$mount("#box")       

v-for和v-if

类似于v-if，我们也可以利用带有v-for的