vue 知识点

Vue

1 vue

angular框架

vue 谷歌集团

react.

vue是一个javascript的一个渐进式框架，使用比较多（二三线）
主要做视图 ，视图做好，然后数据改变视图会自动更新 ，无需操作dom,它自动会创建dom

2 vue核心 vue的指令

vue指令 
v-开头。  {{}}
​
1 v-text  == {{}} 渲染普通文本
2 v-html  渲染富文本  代表前端文本就是富文本
     容易造成注入攻击
3 v-for="" 遍历
    语法。v-for="(item,i) in list"    v-for="(item,i) of list"
    1 list 可为数组  可以数字  字符串  对象
    item 表示元素值  可以改名
    i 表示下标  可以改名
    
 4 v-on:  绑定事件 
 
 5 v-if  删除或者添加dom  true/显示  false/隐藏
  
 6 v-show  控制css的display属性 true/显示  false/隐藏
 
 7 v-else   v-else 必须和v-if是兄弟相邻元素 否则用不了 ，v-if反
​
 8 v-bind:title. ---> :title
     :属性 就是动态属性  “js语句”
     属性  静态属性。所有属性值都是字符串
     
 9 :class
  只有可能会改变的需要用动态class 否者可以使用静态的
  第一种写法
    :class='isTRue?"class1":"class2"' 三目运算
  第二种
   :class="{bg:i%2,class1:boolean,class2:boolean}"  属性:true/加 false不家
  第三种
   :class="[bg,bg1]"  数组形式
  
  10 :style
   <div class="box" :style="{background:'green',fontSize:'50px'}">111</div>
​
  11 v-model  双向数据绑定  v-model只能用于表单元素
    
     input type="text"
     input type='checkbox'
     input type="radio" 
     select option
     textArea
​
   
   效果 换肤
   1 背景颜色  
   2 字体大小
   3 行高
   

3 MVVM

双向数据绑定。--- 
M --  MODAL.  --- 数据模型   ---  data
V --  VIEw.   --- 视图模型。  ---  div#app
VM --  VIEW MODEL. -- 控制器。---  组件或者实例
​
数据改变。---  view自动更新
视图改变。--   数据自动更新

4 $set

在 vue2.0里面，数组的方法修改数组的时候实际上不能够监听改变，所以没有办法自动更新视图，所以在vue重写了一部分数组的方法,当方法改变的时候可以更新视图
所以。this.list[0] = 'aaa' 修改成功但是视图不更新
可以用 $set(修改的数组，索引,新值)  //可以更新视图的
​

5 v-if和v-show

关于 权限和安全的  必须用 v-if
如果其它的。考虑切换是否频繁 ，如果频繁建议v-show ，如果频繁的可以v-if
​
v-if 添加和删除dom
v-show 修改css属性。

6 v-model

  <div>
            <input type="text" v-model="username" placeholder="请输入用户名" />
        </div>
        <div>
            <input type="password" v-model="password" placeholder="请输入密码" />
        </div>
​
        <div>
            <label>
                <input type="radio" name="sex" v-model="sex" value="男"> 男
            </label>
            <label>
                <input type="radio" name="sex" v-model="sex" value="女"> 女
            </label>
        </div>
​
        <div>
            <select name="" id="" v-model="classes">
                <option value="">请选择</option>
                <option value="sy2201">sy2201</option>
                <option value="sy2202">sy2202</option>
            </select>
        </div>
        <div>
            <label>
                是否毕业 <input type="checkbox" v-model="isFinish">
            </label>
        </div>
​
        <div>
            <textarea name="" id="" cols="30" rows="10" v-model="desc"></textarea>
        </div>
        
        

7 修饰符

