webpack 全局安装webpack插件npm install webpack -g vue-cli 全局安装脚手架插件npm install -g @vue/cli-init 项目初始化 新建一个vue-cli-learn目录,在该目录下执行vue init webpack vue-cli-learn 然后回选择一系列配置,例如是否使用vue-router路由,是否使用ESLint,使用npm还是yarn作为包管理工具等,根据自己需要选择即可 vue脚手架项目初始化 程序人生
vue2 官方文档地址--介绍 — Vue.js (vuejs.org) 开发插件 开发在浏览器调试,浏览器界面很不友好,下载一个google浏览器插件,优化调试界面,通过点击下面的链接跳转,可以直接在对应的浏览器插件扩展管理安装,安装后记得启用插件,调试的时候会用到本地文件,要在插件管理里面开启允许访问文件URL vue-devtools安装教程 不同给浏览器得插件设置可以参考不同浏览器插件设置 也可以在git自己下载编译 github项目地址 使用效果如下 安装 新建目录,执行 npm init -y 执行 npm install vue@2.7.14安装 新建index.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1> {{userName}},你好 </h.... 有更新! vue学习笔记 程序人生
概念 ECMAScript是浏览器脚本语言的规范,Java script是规范的具体实现。 参考:1.1 ES6 教程 | 菜鸟教程 (runoob.com) 变量 let和var let 是在代码块内有效,var 是在全局范围内有效,下述代码打印时,会提示 a is not defined <script> { let a = 1; var b = 2; } console.log(a) console.log(b) </script> let声明的变量不能重复定义,var可以,下属代码运行提示 Identifier 'a' has already been declared <script> { let a = 1; let a = 1; var b = 2; var b = 3; } console.log(a) console.log(b) </script> var 存在变量提升,let不存在变量提升,下述代码,b打印结果为undefined,a打印提示 caught ReferenceError: Cannot acces.... 有更新! ES6学习笔记 程序人生
1、父组件向子组件传递参数 父组件向子组件传递参数,通过props处理,属性是驼峰命名 props属性的类型有多个,常用的有下面几个[String,Number,Boolean,Array,Object,Function,Promise]等 如果传递的参数类型是Object,那么在父组件中修改这个Object的属性,子组件中也会跟着修改; eg: 子组件定义(名称ContractFileAttachment): props: { contractId: { type: String, required: true } } 父组件传递: <ContractFileAttachment :contract-id="currentContractId" /> 2、子组件调用父组件方法 子组件使用$emit调用父组件定义的方法 eg: 父组件定义一个方法,并且在父组件中引入子组件的时候,用@声明调用 <AddForm :level-array="levelArr" :state-array="stateArr" @addSuccess="addSuccess" @clo.... 有更新! VUE父子组件通信 程序人生
1.标签设置 添加标签template,slot-scope设置为scope,slot设置为menu 内部就可以添加按钮和自己想要的属性了 <avue-crud ref="thresholdSetTable" :data="pageData" :option="option" :page.sync="page" @selection-change="selectionChange" @size-change="sizeChange" @current-change="currentChange" @search-change="searchChange" @search-reset="searchReset" > <template slot="search"> <el-form-item label="指标名称"> <el-input v-model="searchForm.indexName" placeholder="请输入指标名称" size="small" /> </el-form-item> </templa.... 有更新! avue.js表格添加行内操作按钮 程序人生
1.创建表格,添加搜索条件 <avue-crud ref="indexDistributionTable" :data="pageData" :option="option" :page.sync="page" @selection-change="selectionChange" @size-change="sizeChange" @current-change="currentChange" @search-change="searchChange" @search-reset="searchReset" > <template slot="search"> <el-form-item label="指标名称"> <el-input v-model="searchForm.indexName" placeholder="请输入指标名称" size="small" /> </el-form-item> </template> </avue-crud 表格的其他属性此前已经有对应的文章了(avue.js表格.... 有更新! avue.js表格添加搜索条件 程序人生