vue 2笔记

一.  mothods   方法的使用 

二、components   组件的使用

 三、 生命周期函数/生命周期钩子： 

    组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法  这些方法就叫做生命周期函数

<script>
    export default{

        data(){

            return{

                msg:'msg'
            }
        },
        methods:{
            setMsg(){
                this.msg="我是改变后的数据"
            }

        },      

        beforeCreate(){
            console.log('实例刚刚被创建1');
        },
        created(){
            console.log('实例已经创建完成2');
        },
        beforeMount(){
            console.log('模板编译之前3');
        },
        mounted(){     /*请求数据，操作dom , 放在这个里面  mounted*/
            console.log('模板编译完成4');
        },
        beforeUpdate(){
            console.log('数据更新之前');
        },
        updated(){
            console.log('数据更新完毕');
        },
        beforeDestroy(){   /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
            console.log('实例销毁之前');
        },
        destroyed(){
            console.log('实例销毁完成');
        }

    }
</script>

四、 vue-resource  介绍

先使用命令进行安装     命令： cnpm insatll vue-resource --save  

然后在main.js  引入使用
        import VueResource from 'vue-resource';
        Vue.use(VueResource);

安装  cnpm insatll axios --save   然后在需要的地方引入直接使用就行

请求的写法如下

1.方法一
this.$http.get('请求路径').then((resp)=>{
              
          })
      

2.方法二    axios请求
       axios.get('请求路径').then((resp)=>{
           
       }).catch((resp)=>{
           
       })

五、父子组件相互传值

   父组件主动获取子组件的数据和方法：

1.调用子组件的时候定义一个ref

        <v-header ref="header"></v-header>

    2.在父组件里面通过

        this.$refs.ref名字.属性

        this.$refs.ref名字.方法

注意：

子组件主动获取父组件的数据和方法：  

        this.$parent.数据

        this.$parent.方法

六、非父子组件传值

1、新建一个js文件   然后引入vue  实例化vue  最后暴露这个实例  

  3、通过 VueEmit.$emit('名称','数据')

    })

七、Vue中的路由 以及默认路由跳转

 1、 既然要使用vue路由 确保要有vue-router   没有的话安装一下

      命令： npm install vue-router  --save   /    cnpm install vue-router  --save（建议使用这个命令）

    创建组件 引入组件             const routes   定义路由

3、实例化VueRouter            const router = new VueRouter({
              routes // （缩写）相当于 routes: routes
            })

4、然后main.js去挂载

5、路由跳转
        <router-link to="/foo">Go to Foo</router-link>
         <router-link to="/bar">Go to Bar</router-link>

根组件的模板里面放上这句话   <router-view></router-view>       

八、 Vue动态路由   传值

    1、配置动态路由

 2、在对应的页面实现跳转

  3.通过       this.$route.params获取动态路由的值

 二、GET传参

      1.在对应的页面实现跳转.

    <router-link :to="'/conto?id='+index">{{index}}---{{item}}</router-link> 

      2、配置动态路由

     {
      path: '/conto',
      component: Conto
      }

      3.通过       this.$route.query获取动态路由的值

九、Vuedemo路由的嵌套

 1.配置路由   注意红色配置

  第一步引入vue

import User from '@/components/user'
import Useradd from '@/components/user/Useradd';
import UserEdit from '@/components/user/UserEdit';

第二步  配置路由

{
      path: '/user',
      component: User,
      children:[
          {path: 'useradd',component: Useradd},
          {path: 'useredit',component: UserEdit}
      ]
    }

第三步、父路由里面配置子路由显示的地方   <router-view></router-view>

<template>
      <div id="User">
            <div class="left">
                  <ul> 
                    <router-link to="/user/useradd">添加页面</router-link>
                     <router-link to="/user/useredit">编辑页面</router-link>
                  </ul>
            </div>
            <div class="right">
                  <router-view></router-view>
            </div>
      </div>
    
</template>

路由里面嵌套路由