Vue指令总结

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue指令总结

v-if命令–根据条件决定是否渲染某元素

v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;v-if指令只渲染他身后表达式为true的元素;
Vue指令总结
结果
Vue指令总结

v-if 的等号右边呢就是一个条件语句。这个条件呢和data里的对应位置进行比对,如果是真的true,就会渲染该元素。

v-show

v-show和v-if功能一样,但是原理不一样
v-if 和 v-show的区别 - 一点点ning0_o - ****博客
v-if是删除或者保留dom元素
v-show是控制css中的diaplay:none属性。
虽然结果是一样的额,但是实现路径是不一样的。

v-for

遍历,最常见的当然是遍历数组。如下people是个数组,数组的内容在data里给予。
Vue指令总结
结果
Vue指令总结

v-on监听dom事件

如果某个dom元素被点击或者其他,那么调用一个函数,就这个意思。
如下,给button元素绑定了一个click。v-on可以缩写为@。
然后和之前命令不同的是。这个函数的具体内容是在methods对象中定义的。
Vue指令总结

v-bind–属性绑定

作用就是决定是否对某元素应用某个class。

v-model

用于双绑定