目录
个人认为, 整体来看,Vue其实是把 一个 巨大的未命名json { data () {}, created () {},...} 然后 data 和 created里面又是 一个个函数 函数返回的 一般都是json ,在笔者看来,这是VUE作为前端框架的一个非常牛逼的功能,组件化开发让所有的页面都变得组件化了,他把一个个页面这样 通过导入组件和导出组件,之后把所有页面导出成包,用webpack打包部署,实际上 浏览器能解析这样的“组件”,然后通过渲染数据最终展现成我们看到的样子。以前的页面比如一个增加或修改的页面是一个html,然后我们通过后台传值的方法将数据渲染到html,现在Vue是把添加和修改页面做成一个单个vue组件,通过点击事件触发,如果传了实体id他就是修改页面,就会从后台搜到这个id的数据通过v-bind 渲染到列表。这种方式更加的简单方便。以前使用组件需要用<script>便签导入,现在变成了import { *** } from *** 简单了不少。以前初始化方式是Jquery的$({}) ,现在只需要在methods里面定义。
下面是我做的关于Vue的学习笔记,其中简化了一些简单内容,废话不多,如果要学习可以直接看Vue文档,本文是建立在懂一定的Vue基础上进行的总结。
认识命令
v-model v-if v-on v-click v-bind 自行学习
页面组成
一个页面有 <template> 标签 js代码(核心) 和 style样式组成
组件导入导出
导入组件 import {**} from ‘@src下目录’
导出组件 export default
使用组件 ** 或传参
Vue实例代码组成
data : 绑定数据 双向绑定 一处改变 其他都改变 双向绑定变量
created 页面加载后执行的函数 相当于以前的$(function(){})
methods 一个个函数 相当于以前的一个个 function
核心处理的部分: data 部分和 methods部分
Data里面的数据 和v- model 绑定的数据一致 一般为空 如果不写的话 为空 一般为输入数据做准备
各种工具的综合运用
readonly $el: HTMLElement; // 声明el的标签 供 Vue实例使用
readonly $options: ComponentOptions<Vue>;
readonly $parent: Vue;
readonly $root: Vue;
readonly $children: Vue[];
readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[] }; //选中v-bind绑定的数据
readonly $slots: { [key: string]: VNode[] }; //槽
readonly $scopedSlots: { [key: string]: ScopedSlot };
readonly $isServer: boolean;
readonly $data: Record<string, any>;
readonly $props: Record<string, any>; //属性
readonly $ssrContext: any;
readonly $vnode: VNode;
readonly $attrs: Record<string, string>;
readonly $listeners: Record<string, Function | Function[]>;
Validate(参数)
意思是 表单这样绑定数据后 :model="dataForm" :rules="dataRule" 会和客户输入的值进行校验 检验规则声明在 data中 如果校验通过 返回的就是 true
发请求 this.$http
实际上出自
// 挂载全局
Vue.prototype.$http = httpRequest // ajax请求方法
Vue.prototype.isAuth = isAuth // 权限方法
Vue.prototype.PubSub = PubSub //组件发布订阅消息
this.$http.adornUrl 异步请求路径
this.$http.adornData 异步删除操作
this.$http.adornParams 异步添加json参数
this.$nextTick() 确保dom更新后渲染数据
this.$emit('refreshDataList') 从子组件往父组件传值 这个传的是一个方法
this.$refs['dataForm'] 选中 元素中ref="dataForm"的元素
$http 处理返回函数
.then(({data}) => { // 处理返回的data数据 并解构
if (data && data.code === 0) {
this.$cookie.set('token', data.token) // 设置从后端返回的token 到 cookie 中
this.$router.replace({ name: 'home' }) // 相当于跳转或者重定向
} else {
this.getCaptcha() // 密码错误 加载methods里面验证码方法
this.$message.error(data.msg) // 提示错误信息
}
Vue整体导入资源的配置文件 是 mian.js。
删除操作的方式更加简单 只需要用 this.$http 的方式进行传值然后一步完成行id选择判断确认操作。 至于查询就更加简单方便了,触发函数后用$http进行操作传入url和params就可以传给后台。然后解析返回数据json将totle和list分别传给<el-table>的data即可。增删改查的步骤很是方便和简单。接下来看的是其他更为复杂的操作。
上传文件的操作:
<el-upload> 标签 ,依然要写上 multiple,写上上传的路径url。上传前:before-upload可以检查是否是正确的文件,上传后用:on-success 执行提交,得到的返回结果如果上传成功,执行其他的操作,刷新列表等。
//导出 略
弹框
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
类似的还有下面这些 都是Vue声明的能在全局使用的
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message
关键的分页工具
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
每一个页面主要分成了dataForm 和dataList。还有一个全局的data 全局data return了两者,可以简单理解为全局的data封装了他们两个值 然后export出去。同样export的还有components activated methods 与data是平级的,所以可以用里面对应的函数方法
Vue配置端口的文件夹
/conf/index.js
(持续更新中)