python全栈开发day92-day96 Vue总结

时间:2023-03-09 08:48:58
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){})