vue2 vue插件 1.Vue Snippets 2.Vetur
vue 的两个特性 数据驱动视图：
数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！ 双向数据绑定：
在网页中，form 表单负责采集数据，Ajax 负责提交数据。
js 数据的变化，会被自动渲染到页面上 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中 MVVM 数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例
VivwModel作为MVVM的核心
基本使用 1.导入vue.js的script脚本
1 2.在页面声明一个将要被vue所控制的DOM区域
const vm = new Vue({ el:'#app', data:{ username:'zhangsan' } }) 1 2 3 4 5 6 vue 指令 指令是vue为开发者提供的模板语法 1.内容渲染 2.属性绑定 3.事件绑定 4.双向绑定 5.条件渲染 6.列表渲染
- 内容渲染指令 v-text 指令的缺点：会覆盖元素内部原有的内容！ {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！ 插值表达式中可以运算js表达式
在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；
简写是英文的 :
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
data:{ tips:'请输入用户名' } 1 2 3 4 3. 事件绑定 v-on: 简写是 @语法格式为：
count的值是:{{count}}
点击加1 methods: { add() { // 如果在方法中要修改 data 中的数据，可以通过 this 访问到 this.count += 1 } } 1 2 3 4 5 6 7 8 绑定传参<button @click="add(2)">点击加2 add(index){ this.count += index; } 1 2 3 4 event)">如果count是偶数，则按钮背景变成红色，否则不变色 add(n,e){ this.count += n; if(this.count % 2 == 0){ e.target.style.backgroundColor = 'red' }else{ e.target.style.backgroundColor = '' } } 1 2 3 4 5 6 7 8 9 事件修饰符： 事件修饰符 说明 .prevent 阻止默认行为(a链接跳转、表单提交) .stop 阻止事件冒泡 .capture 以捕获模式触发当前的事件处理函数 .once 绑定的事件只触发一次 .self 只有在event.target是当前元素自身触发事件处理函数 .prevent 阻止默认行为 阻止a链接跳转行为
<a href="www.baidu.com" @click.prevent="show">跳转到百度首页 1 .stop 阻止事件冒泡
<input type="text" @keyup.esc="clearInput($event)" @keyup.enter="commitAjax"> clearInput(e){ e.target.value="" }, commitAjax(){ console.log('触发了提交'); } 1 2 3 4 5 6 7 4. v-model 双向数据绑定 帮助用户在不操作DOM的前提下，快速获取表单的数据
input 输入框
用户的名字是:{{username}}
1 2 textarea{{ message }}
1 2 3 select v-model修饰符 修饰符 作用 .number 自动将用户的输入值转为数值类型 .trim 自动过滤用户输入的首尾空白字符 .lazy 在“change”时而非“input”时更新 + = {{n1+n2}} 1 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-445ECG0H-1648046654845)(D:\images\92518294628c3a565cb92ed70a861c1a0b5970378989976dc7630cd3d646fd2e.png)] 获取用户名 1 2 5. 条件渲染指令 v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏 如果要频繁的切换元素的显示状态，用 v-show 性能会更好 v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好 在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！
v-if 指令在使用的时候，有两种方式：
直接给定一个布尔值 true 或 false
被 v-if 控制的元素
1 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏良好
1 key值管理可复用的元素 1 2 3 4 5 6 7 8 9 10 11 12 13 14 5.声明路由的匹配规则 在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则：//导入需要使用路由切换展示的组件
import Home from'@/components/Home.vue' import Movie from'@/components/Movie.vue' import About from'@/components/About.vue'
//2.创建路由的实例对象 const router=new VueRouter({ //在routes数组中，声明路由的匹配规则 routes:[ //path 表示要匹配的hash地址；component表示要展示的路由组件 {path:'/home'，component: Home}， {path:'/movie'，component: Movie}， {path:'/about'，component: About} ] })
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 路由重定向 当访问地址 A 的时候，强制用户跳转 到地址C, 从而展示特定的组件页面。
通过路由规则的 redirect 属性，指定一个新的路由地址来实现路由的重定向。
const router=new VueRouter({ //在routes数组中，声明路由的匹配规则 routes:[ // 重定向的路由规则 { path: '/', redirect: '/home' }, //path 表示要匹配的hash地址；component表示要展示的路由组件 {path:'/home'，component: Home}， {path:'/movie'，component: Movie}， {path:'/about'，component: About} ] }) 1 2 3 4 5 6 7 8 9 10 11 嵌套路由 通过路由实现组件的嵌套展示，叫做嵌套路由。
实现子路由 声明子路由链接和子路由占位符 1 2 3 4 5 6 7 8 9 10 11 12 13 14 通过 children 属性声明子路由规则 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则：
import Tab1 from '@/components/tabs/Tab1.vue' import Tab2 from '@/components/tabs/Tab2.vue'
// 创建路由的实例对象 const router = new VueRouter({ routes: [ { path: '/about', component: About, // redirect: '/about/tab1', children: [ // 子路由规则 // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由” { path: '', component: Tab1 }, { path: 'tab2', component: Tab2 } ] } ] })
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 子路由 path: 不推荐加/
动态路由匹配 动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。
电影1 电影2 电影3 1 2 3 定义3个规则，未免太繁琐，路由规则复用性差
{path:'/movie/1'，component:Movie} {path:'/movie/2'，component:Movie} {path:'/movie/3'，component:Movie}
1 2 3 4 使用:来定义路由的参数项
//路由中的动态参数以 : 进行声明，冒号后面的是动态参数的名称 { path:'/movie/:id'，component:Movie}
1 2 3 当前路由规则已定义，需要去movie组件去接收id值
route.params 对象访问到动态匹配的参数值：
Movie 组件-- {{this.$route.params.id}}
1 使用 props 接收路由参数 为了简化路由参数的获取形式，``vue-router允许在路由规则中开启props传参, 在定义路由规则时，声明props : true` 选项 ,Movie组件中，使用``props`接收参数
1 2 3 4 5 6 7 8 9 10 在路由规则中 声明 props:true 表示启用props传参
// 1. 声明 props : true 选项 { path:'/movie/：id'，component: Movie，props:true } 1 2 扩展query和fullpath 在hash地址中,/后面的参数项，叫做路径参数
洛基 1 在路由参数对象中，需要使用this.$route.params来访问路径参数
在 hash 地址中，? 后面的参数项，叫做查询参数
雷神 1 在路由参数对象中，需要使用this.$route.params来访问查询参数
在 this.$route 中，path 只是路径部分；fullPath 是完整的地址
/movie/2?name=zs&age=20是 fullPath的值 /movie/2 是 path的值 声明式导航&编程式导航 vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：
API 说明 this.router.replace(‘hash 地址’) 跳转到指定的 hash 地址，并替换掉当前的历史记录 this.router.back() 后退到上一个页面 router.push() 或者 $router.replace()方法，可以跳转到指定的 hash 地址，展示对应的组件页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $router.go(-1) 表示后退一层
如果后退的层数超过上限，则原地不动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $router.go的简化用法
router.forward() <button @click="router.forward()">forward 前进 1 2 3 导航守卫 导航守卫可以控制路由的访问权限
每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，我们可以对每个路由进行访问权限的控制：
//创建路由实例对象 const router = new VueRouter（{..…}）
//调用路由实例对象的beforeEach方法，即可声明“全局前置守卫" //每次发生路由导航跳转的时候，都会自动触发这个“回调函数”
router.beforeEach((to,from,next) =>{
/* 必须调 next 函数 */
})
1 2 3 4 5 6 7 8 9 10 守卫方法的 3 个形参：
to 是将要访问的路由的信息 (对象) from 是将要离开的路由的信息对象 next 是一个函数，一定要调用 next () 才表示放行，允许这次路由导航 。
注意：
在守卫方法中如果不声明 next 形参，则默认允许用户访问每一个路由！ 在守卫方法中如果声明了 next 形参，则必须调用 next() 函数，否则不允许用户访问任何一个路由！
直接放行：next() 强制其停留在当前页面：next(false) 强制其跳转到登录页面：next(’/login’) router.beforeEach(function(to, from, next) { // 分析： // 1. 要拿到用户将要访问的 hash 地址 // 2. 判断 hash 地址是否等于 /main。 // 2.1 如果等于 /main，证明需要登录之后，才能访问成功 // 2.2 如果不等于 /main，则不需要登录，直接放行 next() // 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值 // 3.1 如果有 token，则放行 // 3.2 如果没有 token，则强制跳转到 /login 登录页 if (to.path === '/main') { // 要访问后台主页，需要判断是否有 token const token = localStorage.getItem('token') if (token) { next() } else { // 没有登录，强制跳转到登录页 next('/login') } } else { next() } })
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 token从这查看
