了解三大框架
1 | vue |
现代开发模式- 20%表现层
1 | vue/react |
传统开发模- 80%表现层
1 | jQuery |
vm结构
1 | new Vue({ |
概念
- 数据同步
- 双向绑定
- 虚拟DOM:通俗说就是一个大json,存着各个节点数据
- 合并请求
- 快速查询
- 局部刷新
vue指令(directive)-补充了html的属性
v-bind:给属性绑定数据
v-model:数据双向绑定
- 数据(data)和input之间双向
- view(html) <-> controller(VM) <-> model(data)
- MVVM模式,model层通过controller层(VM)与view层进行数据双向绑定
v-text:将数据以文本形式绑定到标签中,类似innerText
v-html:将数据转成html再绑定到标签中,类似innerHTML
v-on:绑定事件,如: v-on:click=””
v-show:隐藏显示标签
v-if:跟v-show效果相同,但是v-if会删除和重新渲染dom节点,而v-show是通过display:none样式隐藏
v-for:循环渲染数据,需要配合key使用
- 数组 v-for=”(item,index) in array”
- json v-for=”(val,key) in json”
- 字符串 v-for=”(char,index) in string”
- 数字 v-for=”i in number”
v-pre:预编译,提高性能,例如:
div标签有等不需要编译的文本,可以给div标签加v-pre指令,直接输入”“文本v-cloak:在页面还未进行编译时,隐藏双向绑定的标签
需要配合下面样式使用- *[v-cloak]{ display:none }
简单的实现双向绑定代码
1 | <!DOCTYPE html> |