VUE
1.路由跳转页面
路由整体配置
建立登录页面组件login.vue--引入组件到路由文件index.js并配置映射关系--App.vue设置路由占位符router-view--在网页url输入地址进行手动跳转测试运行是否正常
在项目事件中跳转到其他页面：
//在根路径后面push子路径
this.$router.push('/home')
2.路由重定向用法：
重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置
应用：自动将首页url跳转到登录页面url
const routes = [
{
path: '/',
redirect: '/login'//重定向
},
{
path: '/login',
name: 'Login',
component: Login
}
]
3.Vue的v-modle实现原理
//v-model实际就是语法糖，简化了写法一、二
//底层流程：动态绑定msg值，然后出发事件input提交：handle函数，函数式：将传入的msg数据赋值给div的msg
<body>
<div id="app">
<div>{{msg}}</div>
<!-- 写法1 -->
<input type="text" v-bind:value="msg" v-on:input="handle">
<!-- 写法2 -->
<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
<!-- 写法3 -->
<input type="text" v-model="msg">
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg:'Hello Vue!'
},
methods: {
handle:function(event){
// 使用输入域中最新的数据来覆盖原来的数据
this.msg = event.target.value;
}
}
});
</script>
</body>
4.路由导航守卫
使用案例：访问其他页面时先验证token值
//用户没有登录 而是直接通过修改浏览器 url 来访问网页，这种操作无疑是不安全的。
路由导航守卫可以让我们对用户要跳转的路由做一次检查，符合条件后放行，不符合条件则强制用户跳转登录页面。
//路由导航守卫：作用：在没有登录时访问其他页面，需要先登录=跳转到登录页面
//1.在路由对象上 挂载路由导航守卫
router.beforeEach((to,from,next)=>{
//2.如果要访问的是登录页面，就直接跳出守卫即可。反之需要判断token的值
if(to.path=='/login') return next();
//3.先获取到页面的token值;有可能是空的，因为你还没有登录
const tokenStr=window.sessionStorage.getItem('token')
//4.判断：如果没有token值，就跳转到登录页面；反之就跳出守卫
if(!tokenStr)return next('/login')
next()
})
//beforeEach前置守卫：进入前进行检验
//to 将要访问的路径
//from 代表从哪个路径跳转过来
//next 是一个函数，表示放行
// 1.next() 放行 2.next('/login') 强制跳转到login
5.Vue ui 方式创建vue项目（初始化）
1.webstorm,项目终端输入：vue ui （回车两次即可输出网址）
2.复制网址打开--选择项目被建立的路径后--创建新项目--项目名--初始化仓库
（刚创建项目时会帮你初始化git仓库--框里填的是附加信息）
3.之后就是按照步骤一步一步
6.v-bind绑定变量开关实现宽度的判断改变
1.场景：当布尔开关为true时改变宽度为200px，当开关为false时改变宽度为60px
//写法
<el-aside :width="isCollapse ? '64px' :'200px' ">
7.子路由？
1.应用场景1：登录页面后进入home主页面，然后自动跳转到home的子页面welcome页面，展示出子页面的内容（子页面相当于将特定内容封装到子路由中）
2.配置流程：创建子组件--配置路由父子关系--配置重定向--设置子路由的占位符
3.具体代码：vue-shop项目里的3.10步s
8.template标签
9.插槽：匿名、具名、作用域插槽的理解
slot-scope与scope.row
基础插槽和深入理解vue中的slot与slot-scope与scope.row
作用域插槽的使用案例：vue_shop
1.要实现的效果：通过获取的用户列表数据中的mg_state=true这个布尔变量来控制一个状态按钮的开关显示。
2.需要的技术：template是什么？slot-scope的作用？scope.row是什么？element里的按钮开关组件el-switch？双向绑定v-model？
3.流程：template元素使用作用域插槽获取到数据--使用{{scope.row}}展示数据到表格栏方便观看数据--在template中加入按钮组件，双向绑定scope.row.mg_state这个布尔值
4.按钮组件：内置的点击事件：点击按钮会改变布尔值取反，控制按钮样式的显示
5.实现的本质：通过作用于插槽获取数据，按钮组件相当于子组件，template相等于父组件，父组件获取数据后，子组件通过作用域插槽能够使用到父组件的mg_state这个布尔值来控制自己的开关显示，同时由于双向绑定也能改变父组件的这个布尔值
//代码实现：
<el-table-column label="状态" prop="mg_state">
<!--作用域插槽+templat不会渲染的节点元素-->
<template slot-scope="scope">
<!--显示作用域的数据，用于查看{{scope.row}}-->
<!--按钮：双向绑定了数据的布尔值mg_state-->
<el-switch v-model="scope.row.mg_state"></el-switch>
</template>
</el-table-column>
