Vue
1.认识Vue
- 前端框架,核心库只关注视图层,方便和第三方库或项目整合
Vue的使用步骤:
1.创建一个静态项目
2.创建一个js/vue和views/xx.html
3.在文件夹和页面引入vue.js
4.编写vue代码
5.启动tomcat服务器
2.Vue常见的指令
2.1 {{属性}}
- 只能使用在html的标签中间,显示内容,其他地方不能用
2.2 v-bind
- 用于html标签内的取值,数据单向绑定,改动bind绑定的值,vue实例中的属性不会变动
- v-bind的简写: :
2.3 v-model
- 用于html标签内的取值,数据双向绑定,改动model绑定的值,vue实例中的属性会一起变动
- 表单提交的时候优先使用v-model
2.4 v-html
- 将绑定的属性值通过html格式显示
2.5 v-if
-
判断指令:通过条件判断显示哪一个东西
v-if v-else-if v-else
2.6 v-for
- 循环指令
2.6.1 普通数组的处理方式
2.6.2 对象集合处理
2.7 v-on
- 事件绑定指令
- v-on 缩写: @
3.vue事件
3.1 事件对象
-
用来事件从触发开始到最终函数响应整个过程的对象
-
事件信息封装对象: 使用 $event 标记
3.2 事件源
- 被触发事件的html标签
3.3 事件函数
- 事件源被触发之后执行的逻辑
3.4 事件函数传参
- 执行的事件函数里带的参数
4.vue属性
4.1 el
- vue从什么地方开始解析数据
4.2 data
- vue存放数据的地方
4.3 methods
- 编写业务逻辑
4.4 filters
- vue的过滤器
4.5 mounted
- html加载后马上执行的函数,一般用在初始化data的数据