赞
踩
目录
用于构建用户界面的前端框架
vue两大特性: 数据驱动视图,双向数据绑定
$event
vue 提供的特殊变量,表原生的事件参数对象event, 可解决事件参数对象event被覆盖的问题(点击按钮变色问题)
事件修饰符
方便对事件的触发控制 <a href=" " @click.prevent=" "></a>
按键修饰符
监听键盘事件时,判断详细的按键,可为键盘相关的事件添加按键修饰符
e.g: <input @keyup.enter="submit"> 只有按键Enter时,调用submit()
v-model: 双向数据绑定指令,不操作DOM的前提下,快速获取表单的数据
使用key维护列表状态
key的注意事项
兼容性
仅在vue 2.x和1.x中支持,在 vue 3.x 的版本中剔除了过滤器相关的功能(官方建议使用计算属性或方法代替被剔除的过滤器功能 )
全局过滤器
template
script
style
关系
使用步骤
私有子组件
全局组件
根本原因是:
解决:
使用自定义属性
使用自定义事件
在 vue2.x 中,兄弟组件之间数据共享的方案是 EventBus (eventBus.js)
this.$nextTick(callback) 方法
keep-alive 对应的生命周期函数
属性
v-slot:(#)指令:
- // 私有自定义指令节点
- directives:{
- /* color:{ // 定义名为color的自定义指令, 指向一个配置对象
- // 当指令首次被绑定到元素上时,会立即触发bind函数, 若DOM更新时,不会触发
- // 形参el为当前被绑定的DOM对象 binding接收data传的值
- bind(el, binding){
- el.style.color = binding.value;
- },
- update(el, binding){ // DOM更新时触发
- el.style.color = binding.value;
- },
- } */
- // 简写
- color(el, binding){
- el.style.color = binding.value;
- },
- },
- // 全局自定义指令 定义在main.js中 通常使用全局自定义指令, 私有的意义不大
- Vue.directive('col',(el, binding)=>{
- el.style.color = binding.value;
- })
router, 就是对应关系
工作方式:
实现简易前端路由:
基本用法
控制路由的访问权限
- // src->router-> index.js
- // 1.装vue-router@3.5.2包
- // 2.导入Vue, 路由模块, 以及所需要的组件
- import Vue from 'vue'
- import VueRouter from 'vue-router'
- import Home from '@/components/Router/Home.vue'
- // 3.将VueRouter装为项目插件
- Vue.use(VueRouter)
- // 4.创建实例对象
- const router = new VueRouter({
- // 7. 定义哈希地址与组件的对应关系 { path: '哈希地址#之后的内容', component: 组件名 }
- routes:[
- // 重定向的路由规则 在/路径下显示主页
- { path: '/', redirect: '/home' },
- // 路由规则
- { path: '/home', component: Home },
- // 父级路由规则, Mine页面
- {
- path: '/mine', //父级地址
- component: Mine, //父级组件名
- // redirect: '/mine/mineabout1', //可使用路由重定向, 当访问mine时,直接展示MineAbout1上, 也可使用默认子路由
- children: [ //通过children属性, 嵌套声明子级路由规则 子路由不使用/
- // 默认子路由: children数组中, 某个路由规则的path为空字符串, 打开时,直接展示该子组件上
- { path: 'mineabout1', component: MineAbout1 },
- { path: '', component: MineAbout2 }
- ]
- },
- // 动态参数 在World组件中,根据参数值, 展示对应组件 变化部分写 :参数
- // 方式1 this.$route.params.mid 拿到mid
- // { path: '/world/:mid', component: World },
- // 方式2 设置 props: true ,在组件中用props接收
- { path: '/world/:mid', component: World , props: true },
-
- { path: '/main', component: Main },
- { path: '/login', component: Login },
-
- ]
- })
-
- // 8.为router实例对象, 声明全局前置守卫 发生路由跳转,必然触发beforeEach指定的回调函数 to将要访问的路由信息对象, from将要离开的路由信息对象, next()函数 , 表放行
- router.beforeEach( (to, from , next) => {
- if(to.path === '/main'){ //判断用户将要访问的哈希地址是否为/main
- //等于,则需要登录才能访问 获取localStorage中的token
- const token = localStorage.getItem('token') //如果在浏览器Application->localStorage中有token,就可访问到main
- if(token){ //有token,则放行
- next()
- }else{ // 无token, 则强制跳转到/login
- next('/login')
- }
- }else{ //访问的不是后台主页,直接放行
- next()
- }
- })
- // 5.向外共享
- export default router
-
- // 6. main.js中挂载
- // 导入路由模块 拿到实例对象
- import router from '@/router/index.js'
- new Vue({
- render: h => h(App2),
- // Vue中使用路由, 必须将路由实例对象router进行挂载
- router, //router : router 属性名属性值一样,可简写为router
- }).$mount('#app')
-
-
- //App.vue组件中 项目中安装和配置了vue-router,就可以使用 <router-view>组件来占位 和 <router-link>替代普通a链接 自动加# -->
- <router-link to="/home">主页</router-link>
- <router-link to="/mine">我的</router-link> <hr>
- //<!-- 动态参数 哈希地址中. /后的参数项,叫路径参数; 在路由参数对象中,用this.$route.params访问路径参数; ?后的参数项,叫查询参数,用this.$route.query访问; this.$route中, path只是路径部分 e.g:/world/2, fullPath是完整路径 e.g: /world/2?name=mm&age=18 -->
- <router-link to="/world/1">W1.vue</router-link>
- <router-link to="/world/2?name=mm&age=18">W2.vue</router-link> <hr>
- <router-view ></router-view>
-
- //<!-- 行内使用编程式导航跳转时,省略this,否则报错 -->
- <button @click="$router.back()">back</button>
- <button @click="$router.forward()">forward前进</button>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。