​
1 键盘修饰符
  @keydown
                .enter  键盘名称
                .13     keyCode
                .ctrl.enter  组件键
                
 2 v-model
                    .number  将数字字符串转化成数字   '110' -- > 110
                    .lazy    lazy默认执行事件oninput输入触发  懒 将v-model的事件变为 onChange[改变且失去焦点的时候触发]
                    .trim    去除首尾空格 
                    
 3 事件修饰符
     @click
              .stop -  阻止冒泡   调用 event.stopPropagation()。
        .prevent -   阻止默认     基本做原生上传会用到阻止默认   a  form表单  调用 event.preventDefault()。 
        .capture - 添加事件侦听器时使用 capture 模式。 改为捕获事件
                原生js里面怎么改为捕获
        .self - （只点击它本身的时候才会触发） 只当事件是从侦听器绑定的元素本身触发时才触发回调。
        .native - 监听组件根元素的原生事件。(*****)
        .once - 只触发一次回调。  div.onclick = null
        .passive - (2.3.0) 以 { passive: true } 模式添加侦听器 (滚动事件修饰符的时候使用)
        // 移动   touchstart touchend touchmove
        
 4 鼠标事件修饰符
     @mousedown
                .left - (2.2.0) 只当点击鼠标左键时触发。
        .right - (2.2.0) 只当点击鼠标右键时触发。
        .middle - (2.2.0) 只当点击鼠标中键时触发。

8 组件

函数。将一部分的代码，想什么时候使用的时候调用这个函数，并且可以通过传递的不容的内容是这个尽可能会多复用
函数 封装逻辑代码 
​
组件的意义  （页面的东西是由组件构成的）--- 组件当成函数
组件 ，将 html，css ,js 封装起来，有样式结构以及功能这么一个东西叫做组件，它也可复用，传递不同的数据去显示的不一样，达到通用效果
​

9 全局组件

// 参数1 组件的名字（不是使用关键字和保留字 也不用使用标签 标签形式调用组件） -- 函数的名字
// 参数2 options.  new Vue(options)
Vue.component('list',options)

<template id="home">
</template>
options = {
	data(){
		return {}
	},
	methods:{
	},
	template:"#home"
	template:"<div></div>"
}
组件注意事项
	1 template 只能有一个字元素
	2 data必须函数返回对象
	3 通信传参的时候 :才是动态属性  静态属性传的都是字符串
	4 传递的数据 通过props接收
	5 props接收的属性 不要在methods或者data里面定义 
	6 组件之间数据默认不能共享 ， 父子组件值得数据默认不能共享

10 组件的data为什么是函数？

组件为什么要有函数，利用函数局部作用域，就是为加一个独立作用域，让它的数据独立，相互之间不影响，

1 函数的特点 ？
	1 调用
	2 作用域
	3 传参
	
function fn(a){
  console.log(a)
}

fn('java')   // 
fn("前端")   // "a"

11 组件通信 (就是想让这个数据可以相互之间使用)

//数据流向都是单向的，从上往下，不要妄想着在自组件改变父组件的数据，谁的数据，就让谁来修改的

1 父子通信，父组件的数据传递给子组件

 在组件上自定义属性 传递数据。传递多个
 <home color="green" :n="10" ></home>
 自组件内部 可以通过props接收
 props:['color','n']
 

12 props验证

验证这个东西是否是对的，不能帮你该改变 

1 props:['color','n']
2 props:{
	n:Number,
	color:{
	type:String,
	default:"red" //传递i就是你传递的值，不传递就是默认值
	},
	arr:Array,

}

13 生命周期

组件它创建到销毁的过程的函数叫做生命周期(钩子函数)，自动执行，过时不候

1 挂载阶段的生命周期	（如果组件不销毁，就执行一次）
	
	// 创建前触发
		  beforeCreate(){}  //组件还没有被创建，所以不能够使用组件内部东西，不能够拿到组件的数据和方法
	// 创建后触发
		  created(){}  能调用内部的数据和方法 （等待着渲染） ajax
	// 挂载前触发
		  beforeMount(){}    也还没有渲染到页面上 还没有渲染到页面上 diff
	// 挂载后触发    真实dom节点  渲染完成  ajax
			mountd(){}    // 获dom,获取元素，初始化swiper 

