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){})