Vue

Ⅰ.Vuejs

1. props (properties)

验证所支持的数据类型:

String Number Boolean Array Object Date Function Symbol

• 基本数据类型

  props:{
      '值名':{
            type:String			//值类型
            default:''			//默认值 
            requirey:false		//是否是必须传输的值
      }
  }
  

• 引用数据类型

  • 数组类型

    props:{
        '值名':{
            type:Array			//值类型
            default:[]			//数组类型
            requirey:false		        //是否是必须传输的值
        }
    }
    

  • 对象类型

    props:{
        '值名':{
            type:Array			//值类型
            default(){			//默认值:返回一个函数,return一个对象
            return {}
            }			
            requirey:false		//是否是必须传输的值
        }
    }
    

Ⅱ. vue-router

1. 动态修改路由标题

router > index.js :

    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home,
        meta: {             //修改页面动态标题
          title: '首页' 
        }
      }
    ]

main.js :

  // 页面切换时修改网页标题 //拦截器
  router.beforeEach(function (to, from, next) {
    document.title = to.meta.title || store.state.itemTitle;
    next();
  });

Ⅲ. vue 遍历嵌套过深时,数据更新视图无法更新:

<!-- 直接调用该方法,强行渲染视图页面 -->
<!-- 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。  -->
 this.$forceUpdate();

Ⅳ.vuex的使用

• 全局变量(state)

  • 定义

      export default new Vuex.Store({
          state: {
              counter : 0  //定义vuex变量
          },
      })
    

  • 使用

    • template

      <!--页面展示vuex变量-->
      {{$store.state.counter}} <!--state方法的使用-->
      {{$store.getters.powerCounter}}  <!--getters方法的使用-->
      {{ $store.getters.upperLimitCounter(9)}} <!--，getters方法传值的使用-->
      

    • script

      this.$store.commit('increment') //js获取vuex变量是通过cmmit方法进行获取
      

• 全局方法

  • 定义

      export default new Vuex.Store({
          mutations: {     // 操控变量值 ==> 改变
              increment(state) {
                  state.counter++
              },
              decrement(state) {
                  state.counter--
              },
           }，
           getters: {  // 操控变量值 ==> 计算
              powerCounter(state) {
                  return state.counter * state.counter
               },
              upperLimitCounter(state, getters) {
                  return num => {
                      if (getters.powerCounter == num) {
                          return true;
                       }
                        return false;
                   }
              }
      })