2 更新阶段的生命周期  (初始化的不执行，数据更新的时候执行 (自父组件更新都执行))
  更新阶段的生命周期 ，更受限必须要 渲染过真实DOM, 必须要值完挂载阶段的声明周期 ， 当你修改的时候
  购物车总价，邮费自动算的 可以使用
	beforeUpdate(){} 更新前触发
	updated(){} 更新后触发
	更新阶段有瑕疵，没有办法针对的监听某个值，从而任意值改变都执行，耗费性能


3 卸载阶段的生命周期 （销毁的时候执行） 作用就清除计时器 注销时间
	  beforeDestroy() {
    console.log('销毁前 -- beforeDestroy')
    },
    destroyed() {
      clearInterval(this.timer)
    }
                

14 虚拟DOM

所有的内容都是虚拟DOM， 真实DOM的对象节点，在渲染完成之前都是虚拟DOM节点，所以当我们去修改的时候，它查看修改前和修改后是否有变化，将变化的内容，记录，只修改变化的内容，那么没有改变的就略过了

真实DOM
			 div.box
			 		p ‘hello world'
			 		h2 'hello 1'
			 		
var dom1 = {
	 type:"div",
	 props:{class:"box"},
	 children:[
	 	{
	 	type:"p",
	 	props:{},
	 		children:["hello world"]
	 	},
	 	{
	 		type:"h2",
	 		props :{},
	 		children:["hello 1"]
	 	}
	 ]
}		 		
	
	//	更改后的
var dom2 = {
	 type:"div",
	 props:{class:"box"},
	 children:[
	 	{
	 	type:'p',
	 	props:{},
	 		children:["hello world1"]  //内容更新的时候需要更新
	 	},
	 	{
	 		type:"h2",
	 		props :{},
	 		children:["hello 1"]
	 	}
	 ]
}		 		
			

15 created和mounted

使用那个生命周期进行ajax请求
created,beforeMount,mounted , created最早的，
created 请求异步   beforeMount -- mounted -- （数据返回)   -- 渲染数据）  --- 渲染完成
无论哪个生命周期里面，都会渲染两次，ajax异步的数据，生命周期执行完之后数据才会返回

16 父组件和自组件生命周期

1 home（父） list（子） 怎么执行的？
	挂载阶段
		父 123  --->   子 1234   -->  父 4
	
2 更新阶段 
		必须都要渲染dom，否则监听不到 
		父 1 子 12 父2

17 watch

监听某一个值改变自动触发,取代了更新的生命周期

watch:{
	// 只适用于基本类型
	n(){
		// n改变的时候执行 (限制 n必须基本类型)
	},
	todos:{
		handler(){
					// 
					this.todo_start=
					this.todo_end= 
		},
		deep:true,
		immediate:true // 是否初始化的时候执行
	}
}

watch里面深度监听的deep做了什么？
    //基本类型和引用类型的区别
    引用类型的深拷贝和浅拷贝。, 如果浅拷贝怒 (拷贝了地址，所以改前和改后同一个地址,就监听不出来改变),所以加了deep:true,深拷贝了，或者 将对象值一一对比，将对象本身改变成字符进行比较

18 computed

监听改变自动计算出结果,不分引用类型和基本类型，返回值就是计算的结果
computed:{
// yf计算返回的结果，调用不需要（） ，函数必须要return值
	yf(){
	 // 监听里面调用的值改变，
		return 值
	}
}

19 watch和computed的区别

优缺点和使用场景

 1 watch和computed 共同的特点，可以监听某个值改变，自定执行逻辑
 watch
 	分基本类型和引用类型两种监听好，监听的值,要作为函数名或者属性名，当这个值改变的时候会自动执行
 	watch 有触发间隔 ,相当于有截流的效果
 	***** 监听的函数里面可以执行异步 (可以请求数据)
 	watch 使用与 一个属性改变影响多个值
 	
 computed
  不分引用类型和基本类型，函数作为函数的值，调用的时候不需要（）,必须要有返回值
  会将上一次的计算结果，进行缓存，下一次计算的时候从缓存里面获取
  ****** 函数里面不能够执行异步，不能够强求数据
  computed 多个值计算出一个结果
  
  ps 除了异步 其它情况下建议是用 computed  代码好维护

