vscode安装
https://blog.youkuaiyun.com/qq_25744257/article/details/125273656
ES6
- ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准,开发大型应用
- ES6是规范，JavaScript是实现
1
- 打开VSCode—打开文件夹—新建es6文件夹—新建文件1、let.html—shift+!+Enter生成模板。填入下面内容后，右键open with live server
2.1 let声明变量 ***
- var 声明的变量没有局部作用域,let 有局部作用域
- var 可以声明多次, let 只能声明一次
2.2 const声明常量（只读变量）
- 不能改变
- const n = 10;
2.3 解构赋值
- 对数组或者对象进行模式匹配,(将对象或数组赋值给单个变量)
- let [x, y, z] = [1, 2, 3]
- let user = {name: 'Helen', age: 18}
- let { name, age } = user === (name=user.name)
字符串扩展
- startsWith,endsWith,includes，
- 反引号``括起多行字符串
模板字符串
- 占位符功能 ${变量名}
- ( 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式)
- ( let info = `My name is ${name} ,I am ${age+1}` )
函数优化
- 默认值 add2(a = 1)
- 不定参数 fun(...values) {}
- 箭头函数(lambda表达式),(a) => {}
对象优化
- 获取对象的键值对 Object.keys()、values、entries
- 合并对象 Object.assgn(target,source1,source2)
- 定义对象 const user1 = {name,age} (name,age是变量名)
- 拷贝对象 let user2= { …user1}
- 合并对象 let user3= { ...user1, ...user2}
2.7箭头函数
- 箭头函数提供了一种更加简洁的函数书写方式。基本语法是：
- 参数 => 函数体
- var f1 = function(a) {return a} //传统
- var f2 = a => a //es6
- var f2 = (m,n) => m+n //es6
map和reduce方法
- map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
- arr = arr.map(item=> item*2);
- reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
- let result = arr.reduce((a,b)=>{ return a + b; },100); (100+数组所有元素返回合计)
Promise
- 把Ajax封装到Promise中，赋值给let p
- 在Ajax中成功使用resolve(data)，失败使用reject(err)
- then和catch 成功 或者失败
模块化
- 模块化就是把代码进行拆分，方便重复利用。类似于java中的导包，而JS换了个概念，是导模块。
模块功能主要有两个命令构成 export 和import
- export用于规定模块的对外接口
- import用于导入其他模块提供的功能
三、Vue
MVVM思想
- M：model 包括数据和一些基本操作
- V：view 视图，页面渲染结果
- VM：View-model，模型与视图间的双向操作（无需开发人员干涉）
核心
- 视图和数据通过VM绑定起来，model里有变化会自动地通过Directives填写到视view中，视图表单中添加了内容也会自动地通过DOMListeners保存到模型中
- 双向绑定,模型变化，视图变化。反之亦然
下载安装：
- 下载vue.min.js用 <script> 标签引入
npm安装
- npm init -y初始化项目，生成package.json文件，说明是npm管理的项目
- npm install vue@2，安装后在项目node_modules里既有vue
步骤
- 创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板
Vue
- el绑定dom元素
- data封装数据
- methods封装方法
- computed 计算属性
- watch 监控属性
- filters 过滤器
- components,声明组件
指令
插值表达式,双向绑定
- 花括号:{表达式},只能写在标签内（<>这里</>）
- 插值闪烁，网速较慢时会显示原始花括号
指令
- v-text输出纯文本,v-html渲染html输出
v-bind:,单向绑定,模型改变->视图改变
- <div v-bind:style="msg">单向绑定</div>
- <div :style="msg">单向绑定</div> v-bind:缩写为冒号:
v-model,双向绑定
- 用于表单项(input)，自定义组件
- <input type="checkbox" v-model="language" value="Java">
v-on 事件
- v-on:click 点击事件，缩写为@click
- @keyup.up,@keyup.down按键修饰符
v-for 基于数组渲染列表
- <div v-for="user in userList"> {{user.name}} -- {{user.age}} </div>
v-if(标签消失) v-show(display:none) 条件渲染
- <div v-if="ok">选中了</div>
computed 计算属性
- {{totalPrice}}
- computed: { totalPrice(){return this.xyjPrice*this.xyjNum}
watch 监控属性
- <input type="number" v-model="xyjNum"> </li>
- watch{xyjNum(newVal,oldVal){}}
filters 过滤器
- {{user.gender | genderFilter}}
- filters: {genderFilter(val) {}
component 声明组件
- counter:{template:"<button>" ,data:{count:1}}
- <counter>
全局和局部声明
- Vue.component 全局声明
- new Vue({ component}) 局部声明
生命周期
- beforeCreate 创建之前
- beforeMount 挂载数据之前
- beforeUpdate 数据改变之前
- Updated 数据改变之后
- beforeDestroy 销毁之前
- Destroy 销毁完成
- activated 页面激活触发
axios
- 引入axios.min.js
- axios.get("user.json") //请求路径
- .then(response => {})//请求成功
- .catch(response => {})//请求失败
vue模块化开发
概念
- node.js，JavaScript运行环境
- npm，Node.js包管理工具
- Webpack 是一个前端资源加载/打包工具
步骤
- 全局安装webpack， npm install webpack -g
- 全局安装vue脚手架，npm install -g vue , npm install -g @vue/cli-init
- 初始化vue项目 (vue脚手架使用webpack,初始化一个appname项目 ) vue init webpack vue_demo
- 启动项目 npm start = npm run dev
- 打包项目 npm run build
'vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件
- npm install -g vue
- npm install -g @vue/cli
- npm config list,
- 环境变量加入vue.md
初始化，安装插件
- npm init -y #初始化
- npm install jquery@2.1.x # 安装jquery
- npm install # 根据package.json安装所有依赖
Vue目录
- build,构建相关
- config,配置相关，端口号等
- src, 开发目录
- static,静态资源
- index.html 首页入口
- package.json 项目依赖
src开发目录
- main.js 项目的核心文件,(new Vue绑定dom元素，定义路由，组件，模板)
- App.vue: 项目入口文件
单文件组件，.Vue文件
- 三要素，template，script，style
访问顺序
- index.html div的id为app
- main.js (绑定id为app的dom元素),(定义路由，组件，模板),引入App.Vue
- main.js 模板使用App.Vue,
- App.Vue 定义路由视图 <router-view/>
- router/index.js 定义路由规则
Vue使用(自定义)组件(.vue文件)
- 导入组件 import Hello from
- 定义组件 component: Hello
- 使用组件 <Hello>
routes
- path 路由
- name 名字
- component 组件
Router 组件可通过路由访问
- 创建组件Hello.vue
- router/index.js 导入组件 import Hello from '@/components/Hello'
- router/index.js 添加路由规则(访问Hello,访问组件Hello)path: '/Hello',component: Hello
<router-view/> 根据路径访问对应组件
router-link
- 点击访问对应组件
- <router-link to="/Hello">去Hello</router-link>
element
安装， i为install 简写
- npm i element-ui -S
在 main.js 中写入以下内容：
-
import ElementUI from 'element-ui'
-
import 'element-ui/lib/theme-chalk/index.css';
-
Vue.use(ElementUI);
单选框radio
- <el-radio v-model="radio" label="1">备选项</el-radio>
- data{radio:'1'}
- v-model 双向绑定，label为value
容器组件
- <el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，所有子元素会纵向排列，否则会水平左右排列。
- <el-header>：顶栏容器。
- <el-aside>：侧边栏容器。
- <el-main>：主要区域容器。
- <el-footer>：底栏容器。
el-table
- :data 绑定数组
- prop 绑定属性
el-menu 实现导航栏功能
- router="true"
- index="/Mytable"
vue模板代码
使用VsCode点击文件->首选项->用户代码片段->新建代码片段
https://blog.youkuaiyun.com/qq_25744257/article/details/127552446
人人开发目录结构
- src\views 视图
- src\views\modules 模块
URL对应关系
- URL(product/category) 对应 \src\views\modules\product\category.vue
- URL(product/category) 显示为 product-category
api请求路径
- static\config\index.js”的window.SITE_CONFIG['baseUrl'] 定义基准路径
发送请求
- this.$http({ url: url, method: "get",}).then(()=>{});
element元素
- el-tree 树形结构
- MessageBox 弹框 弹出确认按钮
- Dialog 对话框 弹出新增页面
- el-upload 上传
- el-table 表格 用于列表显示
- el-image 图片
- Cascader级联选择器 (空集合导致显示空的选项)
el-tree 树形结构
- :data 绑定数据
- props:{label 显示属性 children 子树属性}
- expand-on-click-node 展开收缩
- show-checkbox 复选框
- node-key 唯一标识
- default-expanded-keys 默认展开
- draggable 可拖拽
自定义节点内容 scoped slot
- <span class="custom-tree-node" slot-scope="{ node, data }">
- node, data ， 当前节点 Node 对象和 数据。
MessageBox 弹框
- 模态对话框组件，用于消息提示、确认消息和提交内容。
- this.$confirm(`确定要删除?`, "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {}).catch(() => {});
Dialog 对话框
- visible属性为true时显示 Dialog，否则关闭
- @close 关闭事件
el-form 表单
- model 绑定表单数据
- v-model 绑定表单数据属性
- rules 规定校验规则
- active-value,inactive-value。动态绑定复选框的值
el_tree新增修改实现
- category 绑定当前分类
- edit 通过id查询分类数据，赋值给category
- category 绑定当前分类表单数据，保存时作为提交数据
- dialogType 区分 edit,add
template 自定义列模板
- slot-scope="scope" 作为插糟
- scope.row.id 获取id
this.$nextTick 完全渲染后调用下一个
this.$refs. 当前页面的所有组件
el_table 新增修改实现
- 引入 add-or-update 组件
- addOrUpdateVisible 控制是否显示 v-if="addOrUpdateVisible"
- add方法，addOrUpdateVisible=true, 显示组件
- add方法，调用add-or-update 组件的init ，初始化数据
1
- 导入所有组件 src->element-ui->index.js ->import
- 事件 click,点击 ,close,关闭
更新 的部分字段
- 使用 解构赋值能够实现只更新需要更新的部分字段
VsCode快捷键
- 格式化文档（整理当前视图中的全部代码），[Shift] + [Alt] + [F]；
switch 开关
- 绑定v-model到一个Boolean类型的变量
- ative-value="1" 激活为1
el-image 图片
- src 路径
引入 element-ui 组件
- element-ui/js 中import { } from ' element-ui'
form 表单验证
- 通过rules属性传入约定的验证规则
- 属性名:[校验规则1，校验规则2]
实现左边菜单，右边表格
- el-row,el-col(菜单),el-col(表格)
el-cascader 级联选择器
- props(value label children) 定义显示字符串，值
提交表单关闭表单刷新列表
- 列表页监听事件，@refreshDataList="getDataList"
- 表单页面发送事件 this.$emit("refreshDataList");
- 刷新列表 getDataList
新增清空数据
- el-dialog @close 关闭事件，清空数据
参考
谷粒商城-个人笔记(基础篇一)_代码的知行者的博客-优快云博客_谷粒商城
https://blog.youkuaiyun.com/qq_25744257/article/details/125647955
https://blog.youkuaiyun.com/qq_25744257/article/details/125229071
扫一扫
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
