vue

 

 

 推荐博客:https://www.cnblogs.com/GGGG-XXXX/articles/9467297.html

 

	HTML  超文本标记语言  框架
	css   层叠样式表      样式渲染
	js    脚本语言        交互

	Bootstrap    css js封装
	Jquery 		对js进行封装
	
	ES6的常用语法
		-- 变量(变量的提升)
			-- var
			-- let 块级作用域 {}
			-- const 常量 不可修改
		-- 模板字符串
			-- 反引号``
			-- 变量 ${}
		-- 函数
			-- 普通函数this取决于函数最近的调用者
			-- 箭头函数this取决当前上下文环境
		-- 数据的解构
			-- let [name1, name2, name3] = array;
			-- let {name, age} = obj;
			-- 注意语法
		-- 类
			-- class定义类
			-- extends 继承
			-- constructor 构造方法
			-- 子类想要有this 在构造方法里执行super()
	Vue的常用指令
		-- v-text v-html  innerText  innerHTML
		-- v-for
		-- v-if v-else-if v-else  appendChild
		-- v-show  display
		-- v-bind  :
			v-bind指令用于设置HTML属性：v-bind:href  缩写为 :href
		-- v-on   @
			v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click
		-- v-model
			-- input
			-- textarea
			-- select
		-- 指令修饰符
			-- .number
			-- .lazy
			-- .trim
		--自定义指令
			-- Vue.directive("指令名称", function(el, binding){
					el是绑定指令的标签元素
					binding指令的信息
						value 指令的值
						指令修饰符
			})
		-- 计算属性
			-- 放入内存 
			-- 数据改变的时候才会进行重新计算
		指令后要么接数据要么接方法
		
		-- 获取DOM
			-- 给标签绑定ref= "xxx"
			-- this.$refs.xxx
	组件  *****
		-- 组件的注册
		-- 全局注册
			-- Vue.component("组件的名称", {
				template: ``,
				data(){
					return {
						xxx:xx
					}
				}
			})
		-- 局部注册
			-- let my_com = {
				tempalte: ``,
				data(){
					return{
						xxx: xxx
					}
				},
				methods: {}
			}
			-- new Vue({
				el: "#app",
				components: {
					my_com: my_com
				}
			})
		-- 子组件注册
			let child = {
		        template: `<div><h2>这是子组件</h2></div>`,
		    };
		    let father = {
		        template: `<div>
		                    <h1>这是父组件</h1>
		                    <child></child>
		                    </div>`,
		        components: {
		            child: child
		        }
		    };

		    const app = new Vue({
		        el: "#app",
		        components: {
		            

		        }
		    })
    -- 通信
    	-- 父子通信
    		-- 在父组件给子组件绑定属性 <child :money="num"></child>
    		-- 子组件通过   props: ["money"]

    	-- 子父通信
    		-- 子组件提交事件 this.$emit("事件的名称"，参数)
    		-- 父组件中给子组件绑定事件  <child @son_say="my_son_say"></child>
    	-- 非父子通信
    		-- 定义中间调度器
				-- let Event = new Vue()
			-- 其中一个组件要向中间调度器提交事件
				-- Event.$emit("事件名称"，要传的数据)
			-- 另一个组件要监听调度器中的事件
				-- mounted(){
					Event.$on("事件名称", function(data){
							do something.....
					})
				}
    		-- 注意监听事件时候的this
    -- 混合
    	-- base = 把公共的代码抽出来
    	-- minxins = [base]
    -- 插槽
    	-- 为组件开发内容分发的接口
    	-- 通过slot做内容分发
	路由：
		注册
			-- 定义一个路由和组件的匹配规则对象组成的数组
			-- 实例化VueRouter对象
			-- 把实例化的VueRouter对象注册的APP里
			-- router-link
			-- router-view
			
			
			let routes = [
   				{
   					path: "/",
   					component: {}
   				}
   			]
   			let router = new VueRouter({
   				routes: routes
   			})
   			new Vue({
   				el: "#app",
   				router: router
   			})
   			-- 展示用 <router-link to="/">首页</router-link>
   			-- <router-view></router-view>
		子路由的注册
			-- children: [
					{
						path: "xxx",
						component: {
							template: ``
						}
					}
				]
			-- 在父路由里注册children: [{},{}]
   			-- 在父路由的template进行子路由的展示
		命名的路由
			-- 注意to要进行绑定 :to="{name: 'xx'}"
		路由的参数
			-- path: "/user/:name"
			-- this.$route
				-- 路由的所有信息
				-- fullpath
				-- path
				-- params
				-- query
				-- meta
			-- this.$router
				-- VueRouter 实例对象
   				-- 存放路由的方法
		命名的路由视图
			-- 一个路由对应多个组件
				-- components: {
					"组件的名称"：{
						template： 
					}
				}
			-- <router-view name="组件名称"></router-view>
		手动更新路由
			-- this.$router.push("/")
		路由的钩子函数
			-- router.beforeEach(function(to, from, next){
					to 你要去哪
					from 你从哪里来
					next 你接下来要干嘛
			})
			-- router.afterEach(function(to, from){
					to 你要去哪
					from 你从哪里来
			})  *****
	生命周期的钩子函数
		-- beforeCreate
		-- created
		-- beforeMount
		-- mounted
		-- beforeUpdate
		-- updated
		-- beforeDestroy
		-- destroyed
		-- 数据的监听
			-- watch: {
				要监听的数据： {
					handler: function(val, oldVal){
						字符串
						数组
						对象
					},
					deep: true
				}
			}

MVVM
M 数据层
V 视图层
VM View-Model 给视图提供处理好的数据
MVC
MTV