20 key的作用

key 给虚拟dom添加标记的，作用当我们改变数据的时候，可以同级通过唯一标记来进行比较，能够快的比较出是否改变，优化性能
同级保证唯一
<div key="1"></div>
<p key=2></p>
ul key=3
	li key=4

21 组件通信 重点

1 父子通信

 <home  :list="list" n=10></home>

 home组件里面
 props:{
 	list:Array,
 	n:number,
 	name:{
 	 type:String;
 	 default:"hello"
 	}
 }

2 子父通信 (封装组件里面比较多)

	1  利用父子通信传递函数的方法去做
	将父组件的方法传递给子组件，那么子组件调用这个方法的时候其实就是调用父组件的那个方法，这个时候我们在这个函数里传参，这个参数就是自组件的数据，父组件生命函数形参就可以接受到数据
	 <home  :list="list" n=10  del="delList"></home>
	 this.del(aaa) --- 父组件的函数。deList  -- delList(参数){}
	 
	 2 广播事件  推荐使用
	 	this.$emit('事件名称',参数)  
	 	<list @事件名称=‘callback'></list>
	 	callback 获取子组件的数据

3 事件总线 eventBus

  适用于多个组件事件共享数据，使用与 子传父组件类似， 都是利用$emit
  
  const bus = new Vue({})  //创建一个第三方势力对象
  bus.$emit("事件名",参数)
  bus.$on("事件名",callback(传递的参数))
  
  有问题 必须保证传递的时候组件是存在的，如果不存在监听不到, 页面组件之间使用eventBus就不好传递了，页面之间都是切换关系，只显示一个，当时传递的时候还没有创建呢
 

4 边界情况

遵循谁的数据让哪个组件自己去修改，不要在别的组件里面修改其它组件的数据
1 this.$parent 只能获取父组件的信息(直接获取)   
2 this.$children     获取子组件的集合   []
3 this.$root   获取根实例的信息

5 ref

 <home ref='home'></homew>
 this.$refs.home 获取组件信息     --  document.getElementById("")
 维护的时候不好维护 , mounted之后获取

6 插槽 -- 封装的组件上

利用slot在组件中展位，传递的时候在在组件标签中间传递，如果传递就slot位置显示
1 普通插槽
<Search>
	//插槽
	<button>按钮</button>
</Search>

Search.vue
	<div>
	<input /> <slot></slot>
	</div>

2 具名插槽
	slot组件的name值，与插槽的slot对应才能显示

  <slot name='before'></slot>
  <slot name='after'></slot>
  
  <Search>
      <select slot="before" name="" id="">
        <option value="2201">2201</option>
        <option value="2202">2202</option>
      </select>
      <button slot="after">搜搜</button>
    </Search>
    
    
  3 作用域插槽
  	能够访问到组件自己的内容
  	  <slot :val="val" :n="10" :enter="enter"></slot>  slot传递组件的数据或方法
  	  scope就是传递的数据对象
   <Search> 
      <template slot-scope="scope">  
        <div>
          <button @click="search(scope)">搜索</button>
        </div>
      </template>
    </Search>
    
    

22 脚手架安装项目

必须有node环境
如果出现  不是内部或者外部命令
	1 单词打错了
	2 没有安装成  
	3 环境变量有问题
	

	
node -v. 如果10 升级。安装 	16		或者 14




1 cnpm i @vue/cli -g  or npm i @vue/cli -g

2 查案是否安装完成
		vue --version
		如果出现 版本 @vue/cli 5.0.4  （出现这种字样就说明安装成功了）
	
3 创建项目
	   vue create  vue_study

4 进入目录 vue_study
	   npm run serve
	   
5 
 cnpm i 安装 package.json 里面记录的所有依赖

1 安装  cnpm i @vue/cli -g

