vue - 《NodeJS 基础知识笔记整理》

创建脚手架 vue create app
vuex
指令
属性
生命周期
this.$nextTick dom加载完成触发
views 路由视图页面
router
views 路由视图页面
导航守卫
props验证
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css ul样式引入">https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css ul样式引入
父子传参/子父传参
bus
文字排序 localeCompare

创建脚手架 vue create app

1.选择第二个
2.选择babel，scss，vuex，router，liner
3.如果需要使用vue3 版本 cd app 下载 vue add vue-next

vuex

1. state 存放store数据
1. mutations 改变store数据调用使用 $store.commit(‘函数名’，参数)
1. actions 处理异步操作调用使用一般用来发起ajax请求数据 $store.dispatch(‘函数名’,参数)
1. modules 可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理

const moduleA = {
     state: { ... },
     mutations: { ... },
     actions: { ... },
     getters: { ... }
     }
    const moduleB = {
     state: { ... },
     mutations: { ... },
     actions: { ... }
     }
    const store = new Vuex.Store({
     modules: {
      a: moduleA,
      b: moduleB})

1. getters 计算属性在页面调用

第一步：定义
     getters:{
    zj(state){
      return  state.list.filter(e=>e.flag).reduce((prev,next)=>{return  prev + next.count*next.prc},0)
    },
    zs(state){
      return  state.list.filter(e=>e.flag).reduce((prev,next)=>{return  prev + next.count},0)
    }
  },
  第二部调用
    <p>总价{{$store.getters.zj}}----总数{{$store.getters.zs}}</p>

指令

v-if 判断不符合条件不进行渲染
v-else
v-text
v-show 不符合条件元素display：none
v-for 循环遍历
v-model 双向绑定
v-bind 动态赋值简化 :
v-on 事件绑定简化@ 事件对象穿回来 $event

在事件处理程序中经常使用event.preventDefault() 或 event.stopPropagation() ，
  Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
    .stop     阻止事件继续传播
    .prevent  取消默认事件
    .capture  
    .self
    .once
    .passive
    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>
    按键码
        keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
        使用 keyCode attribute 也是允许的：
        <input v-on:keyup.13="submit">
        为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
        .enter
        .tab
        .delete (捕获“删除”和“退格”键)
        .esc
        .space
        .up
        .down
        .left
        .right

属性

computed 计算属性

-1. 不能用异步
-2. 不能改变data的值
methods 事件属性
components 注册组件

生命周期

1. beforeCreate 实力组件刚创建，元素和DOM数据还都没有初始化
1. created 数据data已经初始化完成，方法已经可以调用，但是DOM未渲染，一般进行axjx请求
1. beforeMount DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是现实{{}}
1. mounted 数据和DOM都完成挂载，再上一个周期占位的数据把值给渲染进去，可以在这边请求，不过created会更好一些，这个生命周期适合执行初始化需要操作的DOM方法
1. eforeUpdate 只要页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，数据没有改变不执行
6 . updated 知道是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的，beforeUpdate和updated要谨慎使用，因为页面数据更新都会触发，容易影响性能和死循环
1. beforeDestroy 这个周期是在组件销毁之前执行，清除残存数据，比如：计时器
1. Destoryed 和beforeDestroy一样
1. activated 缓存组件激活时调用
10.deactivated 缓存组件停用的调用

this.$nextTick dom加载完成触发

views 路由视图页面

router

两种路由模式 history无#号 | hash后面有#号
两种路由模式 history无#号 | hash后面有#号
redirect 重定向
meta 源路由
name:Home 可以用来重定向

“**”表示拦截所有页面

//监视是否是404页面然后将不需要的取消展示
 watch:{
     n:{
         $route(n,o){
             n相当于变化后的新值  o是旧值
         }，
         deep：true ，深度监控
         immediate:true //立即监控
     }
 }

views 路由视图页面

导航守卫

全局

1.创建一个Login.vue文件，并在路由json中引入
   2.设置路由拦截
           router.beforeEach((to,from,next)=>{
               if(to.path === '/about'){
                 //设置需要守卫的路径
                 if(localStorage.getItem('token')){
                 //获取登录令牌token有就执行，没有就跳转/login;
                   next();
                 }else{
                   next('/login')
                 }
               }else{
                 next();
               }
           })

前置 beforeEach
后置 afterEach

路由独享的守卫 beforeEnter

{
     path:'/foo',
     component :Foo,
     beforeEnter :(to,from ,next )=>{
         方法与全局前置守卫的方法参数是一样的
     }
 }

组件内的守卫 ```javascript

beforeRouteEnter beforeRouteEnter(to , from , next){ // 在渲染该组件的对应路由被confirm前调用 //不能获取组件实例 this //因为当守卫执行前，组件实例还没被创建 } beforeRouteUpdata(to , from ,next){

} ```

props验证

//第一种 
   props:[]
   //第二种
   props:{
       title:{
           type:String,
           required:true, //为真是必须传
           default:'www', //默认值
           validator(n){//自定义验证规则
               return //为真就不报错为假就报错
           }
       }
   }

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css ul样式引入

父子传参/子父传参

porps
子父传承自定义函数传进来在子组件通过this.$emit(“自定义函数名”,参数);

bus

1. 用$root.$on(‘msg’,(data)=>{})监听事件、用$root.$emit(‘msg’,’参数’)改变数据
2.创建一个new Vue 的bus，用 bus.$on和bus.$emit操作数据

文字排序 localeCompare

list.store((a,b)=>a.localeCompare(b));