路由。
根据后端理解路由
单页面就是打包之后只有一个页面。
------------------------------------------------------------------------------01-------------------------------------------------------------------------------------
探究下路由为什么可以生效?
第一步:
第二步:
第三步:
路由实验代码:
安装脚手架:
# 全局安装 vue‐cli
npm install ‐g vue‐cli 这个脚手架带路由的功能
# 创建一个基于 webpack 模板的新项目
vue init webpack vue‐router‐demo
# 安装依赖,走你
cd vue‐router‐demo
npm run dev
注意这个是怎么写的
表示当前的vue工程要使用路由,就是一个开关。这里面是路由的底座。
整个页面。
注意这个:显示什么取决于路由地址
<router-view/>
main.js是总的入口。在这里使用的路由器。
带路由的vue。
项目的由来:
第一步:首先定义路由,就是默认的界面
第二步:将这个默认界面的路由插入到路由的底座
---------------------------------------------------------------02----------------------------------------------------------------------------------------------
关键知识点:
-------------------------------------------------------------------------03----------------------------------------------------------------------------------------
动态路由:
接受的参数: {{ $route.params.id }}
注意一点引用全局的变量用$。
-----
目前还没有子路由,直接在主路由的底座上面的。
这个底座指允许一个路由的界面插入禁区。
-------------------------------------------------------------------------------04--------------------------------------------------------------------------------------
嵌套路由,子路由。
第一步:写关于的子路由。
{
path: '/about',
name: 'About',
component: About,
children: [
{ path: 'address', component: Address },
{ path: 'linkman', component: Linkman }
]
}
就是路由视图在跳转的一个路由但是原先的路由页面不消失。
第二步:写自己的底座。
注意这个底座要是不写的话点击是没有反应的。上面那个是错的。
-------------------------------------------------------------------------05-------------------------------------------------------------------------------------
十次方的路由的代码
index.js是默认的所以不用写
true不会在主界面的菜单出现
注意在哪里生效的:
-----------------------------------------------------------------------06-----------------------------------------------------------------------------------
代码生成器,挂菜单
-------------------------------------------------------07--------------------------------------------------------------------------------------------
mock
-------------------------------------------------------------------08-------------------------------------------------------------------------------------
这个是直接自己拷贝的。
企业管理的 编辑 复合输入框
------------------------------------------------------------09------------------------------------------
图片上传:用的是框架UI的上传组件。
带格式校验的。
第一步:
<el-form-item label="LOGO">
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"//上传成功自动调用的钩子函数
:before-upload="beforeAvatarUpload">//上传之前调用的函数
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
第二步:
这个要在data中自己定义。
第三步:
至于存的什么没有讲。
-------------------------------------------------------------------------10-------------------------------------------------------------------------
单选按钮和可搜索得下拉框
----------------------------11------------------------------------------
课搜索得下拉框
----------------------------12------------------------------------------
文章管理:代码生成。
频道 文章 专栏管理
-------------------------------------------------------------------------13---------------------------------------------------------------------------------
mock数据。
-----------------------------------------------------------------------14--------------------------------------------------------------------------------------
频道管理。专栏审核:
-------------------------------------------------------------------15----------------------------------------------------------------------------------------------
文章审核,注意富文本编辑器。
如何写富文本编辑器?
富文本:
v-html=......
----------------------------------------------------------------16---------------------------------------------------------------------------------
写逻辑。
审核完成。
---------------------------------------------------------------------17---------------------------------------------------------------------------
VueX是很重要的。
记住登陆的状态。
看下登陆:
登陆成功保存登陆状态,名称,头像等信息。
------------------------------------------------------18----------vuex----------------------------------------------------------------------------------------------
建工程:
看到依赖。
我们要安装vuex:
安装vuex。
安装结束:
-----------------------------------------------------------19----------vuex----------------------------------------------------------------------------------
在src下创建文件夹:
定义一个仓库。
读取状态。
打开vuex状态管理的开关。
注意怎么写的:
Vue.use......打开状态管理的开关。
第一步:定义一个常量,创建store,实例有个属性为state。导出store。
第二步,main.js使用:
这里的用$引用。
第三步:在页面取读取状态。
注意这个必须是state。
------------------------------------------------------20----------vuex-------------------------------------------------------------------------------------------
改变状态:
第一步:定义mutations,理解为对一堆的方法。里面的方法要有一个参数。修改状态的入口。1是随便定义的,2是写死的。
第二步:commit。都是固定的。
---------------------21----------vuex-------------------------------------
状态的共享:状态在很多有页面共享,读取store的值。
第一步:
--------------------------------------------------------22----------vuex---------共享-------------------------------------------------------------
提交载荷:就是传入额外的参数而已。
第1步:
第2步:
----------------------------------------------------------23----------vuex------------------------------------------------------------------------------------
action:
第一步:定义action。
为什么使用action是因为mutations是不允许使用异步操作的。
注意上图的第二个increment是自己定义的,可以随便换,context与state有系统的状态。
第二步:使用dispatch方法,来调用我们的action。
action:可以在2进行异步的操作。
我的例子:
---------------------24----------vuex-------------------------------------
派生属性getters:
第一步:
第二步:
----------
我的代码:
------------------------------------------------------------------25-------------------------------------------------------
附加:模块化的东西。注意开发时候要模块化。
具体如何使用看文档。
-------------------------------------
登陆:看文档。