Vue的基本使用

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的数据

5.vue生命周期