node 本地的js解析环境  npm
python 本地的python解析环境 pip

今日内容：
	-- npm
		-- 管理项目 npm init -y 
			-- 生成 package.json
		-- npm install xxx@x.x.x
		-- npm uninstall xxx
		
		npm init -y  (生成package.json文件)
		nmp i 根据package.json自动生成依赖的模块
	-- webpack （3 ，  4）
		-- 打包				
		-- 压缩代码
		-- 打包浏览器解析不了的js
		-- npm install webpack 
		-- npm install webpack-cli
		-- webpack4 手动创建入口文件 src目录下的index.js
		
		这里用的是4
		安装webpack	(npm i webpack webpack-cli),安装完后node_modules 里会出现很多包
		在项目目录下创建文件夹src,并在src下创建入口文件index.js(这里是单入口,可以配置多入口多出口详见博客)
		使用webpack -v查看版本是否安装成功,
		webpack --mode development在项目目录下打包文件, development 开发者模式 打包默认不压缩代码; production  生产者模式 上线时使用，压缩代码。 默认是这个模式
		打包成功后项目目录下会多一个dist目录,dist下面的main.js是默认的出口文件,main.js就是打包后的index.js及index.js引入的js文件,在dist目录下新建index.html文件,在html文件下引入main.js  <script src="./main.js"></script>,这时在浏览器中打开index.html文件就会有在src中写的js的操作了
		在package.json中"scripts":下添加命令,"bulid":"webpack --mode development",这样就可以使用npm run bulid来执行打包命令了,就不必每次都敲webpack --mode development了
	-- vue-cli(cli3)
		-- npm install -g @vue/cli   下的vue-cli3
		-- vue create 项目名称
		-- npm run serve
		
		全局安装npm install -g @vue/cli,使用vue -V查看vue-cli版本判断是否安装成功
		创建项目vue create luffy(项目名)   ,会让你选择一个js的语法解析规则,选择默认的就行,不推荐使用淘宝镜像
		项目目录(luffy文件夹)下会出现node_modules,public,src文件夹,src中的main.js是入口文件,cli帮我们下了vue暴露到全局下 import Vue from 'vue'
		luffy文件夹下会有一个package.json,这是vue-cli生成的,在package.json中的serve对应的命令是vue-cli-service serve,可以执行npm run serve来执行这条执行,这时可以在浏览器中打开127.0.0.0:8080页面显示vue的图片
		---node_models安装的包
		---public
		   ---index.html 唯一的页面单页面,有id为app的div盒子 <div id="app"></div>
		---src
		   ---asstes可以放图片等静态资源
		   ---components组件文件夹,所有的组件都放到这个文件夹下
		   ---App.vue 文件,总组件,这个组件包裹其他组件
		   ---main.js 入口文件通过h => h(App)箭头函数注册App.vue这个总组件;通过.$mount('#app')绑定作用域app
	
		下载路由包 		 npm install vue-router
		安装element-ui   npm i element-ui -S  
				按照element教程在main.js中填写
					import ElementUI from 'element-ui';
					import 'element-ui/lib/theme-chalk/index.css';
					Vue.use(ElementUI);
	
	
	-- vue-cli目录结构
		-- node_models
			-- npm下载的所有的包
		-- public
			-- index.html
			-- 图像
		-- src
			-- assets 静态资源
			-- components  组件
			-- APP.vue
			-- main.js  
	Vuex
		-- 集中式状态管理架构
		-- 配置
			-- npm install vuex 
			-- import vuex from "vuex"
			-- Vue.use(vuex)
			-- let store = new vuex.Store({
					state: {
						xxx: xxx
					},
					getters: {
						xxx: function(state, getters){
							return 处理后的数据
						}
					},
					mutations: {}
			})	
			-- const app = new Vue({
				el: "#app",
				store: store
			})
		-- 获取vuex中的数据
			-- this.$store.state.xxx
			-- this.$store.getters.xxx
		-- 更改vuex中的数据
			-- this.$store.commit("事件名称",data)
			-- mutations: {
				"事件名称": function(state, data){
						state.xxx = data
				}
			}
	Axios
		-- 配置
			-- npm install axios
			-- import axios from "axios"
			-- Vue.prototype.$axios = axios
		-- this.$axios.request({
			url: "api....",
			method: "get",
			data: {},
			params: {}
		}).then(function(data){
			注意this
		}).catch(function(data){

		})
		-- 跨域问题
	restful
		-- REST 表征性状态转移 （资源状态转移）
			-- 资源
			-- URI 统一资源标志符
			   URL 统一资源定位符
			-- 统一资源接口
				-- 对资源只开放一个接口
				-- 根据HTTP请求方式的不同对资源进行不同的操作
				-- 一定要遵循HTTP请求方式的语义
			-- 前后端传递的是资源的表述 并不是资源的本身
				-- Accept
					-- 我能够解析的数据类型
				-- ContentType
					-- 给你响应的数据类型
			-- 资源的状态
			-- 通过超链接的指引来告诉用户还有哪些资源状态可以进入
		-- restful
			-- 只要遵循这个REST风格 我们就叫做restful架构
		-- 规范 10条
			-- 核心思想
				-- 面向资源去编程 url尽量用名词 不要用动词
				-- 根据method不同对资源进行不同操作
			-- 在url中体现
				-- 版本
				-- api
				-- 过滤条件
				-- https
			-- 返回的要求
				-- 携带状态码
				-- 返回值
					-- get 返回查看所有数据
					-- post 返回新增的数据
					-- put/patch 返回更新这条数据
					-- delete 返回值为空
				-- 返回携带错误信息
				-- 携带超链接