Vue学习笔记-Vue是当下最好用的前端开发框架（持续更新中）

       

目录

认识命令  

页面组成

组件导入导出

Vue实例代码组成

各种工具的综合运用

Validate（参数）  

发请求 this.$http

Vue整体导入资源的配置文件 是 mian.js。

---

       个人认为， 整体来看，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

(持续更新中)