python全栈开发day92-day96 Vue总结
-- ES6常用语法 -- var let const -- 模板字符串 -- 反引号 -- ${} -- 箭头函数 -- 普通函数取决于函数最近的调用者 -- 箭头函数取决当前环境 -- 类 -- class定义类 -- constructor -- extends super() -- 数据的解构 -- Vue的常用指令 -- v-for -- v-if -- v-show -- v-bind -- v-on -- v-model -- v-text -- v-html -- 指令的修饰符 -- .number -- .lazy -- .trim -- 自定义指令 -- Vue.directive("指令名称", function(el, bindding)) -- el绑定指令的元素 -- bindding放指令相关所有信息的对象 -- bindding.value 指令的值 -- bindding.modifiers 指令修饰符 -- 获取DOM -- 给标签元素绑定ref属性 -- this.$refs.属性值 -- 计算属性 -- computed -- 放入缓存 -- 只有数据改变的时候才会重新计算 -- 组件 -- 全局注册 -- Vue.component("组件的名称",{}) -- 所有的vue实例对象都可以用 -- 局部注册 -- 注册到Vue实例对象里 -- 注册到哪个实例 哪个实例可以用 -- 子组件注册 -- 注册到父组件里 components -- 父子组件通信 -- 在父组件中给子组件绑定属性<child :xxx="~~~"></child> -- 子组件props:["xxx"] -- 子父组件通信 -- 子组件要提交事件 this.$emit("事件名称", data) -- 在父组件中给子组件绑定事件<child @xxx="~~~"></child> -- 非父子组件通信 -- 中间调度器 let event = new Vue() -- 其中一个组件 event.$emit("事件名称", data) -- 另一个组件mounted中 event.$on("事件名称",function(data){}) -- 混合 -- 代码封装 -- mixins: ["xxx"] -- 插槽 -- 给我们组件做内容分发 -- 路由 -- 路由的注册 -- 定义路由规则对象 每个路由对应的组件 -- let routes = [ { path:"/", component: {} } ] -- 实例化VueRouter对象并且把路由规则对象注册到里面 -- let router = new VueRouter({ routes: routes }) -- 把VueRouter实例化对象注册到Vue实例对象里 -- const app = new Vue({ el: "#app", router: router }) -- 在<div id="app"></div>里 -- router-link -- router-view -- 参数 -- this.$route.params.xxx -- /user/:xxx -- this.$route.query.xxx -- /user/:xxx?age=1 -- 命名 -- 给路由添加name属性 -- :to="{name:'xxx',params:{},query:{}}" -- 路由视图的命名 -- 我们路由可以对应多个组件 -- router-view 有name属性 值是我们组件名称 -- 子路由 -- children:[] -- 在父路由对应的组件里写router-link 以及router-view -- 手动路由 -- this.$router.push("路由") -- $route以及$router区别 -- $route 当前路由的所有信息 path fullpath meta params query -- $router 是VueRouter对象 -- 路由的钩子函数 -- router.beforeEach(function(to, from, next){}) -- to 你要去哪 -- from 你从哪里来 -- next 方法 -- 必须执行 -- 路由正常跳转 next() -- 跳转到指定路由 next("path") -- router.afterEach(function(to, from){}) -- 生命周期 -- 监听 -- 字符串 -- 数组 -- 改变数组里的值是监听不到的 -- 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 } }
-- actions 异步提交 this.$store.dispatch("add", 100)
actions: {
add: function (context,value) {
setInterval(function(){context.commit('asyncnumchange', value)}, 3000)
}
},
-- ajax 发送请求 -- $.ajax({ url: ''', type: xxxx, ...., success: function(){}, error: function(){} }) -- url 接口 -- axios -- this.$axios.request({ url: "接口", method: "get", data: }).then(function(data){}) .catch(function(data){})