vue2基础

结构

<template> <!--vue2需要写个外元素包裹-->
<div>
  <input type="text" v-model="input">
</div>  
</template>
<script>
export default { //js部分导出供h5接收使用  v2中凡js使用不管什么变量均要加this
  data(){ //定义变量的地方
    return{
      str:'淼森润林',
      input:'',
      arr:[9,7,5]
    }
  },
  methods:{ //定义函数区域  
    miao() {
      this.str='鳞波微步';
      console.log(this.str);
    }
  },
  mounted (){ //写代码区域 data和vdom都以创建(有数据) 
    this.miao();
  },
  watch: { //事件监听
    input(vnew,vold){
      console.log("新值:",vnew,"    ","旧值:",vold);
    },
    arr:{ //监听对象,深度监听
      handler:(vnew,vold)=>console.log(vnew,vold),
      deep: true 
    }
  }
}
</script>

父子传值

父组件通过属性发送（子传父调用父组件传来的带参事件）

<template>
  <div> 
    <h4>父级 </h4>
    <Son :str2='str2' :number2='number2' />
  </div>
</template>
<script>
import Son from '@/views/son.vue'
export default {
    components: { Son },  //需要重js导出h5才能获取到
    data(){
      return {
        str2:'淼森润林',
        number2:999
      }
    }
}
</script>

子组件通过props接受

<template>
  <div>
    <br><br><br><br><br><br><br></br>
    <h4>子级</h4>
    <div>父组件传来的值:&nbsp;&nbsp;{{str2}} & {{Number2}}</div>
  </div>
</template>

<script>
export default {
  props:{
    str2:String, 
    Number2:Number
  },
  mounted(){
    console.log(this.str2);
  }
}
</script>

子传父
通过父组件传递一个参数函数给子组件

<template>
  <div> <!--vue2需要写个外元素包裹-->
    <h4>父级 </h4>
    <div>子组件传来的值:   {{sonstr}}</div>
    <Son :show="show" />
  </div>
</template>
<script>
import Son from '@/views/son.vue'
export default {
    components: { Son },  //需要重js导出h5才能获取到
    data(){
      return {
        sonstr:''
      }
    },
    methods:{
      show(v){
        console.log("子传父",v);
        this.sonstr = v
      }
    }
}
</script>

子组件写入参数进行调用

<template>
  <div>
    <br><br><br><br><br><br>
    <h4>子级</h4>
  </div>
</template>
<script>
export default {
  props:{
    show:{
      show:Function
    }
  },
  mounted(){
    this.show("鳞波微步")
  }
}
</script>

插槽

父组件

<template>
  <div>
    <Son>
      <template>匿名插槽</template>
      <template v-slot:sky >聚名插槽</template>
    </Son>
  </div>
</template>
<script>
import Son from '@/views/son.vue';
export default {
  components: {Son}
}
</script>

子组件

<template>
  <div>
    <slot></slot><br> <!--匿名插槽-->
    <slot name="sky"></slot> <!--聚名插槽-->
  </div>
</template>

路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {path: '/demo',name: 'demo',component: ()=>import('../../views/demo.vue'),
  children:[] }  
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes    // routes:routes
})

export default router

路由跳转

 methods:{  //定义一个函数,不需要导入什么
    getson(){
      this.$router.push('/son')
    }
  }

路由传参

主页

  methods:{
    getson(){
      this.$router.push({path:'/son',query:{id:999}})
    }
  }

跳转页参数接受收

  mounted(){
    console.log(this.$route.query);
    console.log(this.$route.query.id);
  }

vuex状态管理

定义全局状态管理

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: { //变量区
    str:"淼森润林"
  },
  mutations: { //调用
    tong(state,v){state.str=v}
  },
  actions: {}, //异步调用
  getters: {}  //计算属性
})

组件中的使用

<div>{{$store.state.str}}</div> <!--h5获取-->

  mounted(){
    console.log(this.$store.state.str); //js获取,不需要导入啥
    this.$store.commit('tong','鳞波微步'); //同步调用
  }

vuex防刷新

  mounted(){
  	//绑定刷新事件
    window.addEventListener("beforeunload",this.vuex);

 //刷新后 获取缓存
    if(sessionStorage.getItem("ve")){
      this.$store.replaceState(JSON.parse(sessionStorage.getItem("ve")))  //replaceState对vuex做替换
    }
  },
  methods:{
    vuex(){  //刷新事件
      sessionStorage.setItem("ve",JSON.stringify(this.$store.state))  //注:将一个对象进行设置
    }
  }
}

axios请求

配置为全局对象

import axios from 'axios';
Vue.prototype.$Axios = axios;

页面调用

 mounted(){
        this.$Axios({
            url:"http://api_devss.wanxikeji.cn/api/articleList",
            method:"post"
        }).then()
    }

响应拦截器

//vue2中数据请求不能写一个函数封装 调用的时候没法then
axios.interceptors.request.use(res=>{
  if(res.url.includes("http")){
    console.log(res);
    return res;
  }else{
    res.url = 'http://api_devss.wanxikeji.cn/' + res.url;
    return res;
  }
})

滚动事件

  methods:{
        dome(){
            let scrollTop = document.documentElement.scrollTop;
            if(scrollTop>100){
                document.title = "反应";
            }
        }
    },
    mounted(){
        window.addEventListener('scroll',this.dome)
    }

事件监听

    data(){
        return{
            scrol:'',
            vnew:'',
            vold:''
        }
    },
    watch:{
      scrol(vnew,vold){
        this.vnew = vnew;
        this.vold = vold;
        console.log(vnew,vold);
      }
    },

获取元素

 <input type="text" ref="inp01" value="999">
 <input type="text" ref="inp02">

 console.log(this.$refs.inp01.value);
 console.log(this.$refs.inp02);