少年不识愁滋味,爱上层楼。爱上层楼。为赋新词强说愁。
而今识尽愁滋味,欲说还休。欲说还休。却道天凉好个秋。
一、ES6常用语法
-- 变量定义
-- 模板字符串
-- 类
-- 函数
-- 数据的解构
二、vue的常用指令
-- v-text
-- v-html
-- v-for
-- v-if
-- v-show
-- v-on
-- v-model
-- v-bind
-- 自定义指令
-- 计算属性
-- 获取DOM
-- 指令修饰符
三、组件
-- 注册
-- 全局 局部 子组件
-- 通信
-- 父子 子父 非父子
-- 混合
-- mixins
-- 插槽
-- slot
四、路由
-- 注册
-- let routes= [{}.{}]
-- 把routes注册到VueRouter对象中
-- 把VueRouter对象注册到Vue实例对象中
-- router-link
-- router-view
-- 路由的参数
-- params, query
-- 命名路由
-- name
-- 命名路由视图
-- 子路由
-- 手动路由
-- 钩子函数
-- $route $router 区别
五、生命周期
-- 监听
-- 字符串
-- 数组
-- 改变数组里的值是监听不到的
-- app.$set(app.xxx, index, value)
-- 对象
-- app.$set(app.xxx, key, value)
-- watch ==> deep: true
-- beforeCreate
-- created
-- beforeMount
-- mounted
-- beforeUpdate
-- updated
-- beforeDestroy
-- destroyed
六、npm 包管理工具 node.js
-- npm install xxx@0.0.0(latest) pm i
-- npm uninstall xxx
-- npm i npm@latest -g
-- npm update xxx
-- 项目管理
-- 切换到工作目录下
-- npm init -y
七、webpack 打包上线
-- 入口文件
-- 出口文件
-- webpack 4
-- webpack 不独立存在
-- npm i webpack webpack-cli
-- 手动创建src目录
-- index.js 默认入口文件
-- 打包后自动生成 dist目录
-- 放出口文件
-- webpack mode development/p...
八、vue-cli
-- 下载vue-cli
-- npm install vue-cli -g
-- vue-cli@2.9.7
-- 借助vue-cli帮助我们创建项目
-- vue init webpack xxxx
-- cd xxxx
-- npm run dev
-- npm run dev
-- 没有node_moudels文件夹
-- 切换到项目目录下
-- npm install
-- npm run build
-- npm run dev
-- xxxxx ... json .....
-- npm cache clean --force
-- 执行接下来的操作
-- 没有package.json
-- 没有切换到项目目录下
九、vuex 天花板
-- 下载
-- npm i vuex
-- 导入vuex
-- import vuex from "vuex"
-- Vue.use(vuex)
-- new vuex.Store({
state: {
show: false,
}
});
-- Store 仓库
-- state放数据的
-- state 存放数据的
-- this.$store.state.xxx
-- getters 给state数据进行处理
-- this.$store.getters.xxxx
-- mutations 修改state中的数据
-- 组件提交给仓库事件 (打报告)
-- this.$store.commit("事件名称", data)
-- mutations: {
"事件名称": function(state, data){
state.xxx = data
}
}
十、ajax 和 axios 发送请求
-- $.ajax({
url: ''',
type: xxxx,
....,
success: function(){},
error: function(){}
})
-- url 接口
-- axios
-- this.$axios.request({
url: "接口",
method: "get",
data:
}).then(function(data){})
.catch(function(data){})
十一、MVC MTV模式
-- Model View Control
-- Model Template View
-- 解耦
-- 前端
-- 静态页面 模板工程师
-- 动态页面 js出现了
-- ajax技术 局部刷新
-- 前端借鉴后端MVC思想 MVVM前端框架思想
-- MVVM
-- Model View ViewModel
-- 数据驱动视图
-- 前后端分离
-- 移动端
-- app
-- 前端 后端
-- pc
-- 前端 后端
-- 前端一套 后端一套 前后端分离
-- 前端vue
-- 后端Python django