一、插值
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