zoukankan      html  css  js  c++  java
  • 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){})

      

  • 相关阅读:
    RxJava简要分析
    okHttp3源码简要分析
    Android 内存优化浅析
    用暴走漫画写使用手册
    简单的JavaScript互斥锁
    为jQuery添加Webkit的触摸方法支持
    去年做了什么?OA。
    简单地总结下双十一对“老婆”的评价
    麦当劳送薯条活动坑薯条设想,实践被失败
    用.NET MVC实现长轮询,与jQuery.AJAX即时双向通信
  • 原文地址:https://www.cnblogs.com/wuchenggong/p/9642503.html
Copyright © 2011-2022 走看看