2 vue --version 

3 vue create vue_study

23 局部组件

局部组件必须要注册才能使用 , 在哪个组件里面注册就只能在那个组件里面使用，利用components注册才能够使用

const demo = {
	data(){
		return {}
	},
	template:"#demo"
}

const home = {
  components:{
  	demo
  }
}

//组件分两种
// 使用一次  局部组件 (页面组件)（页面里面的某一部分）
// 使用多次  全局组件  （按钮，输入框，table）

全局组件耗性能

24 每一个文件

每一个js文件都是独立作用域，其它js都不能直接使用,方法和属性都是私有的，想要使用必须导出 ， 其它调用必须倒入
每一个.vue 都是一个组件，也是独立的，其它想使用这个组件必须要 导出和导入

module.exports = a  ---->       require("./a")
export default.                import a from "./a"

25 项目目录

1 可能不是你创建项目 ， 项目创建好了， 码云或者github上 , 没有node_modules,需要安装node_modules
2 node_modules 是这个项目的依赖(项目使用的插件)  scss es6 ..  jquery
3 拿到项目 看看 node_modules 安装依赖  cnpm i  or  npm i    
4 看package.json (启动项目 --- )
	 npm run serv 
 第二天发现启动不了了
   1 npm i  安装
   2 删除 node_modules cnpm i
   3 检查目录是否对
   
packpage.json 包管理文件 (很重)  
public   phpstudy 的 www 目录 服务器的静态资源目录
node_modules  依赖文件 github 码云 上传的忽略文件
readme.md  项目使用说明书 (自己写)
还有一堆其它的配置文件。暂时不讲
src 开发的文件夹 
	  

26 关于项目的一些问题

1 项目就找src的目录 
	该路径
	改文件夹名字
	
2 所有都会在App.vue 跟组件
	
3 错误 
 	1 路径有问题
  Module not found: Error: Can't resolve './views/Todo1.vue' in '/Users/element/Desktop/sy2201/vue_study/src'
  2 组件没有注册
    <Todo> - did you register the component correctly
    
  3 Missing script: "server"  npm run serve
  
  4 

27 路由

路由难度5* ， 难点就是需要一定经验 能把这个东西做好, 容易出去各位同学 

vue 切换页面就使用路由 , 跳转页面不刷新，单页面应用， 不同的路径匹配不同的组件，路由页面和路径一定是一一对应
切换用的 <a herf=></a>. 跳转回刷新

http://127.0.0.1:8080/home
http://127.0.0.1:8080/center
										 /about

1 安装下载  cnpm i vue-router@3 --save
	卸载 cnpm uninstall vue-router@3 --save
	vue-router4 先不使用

2 在src/router/index.js
 //固定的
	import Vue from "vue" ; // "Vue" 错了
	import Router from "vue-router"
	Vue.use(Router)
	
	const routes = [
		{
		path:"/自定义"	,
	 	component:Home , components 错了
		}
	]
	
	const router = new Router({
		routes  // routers 错误
	})
  export default router
  
  
 3 main.js 
 	import router from "./router"
 	new Vue({
 		router, //传router给每一个组件
 	})
 
 4 App.vue
 	 <!--显示路由组件-->
 	 <router-view></router-view>

28 router-link

路径匹配的时候
http://127.0.0.1:8080/   -- home

http://127.0.0.1:8080/about  -- about
<router-link
    exact
    to=""
    :to="{}"
    activeClass    修改模糊样式的类
    exactActiveClass  修改精准匹配的类名
    replace      默认情况是push模式   -- replace没有后退记录了
    tag="li"
   >
</router-link>
		默认与两个样式。router-link-active. router-link-exact-active

29 动态路由传参

router-link :to="'/topic/'+item.id"
router/index.js
{
	path:"/topic/:id"  id是变量。 可以
}

topic组件里面 
this.$route.params 获取传递的参数  固定写法

1 路径传递
2 路由上配置
3 组件内部接收

30 css属性穿透

