vue学习之三常用命令

一、插值

1.1 +号运用




    
    Title
    


    
{{ greeting + greeting }}

  

二、v-text

类似双大括号语法渲染数据的另一种方式是使用v-text。




    
    Title
    


    

  

三、v-html

双大括号语法无法渲染HTML标签,我们需要使用v-html。




    
    Title
    


    

  

四、v-for

接下来,我们看看数组和对象的渲染方式。




    
    Title
    


    
  • {{ item }}
  • {{ item.name }}的爱好是{{ item.hobby }}
  • {{ item }}

  

五、v-if

渲染数据的时候,同样也可以使用条件判断,我们来看看。




    
    Title
    


    
欢迎美女光临~~
欢迎帅哥光临
滚~~

通过上面的代码我们可以看出,v-if的作用是控制标签的显示,它通过判断添加标签,底层采用的是appendChild来实现的,下面我们来看一个同样也是控制标签显示的另一个指令v-show。

六、v-show

与v-if不同的是,v-show通过样式的display控制标签的显示。




    
    Title
    
    


    
xxxx

  

与v-if不同的是,v-show通过样式的display控制标签的显示。

v-if和v-show的性能比较

我们简单比较一下二者的区别:

实现方式:v-if底层采用的是appendChild来实现的,v-show通过样式的display控制标签的显示,正因为实现方式上面有差异,导致了他们的加载速度方面产生了差异;

加载性能:v-if加载速度更快,v-show加载速度慢

切换开销:v-if切换开销大,v-show切换开销小

v-if是惰性的,它是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好,如果在运行时条件很少改变,则使用v-if较好。

七、v-bind

绑定属性,不多说了,注意冒号后面跟标签的属性,属性后面的等号指向数据,它可以简写为 :class, :href。




    
    Title
    
    


    
Hello World!

  

八、v-model




    
    Title
    
    


    

请选择你的女朋友


{{ name }} {{ gender }} {{ girlFriends}}

  

九、v-on

另一个非常重要的指令是v-on,使用v-on我们可以在标签上面绑定事件,注意我们新建的vue实例app01中多了一个属性,methods,在methods中,是我们具体事件的实现方式。




    
    Title
    
    


    

alex

  

十、指令修饰符




    
    Title
    
    


    
学科 成绩
Python
Linux
Vue

{{ python }} {{ linux }} {{ vue }}

  

十一、计算属性




    
    Title
    
    


    
学科 成绩
Python
Linux
Vue
总成绩 {{ sumScore }}

{{ python }} {{ linux }} {{ vue }} {{ sumScore }}

{{ greeting }}

{{ reversedGreeting }}

  

十二、自定义属性




    
    Title
    
    


    
alex is big sb.

  

十三、获取DOM元素




    
    Title
    
    


    

alex

  

你可能感兴趣的:(vue学习之三常用命令)