Vue梳理
指令
v-model:表单使用,来体现双向数据绑定
v-text:使用数据，解决插值表达式语法闪烁的问题
v-for:解决了循环问题(item in arry/Object) PS:使用时需绑定key，保持数据的唯一性，key值为字符串/数值
v-if: 判断元素是否插入/移除,可与v-else-if /v-else连写
v-html:插入包含html标签的数据，并解析html标签
v-show: 根据表达式判断，元素是否显示和隐藏，可理解为display:none/block切换
v-once:绑定的数据只渲染一次，再次获取从缓存中取值
v-pre：数据原样输出 v-bind:绑定属性或自定义属性，可简写为:属性名="属性值"
v-on： 绑定事件 可简写为@事件名="事件方法" PS：事件方法加括号可以进行传参
自定义指令:Vue.directive('指令名称'，{
bind:funtion(el){}, //绑定到元素上会自定执行，且只执行一次 el代表要操作的dom元素，此时元素并未插入到页面中
inserted:funtion(el){},//此时元素已插入到页面中，触发一次
updated:funtion(el){},//元素更新时调用，可执行多次
})
事件修饰符
事件名称+. 进行事件限制 stop 阻止单击事件冒泡
prevent 阻止默认行为
self 点击当前元素触发
once 事件执行一次后解绑
按键修饰符
@keyup+. 进行按键事件限制
键盘码码值 特定键触发
left 点击鼠标左键或键盘左键时触发
right 点击鼠标右键或键盘右键时触发
middle 点击鼠标中键时触发
enter 回车键抬起
tab切换键抬起
delete 捕获删除/退格键
esc 退出键抬起
space 空格键抬起
自定义按键修饰符: Vue.config.keyCodes.键盘码名称 = 键盘码值
表单修饰符
使用v-model+. 进行表单限制 lazy 光标离开输入框显示输入内容
trim 过滤首尾的空格
number 鸡肋不建议使用
过滤器
本质是一个有参数有返回值的方法 需要配合管道符使用 |
例: <any>{{表达式 | 过滤器}}</any>
过滤器可以传参 写好的过滤器中，第一个形参是要操作的值，第二个及以后的参数是手动传进来的值
Vue.filter('name',funciton(return 处理后的数据))
全局过滤器 new Vue({ filters:{ //局部过滤器
myfilters:function(val1,val2,val3){ //val1-->要操作的数据 val2/val3-->使用过滤器中的参数
return 处理后的数据
}
} })
计算属性
computed 使用时不加括号，用于读取一个变量的值，获取值会触发该变量的getter.默认调用get方法当你修改该变量时会触发他的setter 有缓存响应式数据没有变化，就不会执行计算，节省性能值不能和data重名，不支持异步操作 setname:{ get:function(){ return 属性值 }, set:function(value){ this.属性名=value //value为setname设置的值 } }组件
组件创建
全局注册: Vue.component('组件名'，{template:HTML结构代码，methods:{}，...}) 局部注册: 父组件中使用components:{组件名:{{template:HTML结构代码，methods:{}，...}}} PS:组件必须有一个根组件 data必须为一个函数并返回一个对象 父子组件不能直接进行方法数据等访问 组件通信
父-->子: ①在父组件使用的子组件上动态绑定自定义属性='需要传递的数据' ②子组件中使用 props:['自定义属性']，并在使用的地方使用{{自定义属性}} 子-->父: ①在父组件使用的子组件标签上绑定自定义事件='执行的事件函数'，并在父组件中定义事件函数 ②在子组件中绑定原生事件(click等)及函数，定义事件函数使用 this.$emit('自定义的事件'，要传递的数据) ref: ①子传父 在子组件标签上添加 ref='自定义属性名',执行相关事件使用this.$refs.自定义属性名.属性值 ②父传子 父组件通过 this.$refs.自定义属性名.方法名 BUS通信:(中央事件总线) ①实例化一个空的vue实例Bus ②在接收数据的组件中定义mounted等生命周期函数，在函数中使用Bus.$on('信息标识名称'，回调函数) ③在发送的组件中定义事件函数，使用Bus.$emit('信息标识名称'，要发送的数据)Vue-router
使用步骤
1.引入vue-router.js,使所有的组件都注入 $router 和 $route 对象 2.定义各个路由下使用的组件(路由组件) 例:const Bar = { template: '<div>bar</div>' } 3.创建 VueRouter实例 router const router=new VueRouter({ 4.配置路由对象的规则如匹配路径、组件等 routes: [{ path: '/login',// 声明路由路径（静态路由） component: Login,//设置路由显示的组件 name:"login"//用于设置命名路由 children:[]//用于路由嵌套(二级路由等) } ] }) 5.声明入口组件，并将VueRouter实例关联到vue实例化对象 //声明组件 <router-link to='/login'>登录</router-link>//静态路由设置 router-link相当于a标签 <router-link :to='{name:"login"}'>注册</router-link>//命名路由设置PS：to前面必须加: <router-view></router-view> //router-view是路由组件渲染的出口 //关联实例 new vue({ router:VueRoter实例 }) 编程式导航:使用js事件进行路由跳转 $router.push(“name”); $router.push({path:”name”}); $router.push({path:”name”?a=123}); //传参 $router.push({path:”name”，query:{a=123}}); $router.go();路由守卫
全局路由守卫:通过VueRoter实例router创建 router.beforeEach((to,from,next)=>{})//前置守卫 router.afterEach((to,from)=>{})//后置守卫路由独享的守卫:路由配置(routes的数组对象中)上直接定义 beforeEnter:(to,from,next)=>{}组件内的守卫:在定义的组件中定义 beforeRouteEnter (to, from, next) { //不能获取组件实例this，守卫执行前，组件实例还没被创建 在next函数中执行一个回调函数 next(vm=>{vm.xxx;}) }, beforeRouteUpdate (to, from, next) { //当前路由改变，但是该组件被复用时调用,可访问this }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用//判断是否确认离开。确认执行next()；取消执行next(false) }to：进入到哪个路由去
from：从哪个路由离开
next：一个函数，决定是否展示你要看到的路由页面，不调用将会阻塞
命名视图
解释:一个页面中需要显示多个routuer-view。步骤:①:设置路由规则 routes: [ { path: '/', components: { default: Foo,//未命名的router-view显示的组件 a: Bar, //命名为a的router-view显示的组件 b: Baz //命名为b的router-view显示的组件 } } ] }) ②:为要显示的router-view设置name属性并与路由规则中的一一对应 <router-view></router-view> <router-view name="a"></router-view> <router-view name="b"></router-view>