<style scoped>
/**
  
  设置的样式没起作用

  1 后添加进去的元素 不起作用  例如富文本
  2 在组件里面直接渲染的元素才能继承样式
  3 

*/
.content >>> p {
  color: red;
}

.content /deep/ p {
}
</style>

31 路由传参

<router-link :to="{path:'/路径',query:{key1:val1,key:val2}}">
接收
this.$route.query  获取到参数对象

动态路由传参 比较适合传递单个的值
路由传参比较适合 传递多个值，对象这种

// 动态路由 + query （你们试试）

32 编程式路由 $router

router-link --- 
js触发路由跳转 
this.$router.push('/about')
this.$router.push({
  path: "/about",
  query: { name: "banban", age: 20, sex: "男" },
});

this.$router.push() //跳转 有后退记录的  添加栈
this.$router.repalce() //跳转  无后退记录  二级可以需要加这个属性  替换当前栈
this.$router.history.go()  0  1 -1

33 嵌套路由

 {
    path: "/order",
    component: Order,
    meta: {
      til: "订单",
    },
    children: [
      {
        path: "/order/end", //  /order
        component: End,
        meta: {
          til: "已完订单",
        },
      },
      {
        path: "tui",
        component: Tui,
        meta: {
          til: "已退订单",
        },
        children:[]
      },
      {
        path: "pay",
        component: Pay,
        meta: {
          til: "代支付订单",
        },
      },
    ],
  },
  
  ps 
  	第一个 路径携带父极路径
  	要在父级组件里面写 router-view
  	三级路由都已经很麻烦 
  

34 重定向

  // /order. --- > /order/end
 {
        path: "/order",  
        redirect: "/order/end",   //冲定向位置
      },

35 路由懒加载

如果正常加载  当时用的或者不用的都加载了 ，导致首屏 加载时间过长 (都加载完成才能渲染视图)
总体时间可能没有变少，但是分步，提高了用户体验

骨架屏   饿了么
banner广告  -- 当然前

const About =()=> import("../views/about")
{
    path: "/me",
    component: () => import("../views/me"),
    meta: {
      til: "我的",
    },
  },

36 命名路由

{
 path:'/about',
 name:'about'
}
router-link :to="{name:'about',params:{}}"   
获取的时候。通过 this.$route.params 刷新不保留

命名路由传参 刷新时候数据不能保存住 (用处不大)

37 命名视图

<router-view></router-view>

{
path:"/"
components:{
	default:组件1,
	a:组件2
	b:组件3
 }
}

<router-view></router-view> deafult
<router-view name='a'></router-view>  路径匹配 组件2
<router-view name='b'></router-view>  路径匹配 组件3
<router-view name='c'></router-view> 不限时

38 导航守卫 路由的声明周期

全局钩子
// 路由跳转前触发
beforeEach((to,from,next)=>{
	 // to表示进入的路由信息
	 // from 表示从哪离开的路由信息
	 // next() 向下执行    next('/') next({path:"/"})
	 设置title
	 登陆验证 重点 
})
afterEach((to,from)=>{
  // 每次路由进入后触发
  
  很少单独使用  都和beforeEach一起使用比较多
  例如可以。beforeEach开启加载动画。  在afterEach 关闭加载动   做一个loadding
})

独享钩子  了解
beforeEnter:(to,from,next)=>{
	// 在路由对象对象配置上的钩子函数
	
}
组件内部钩子 了解
// 比beofreCrate更早
 beforeRouteEnter(to, from, next) {
    // ...
    //
    console.log("路由进入前触发");
    next();
  },
  beforeRouteLeave(to, from, next) {
    // ...
    console.log("路由离开的时候触发");
    next();
  },
  //  路由更新的时候才会触发 它会触发  watch:{$route}
  beforeRouteUpdate() {
    // 默认不触发 ， 路由对象更新的时候触发
    路由信息发生改变才会触发
    console.log("路由更新的时候触发");
    next();
  }

39 路由模式 （暂缓）

mode:"hash" "history"
hash 模式
	带 #
