前端框架之一:Vue高级
1.列表渲染
v-for 指令需要使用 item in items 形式的特殊语法
遍历数组
遍历对象
总结
1. v-for就是通过 for ..... in.... 的形式将 data 中的数据, 遍历加载到 DOM 元素中
2. vue 框架也可以使用 v-for 遍历对象 例如: 使用 v-for 遍历对象, 将对象中的数据也可以遍历出来
2.事件处理
事件绑定方法
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
总结
1. vue 框架中绑定事件使用的是 v-on: 我们也可以使用简写的形式: @ 来表示
2. 可以使用 @click.stop 或者 @click.prevent 设置两者的联合 @click.stop.prevent 等来阻止这些行为和事件
3.表单输入绑定
可以用 v-model 指令在表单<input> 及 <textarea>元素上创建双向数据绑定,一般是和表单元素共同使用的, 通过该指令的使用, 可以双向绑定数据,一般是和表单元素共同使用的, 通过该指令的使用, 可以双向绑定数据
单行文本框
input
多行文本框
textarea
复选框
checkbox
单选框
radio
下拉框
select---->option
总结
1. v-model:一般是和表单元素共同使用的, 通过该指令的使用, 可以双向绑定数据
2. 整个 vue 框架中, 只有该指令能够达到双向绑定的目的, 其他的指令都是单项绑定的
4.过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化
双花括号插值
注意点
1. 在内部时使用filters进行过滤,在外部时使用filter进行过滤
内部过滤
外部过滤
2. 案例中小写变大写:
格式
{{ prize | RMB }}
总结
1. filter 是 vue 中的过滤器, 过滤器顾名思义就是把数据进行过滤, 得到过滤的数据的作用
2. 过滤器的写法
写在 vue 对象内部的过滤器
以 filters 开头, 且内部都是方法
写对象外部的过滤器
以 filter 开头, 且过滤器名称和方法分开
3. 从 vue 2.x 开始, 过滤器推出了与 v-bind 结合使用的情况
5.自定义指令
内部显示
外部显示
自定义指令指的就是我们自己制作自己想要的指令效果
directive(自定义指令) 和过滤器一样,也有两种, 分别为内部和外部, 这两个不同点就是名字和书写格式上
6.实例生命周期
生命周期钩子函数
beforeCreate
实例初始化之后,事件配置之前被调用
created
在实例创建完成后被立即调用
beforeMount
在挂载开始之前被调用
mounted
实例挂载到dom之后被调用
beforeUpdate
数据发生变化前调用
updated
数据发生变化后调用
执行过程图示