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