history 模式 
 	不带 #

40 keep-alive 重点中的重点

路由组件都是切换的，一个显示其它组件都是销毁的，所以导致每次切换回来，之前组件都销毁需要重新初始化，所以还需从新创建从新发送请求，
keep组件包裹之后 组件不被销毁

正常使用使用过程中。
有些数据是实时的，如果实时的数据使用keep-alive 会导致页面不刷新

<keep-alive max="最大缓存页面数量" include='我要缓存的组件' exclude='不需要缓存的组件'>
	 <router-view></router-view>
</keep-alive>

1 区分组件缓存不缓存
  include='组件的name,组件的name' 
  exclude='组件的name，组件的name'
  
 2 设置了不缓存 ---
 	两种情况都需要的
 	 activated() {
    // 请求数据  -- 需要更新的改变的 在这里执行
    console.log("组件进入的时候触发");
    
    this.getTopic();
  },
  deactivated() {
    console.log("组件离开的时候触发");
  },
 	
  
  

40 vuex

一个vue的状态（数据）管理工具,多组件共享数据(组件之间不需要有什么关系)，它相当于一个中间对象，所有的东西都是它自己的，我们页面只需要使用就可以了

 安装 cnpm i vuex@3 --save
 
 使用
 1 src/store/index.js.      
 	 import Vue from "vue";
    import Vuex from "vuex";
    Vue.use(Vuex);

    //你别下载

    const store = new Vuex.Store({
    	state, // 状态
    	mutations //修改状态的方法
    	getters // state它的计算属性。 computed
    	actions. // 可以提供上下文环 (异步修改state)
    });

    export default store;
    
  2 main.js
  	import store from "./store"
  	new Vue({
  		store,
  		router,
  	})

state

const state = {
	count:10,
	user:{}
}
this.$store.state[属性]  
// 帮助我们封装了一个对象 ...拓展出来就是原生的写法
import {mapState} from "vuex"

computed:{
	...mapState(['count','user'])  //数组里的属性一定要与 state里面属性一样，否则获取不到
}

mapState封装

function mapState1(arr) {
  let obj = {};
  arr.forEach((item) => {
    obj[item] = function () {
      return store.state[item];
    };
  });
  return obj;
}

console.log(mapState1(["count", "user", "b", "abc"]), "okokok");

mutations

唯一指定能修改state  如果想修改state 必须只能使用mutations的方法 
const mutations = {
// state 第一个参数
// payload 页面传递参数s
	ADD_COUNT(state,payload){
		 // 	执行逻辑
	}
}

this.$store.commit("ADD_COUNT",参数)

import {mapMutations} from "vuex"
methods:{
	...mapMutations(["ADD_COUNT"])
}

getters

state它的计算属性，state的数据改变改的时候自动执行，跟computed使用方法一摸一样
const getters ={
	todos_start(){
		return.   必须return
	}
}
// 
this.$store.getters.todos_start
import {mapGetters} from "vuex"

computed:{
	...mapGetters(['todos_start',....])
}

actions

可以提供上下文环境，让commit()提交的可能性更多， (发送ajax 执行异步) , 获取到回调到结果，然后提交commit 修改state

const actions = {
	login(context){
	
	   context 获取其它模块的数据 需要使用 context.rootState   .rootGetters
		 context 是 store 镜像
		 
		 // 发送登陆请求。-- 
		 // 看返回结果 ， 如果对。 commit('SET_USER',payload) 修改state
		 // 否则 请求失败 提示失败
	}
}

this.$store.dispatch('login',参数)

import {mapActions} from "vuex"

methods:{
	...mapActions(["login"])
}

Modules

将数据进行模块化，方便管理 ,如果数据数据比较复杂，推荐使用modules

  modules: {
    user, // this.$store.user            
    todos, // this.$store.todos
  },
  
  模块里面调用自己的方法不需要加
  模块导出的时候 加上命名空间
  export default {
  namespaced: true, //加上之后调用 actions mutations 需要加上模块民意  this.$store.commit('user/ADD')
  state,
  actions,
  mutations,
};

