Vue
2019-11-23 13:37:15 371 举报AI智能生成
登录查看完整内容
Vue.js是一款用于构建用户界面的渐进式JavaScript框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当复杂度增加时，Vue也完全能够胜任。Vue提供了强大的工具来协助您高效地开发复杂的单页面应用。其生态系统已经相当成熟，拥有大量的插件和组件可供选择。此外，Vue还具备优秀的性能表现和灵活的架构，使其成为业界最受欢迎的前端框架之一。无论是初学者还是专业开发者，都能从Vue的强大功能和简洁语法中受益匪浅。
作者其他创作
大纲/内容
过渡/动画
v-enter
进入前，进入动画还未执行
v-enter-to
进入后，动画执行完毕
v-leave
离开前，离开动画还未执行
v-leave-to
离开后，离开动画执行完毕
v-enter-active
进入动画执行阶段
v-leave-active
离开动画执行阶段
其他
使用Vue过渡类名实现动画首先要用<transition></transition>包裹
可通过加name属性改变默认v-前缀，<transition name=\"my\"></transition> 使用时 .my-enter-active{}
给列表加过渡动画时使用<transition-group name=\"my\"></transition-group>
过渡模式
in-out
新元素先过渡，完成后当前元素过渡离开
out-in
当前元素先过渡离开后新元素过渡进来
watch / computed
watch 监听属性
监听data数据变化后触发对应函数，函数有newValue和oldValue两个参数
computed 计算属性
计算属性，在引用时候，一定不要加 () 去调用，直接当做普通属性使用
只要计算属性，这个 function内部，所用到任何 data发生变化就会重新计算 这个计算属性的值
计算属性的求值结果会被缓存起来，方便下次调用，如果计算属性方法中，任何数据都没发生变化，则不会重新对计算属性求值
组件传值
父向子
父组件通过 v-bind 传参 <son :data=\"msg\"></son>
子组件通过 props 接收，接收到的数据只可读，props: ['data']
子向父
父组件中传递自定义事件，<son @myData=\"handlerData\"></son> handlerData(data){} handlerData函数参数就是子组件传递的值
高级组件之 provide / inject
provide / inject 是父组件可以向所有的子孙组件注入一个数据，所有的子孙组件都可以接收到
父组件通过 provide:{name: 'zhangsan'} 传值
子孙组件通过 inject:[name] 接收
组件
介绍
组件的出现是为了拆分vue代码，以不同的组件划分功能模块
模块化是从代码角度划分的，组件化是从UI角度划分的
创建方式
var 组件名称 = Vue.extend({template: ......})
上面的都是公共组件，现在创建私有组件 components: {组件名: {template: ......}}
组件切换
使用 if else可切换组件 <login v-if=\"flag\"></login><register v-else=\"flag\"></register>
is 属性可用来切换组件 <component :is=\"comName\"></component>
Vue
MVVM
MVVM是前端视图层的分层开发思想，分为M、V和VM
M指数据层，V指视图层，VM是M和V之间的调度者，提供数据的双向绑定
VM实例，会监听自己身上 data 中所有的数据，只要数据发生变化，就自动把新数据同步到页面中
基本指令
v-cloak
v-cloak解决插值表达式在页面初始加载时的闪烁问题，在数据加载成功前隐藏，成功后显示
v-text
v-text默认没有闪烁问题 数据加载成功后 将会清空元素中的内容，将新数据覆盖上去
v-html
v-html专门用来输出html格式的字符串，会自动解析成html格式
v-bind
给元素绑定属性的指令 v-bind:name=\"myname\" 可以简写成 :name=\"myname\"
v-on
事件绑定机制 v-on:绑定事件 缩写是 @
v-model
数据的双向绑定 只能用于表单元素 v-model=\"msg\"
v-for
v-if
显示或隐藏元素，每次操作都会删除或创建，性能消耗大，需要用到时才会创建
v-show
显示或隐藏元素，通过display属性实现，适合频繁切换的场景
事件修饰符
.stop
阻止事件冒泡 @click.stop=\"handleClick\"
.prevent
阻止默认事件 @click.prevent=\"link\"
.capture
给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁
.self
点击当前元素才会触发事件处理函数
自定义指令
自定义全局指令
基本概念
创建自定义指令时不加 v-，但在调用时需加上v-前缀
对象函数
bind
bind，每当指令绑定到元素身上时触发，这时元素还未插入dom，不能执行dom相关操作
inserted
元素插入dom中后触发
updated
当节点更新时触发，可能会执行多次
bind，inserted，updated的第一个参数是el，表示被绑定的元素对象
自定义私有指令
自定义指令简写
简写中不用再写 bind，inserted，updated函数，写的代码将自动被放入bind和updated中
过滤器
全局过滤器
私有过滤器
在私有的Vue实例上通过filters: 过滤器名称(){} 创建，使用方式与全局相同
生命周期
beforeCreate
Vue实例创建之前执行，此时data和method还未初始化
created
实例创建完毕，data和method初始化完毕
beforeMount
挂载前，此时模板已在内存中，还未渲染到页面中
mounted
挂载后，模板渲染到已页面中了
beforeUpdate
更新前，页面中的数据与data中的数据还未同步
更新后，页面数据与data已同步
beforeDestroy
销毁前，此时实例上的数据方法等还可以使用
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
0 条评论
回复 删除
下一页