plugins vuex数据本地存储

vuex的缺点是什么？ 刷新的时候数据不保留？

安装  npm i vuex-persistedstate --save. 
 
 plugins: [
    Per({
      storage: window.sessionStorage,  //修改存储方法
      key: "sy2201", // 默认key vuex
      paths: ["user"], //默认都存储 设置存储那些属性 
    }),
  ],

vuex

vuex它是vue的状态管理工具,适用多组件之间共享数据，它有自己的一些属性，作用各不相同
state 存储状态
mutations 修改状态
getters  state的计算属性
actions  给修改state提供异步环境，我们一般在这里面可以发送请求
modules  它将数据进行模块 ，后期好维护
plugins  持久化存储

其实eventBus --- 
本地存储 共享比较不错 ， 100 维护的时候不知道去哪改 

41 自定义指令

v-hide=""

全局 ---
  Vue.directive("drag", {
    bind(el, val) {
      el.onmousedown = function () {
        el.style.position = "absolute";
        document.onmousemove = function (e) {
          el.style.left = e.pageX + "px";
          el.style.top = e.pageY + "px";
        };
        el.onmouseup = function () {
          document.onmousemove = null;
        };
      };
    },

局部

42 自定义过滤器。

Vue.filter("toDouble",function(data){
	必须要返回值
	return 
})

{{10 | toDouble}}

43 axios

专门封装了ajax的一个插件，核心都XMLHttpRequest,它是一个promise的封装

cnpm i axios --save

使用的参照着 jquery

axios({
	url:"请求地址",
	method:"请求方式,
	headers:{}, ...
	params:{} //get
	data:{} 非get请求传参
}).then (res=>{}).catch(err=>)


使用
1 utils/request.js 
		二次封住那个 axios
2 api/index
	  将接口在这里创建 导出
	  
3  页面负责调用这些接口

44 token做用是什么

token 就是用户信息 （加密之后的用户信息） , 登陆之后获取的用户信息 ， cnode 并没有给我们登陆接口，这个登陆接口是我自己写的，我是信息复制过来的，登陆之后可以拿的到

收藏 
 wshp891122 

UI框架

pc端    elment-ui
移动端   vant

1 cnpm i element-ui  --save  看官网

作业

创建一个cnode项目

内容左边。router-view.

内容右边。命名视图 router-view na me

倒计时 5秒时候后跳转

两个接口

1 店铺列表

[{...}]

2 店铺详情

/123. --- 通过id获取详情

作业

1搭建路由 写个三四遍

2昨天的选项卡 改成路由

3 主题列表渲染必须写

跳转详情页传参 渲染详情页面 可选

cnpm i @vue/cli -g 进入目录

cnpm i

cnpm run serve

路由 vue-router

vuex.

@vue/cli. 用它

axios

作业

 选项卡。
 	 <menu></menu>
 	 <content></content>
 	 
 todoList
 <Search></serach>
 <list></list>
 
 
 cnode 整明白了 

todolist

1 数据格式
	todoList:[
		{
		  done:false , //这在进行
		  text:"内容",
		  id:1
		},
			{
		  done:true , //这在进行
		  text:"内容1",
		  id:2
		}
	]
	
 2 <li v-for="item in  todoList" :key="item.id"> 以后在遍历的时候+key值
 
 3 
 	 todoList:[], 都有
 	 todo_start:[], flase  正在进行的   filter
 	 todo_end:[]  true. 已完成的		filter
 	 
 	 
 	 
2 手写生命周期

问问题

1) 降级  ---  (工作) --- ()
2) 基础 -- (着急)
	 完整 
	 		ajax() 
      组件通信 （）
 1  2   
 2
 3
 4
 5
 6
	
前端。
选项卡。 todolist  购物车

联系

作业 1
cnode首页的列表图

1 点击分类 让数据改变 
	全部   精华   问答

2 列表 List 


案例敲一一边

留言板
添加数据
   ...