Vue学习笔记[更新中...]

1.怎么使用Vue组件?

组件怎么用? 3个步骤

 定义组件对象 const (在组件对象中除了有template也可以像Vue实例中定义data、methods、computed和生命周期函数)
 在Vue实例中注册 (es6中同名可省略value)
 使用组件 (在实例挂载范围内，以标签形式写上注册组件的名称)

补充：常用的生命周期函数

beforeMount(){},//将template中指向html编译vue模板 此时还没有完成模板中内容渲染
mounted(){},//将template中html编译模板进行数据渲染 并且将渲染完成的数据在内存中形成虚拟dom替换template指向dom
beforeUpdate(){},//当组件中data数据发生变化时,会触发beforeUpdate,此时页面中数据还是原始数据
updated(){},//此时页面中数据和data数据一致
beforeDestroy(){},//销毁vue实例之前触发方法
destroyed(){}//vue实例已经触底销毁 监听机制 全部消失

2.父子组件怎么通信?

2-1：组件的分类(根据组件的注册位置分类)：全局组件、局部组件

全局组件 ——> 直接注册Vue实例根在所有组件中可用

    //参数1: 组件名称  参数2: 指定组件内容的配置对象
	Vue.component('register',{  //注意:这里的组件名称register如果使用驼峰命名法，需要改为-连接符
    Vue.component('usersList',{
        template:"<div><h3>用户注册组件</h3></div>"
    });

局部组件 ——> 注册在vue实例内部局部组件只能组件内部可用


// 这里一共定义了两个组件：分别是login和register 
<script>
   //定义组件对象
   const login = { //定义一个登录
       template:"<div><h3>用户登录局部组件</h3></div>"
   };
   const app = new Vue({
       el:"#app",
       data:{

       },
       methods:{

       },
       components:{ //在Vue实例中注册组件都为局部组件
           login,//es5 login:login //es6  login,
           register:{ //定义一个注册组件
               template:"<div><h3>用户注册局部组件</h3></div>"
           }
       }
   });
</script>

全局和局部同时用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件：全局与局部的使用</title>
</head>
<body>
    <div id="app">

        <h1>{{msg}}</h1>

        <!--使用全局组件-->
        <users-list></users-list>


        <!--使用局部组件-->
        <emps></emps>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>

    //vue中组件   全局组件 直接注册Vue实例根 在所有组件中可用  局部组件:注册在vue实例内部 局部组件只能组件内部可用

    //参数1:组件名称  参数2:组件模板配置对象  //注意:在定义组件名称时如果组件名称使用驼峰命名法 在使用组件时 单词必须全部小写,同时使用-作为分隔使用
    Vue.component('usersList',{
        template:"<div><h2>用户列表-{{count}}---{{counts}}---{{counts}}</h2><button @click='increment'>+1</button></div>",
        data(){ //用来定义组件数据
            return {
                count:0
            }
        },
        methods:{
            increment(){
                this.count++;
            }
        },
        computed:{
            counts(){
                return this.count*this.count*this.count;
            }
        },
        //定义组件自己生命周期
    });//定义一个全局组件

    //定义员工列表组件配置对象
    const emps = {
        template:"<div><h2>员工列表</h2></div>",
        data(){
            return{};
        },
        methods:{

        },
        computed: {}
    };

    const app = new Vue({
        el:"#app",
        data:{
            msg: "Vue 中组件开发"
        },
        methods:{},
        computed:{},
        components: {  //用来定义一些列局部组件
            emps,
        }
    });
</script>

2-2：父子组件的使用

父组件向子组件之间传递数据：用组件标签的value传，子组件用props数组接收

props：用来给组件传递相应静态数据或者是动态数据的

注意！ props是单项数据流，不要试图在声明组件的时候通过methods方法去改变父组件中相应的值

//1.声明组件模板对象
    const login = {
        template:'<div><h2>欢迎: {{ name }} 年龄:{{ age }}</h2><button @click='donotChange'></button></div>',
        props:['name','age'],
        //不要试图去改变age，因为prosps项数据流，不能流向父组件，不能去改变父组件中的age
        methods:{
           donotChange(){
               age++;//错误！这里的age是父组件的数据，如果想改变age，可以自己在子组件中的data定义
           },
        data(){
            return{
                ziage:this.age; //把父组件中的age赋值给子组件直接去改变ziage就不会报错了
            }
        }
        }
    }
 
//2.注册局部组件
    const app = new Vue({
        el: "#app",
        data: {
            username:"小陈陈",
            age:23
        },
        methods: {},
        components:{
            login //Vue实例中注册的父组件
        }
    });

//3.使用组件：key是子组件的props元素，value是父组件中的data元素
	 <login :name="username" :age="age"></login>  //使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化

父组件向子组件之间传递事件：事件不但可以父传子，也可以子传父

父传子

在子组件中调用父组件传递过来的相关事件必须使用 this.$emit('函数名') 方式调用

//1.声明组件
    const login = {
        template:"<div><h1>我爱学习 {{ uname }}</h1> <input type='button' value='点我' @click='change'></div>",
        methods:{
            change(){
                //点击子组件的change，执行aaa,aaa在使用组件中找到父组件是findAll,实际执行的是
                // 父组件中的findAll
                this.$emit('aaa');  //这里只有一个参数，就是父传子，参数就是传过来的函数名
            }
        }
    }
    
 //2.注册组件
    	const app = new Vue({
        el: "#app",
        data: {
            username:"小陈"
        },
        methods: {
            findAll(){  //父组件的事件函数  将这个函数传递给子组件
                alert('Vue 实例中父组件定义的方法');
            }
        },
        components:{
            login,//组件的注册
        }
    });

//3.使用组件
	<login  @aaa="finAll"></login>

子传父

$emit('传来的函数名'，'参数1'，'参数2'，'参数3'...) 参数1,2,3...是发出去的数据，若参数较多还可以传对象

//1.声明组件
    const login = {
        template:"<div><h1>我爱学习 {{ uname }}</h1> <button @click='change'>点我</button></div>",
        data(){
            return { //这里是子组件中要传给父的数据
                uname:Kyle,
                pwd:123
            }
        },
        props:['name'],
        methods:{
            change(){
                //点击子组件的change，执行aaa,aaa在使用组件中找到父组件是findAll,实际执行的是
                // 父组件中的findAll
                this.$emit('aaa',uname,pwd);  //多个参数
                this.$emit('aaa',{uname:'Lauren',pwd:123});  //多个参数变为一个对象
            }
        }
    }
    
 //2.注册组件
    	const app = new Vue({
        el: "#app",
        data: {
            username:"小陈"
        },
        methods: {
            findAll(uname,pwd){  // 接收$emit发出的多个参数
              this.username = uname; // 子组件改变父组件数据
              this.password = pwd;
            }
            
            findAll(obj){  // 接收$emit发出的对象
             this.username = obj.uname;
             this.password = obj.pwd;
            }
        },
        components:{
            login,//组件的注册
        }
    });

//3.使用组件
	<login  @aaa="finAll"></login>    <!--这里只需要绑定好事件名即可-->

3.怎么使用路由?

路由怎么用? 6个步骤

引入路由Js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  //vue 路由js

创建组件对象

const login = {
  template:'<h1>登录</h1>' //声明组件模板
};

const register = {
  template:'<h1>注册</h1>',
  data(){
      return{}
  },
  methods:{ }
};

定义路由对象，并定义规则

 //创建路由对象
const router = new VueRouter({
  routes:[
    { path:'/',redirect:'/login'},  //path没写是默认路由,redirect: 默认路由重定向到哪个路由
    {path:'/login',name:login,component:login},   //path: 路由的路径   name：类似于id，唯一的名称   component:路径对应的组件名称
    {path:'/register',name:register,component:register}
     
      //除了上面的平级路由，还可以放子路由
     { //外层路由：里面有2个子路由，分别是add和edit
        path: '/edit',
        name: 'edit',
        component: products,
        children:[ //子路由 注意:子路由的path属性不能使用"/"开头
          {path: "add",name: "add", component: add},
          {path: "edit",name: "edit", component: edit}
         ]
     },
  ]
});

将路由对象注册到Vue实例

const app = new Vue({
  el: "#app",
  data: {
    username:"小康",
  },
  methods: {},
  router:router   //设置路由对象，此时也可写成router,
});

使用：el挂载的div中，使用

<!--显示路由的组件-->
<router-view></router-view>

切换路由【2种方式】：使用标签切换路由；通过事件函数的方式动态切换路由

<!--方式一： 标签切换-->
<router-link to="/login" tag="button">我要登录</router-link>
<router-link to="name:register" tag="button">点我注册</router-link>
<!--或者使用下面的方法 效果相同-->
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

 <!--方式二： 事件函数切换-->
 <button @click="test">切换路由</button>

  test(){
     //this.$router.push("/emps");// 代表切换路由路径[简写]
     //this.$router.push({path:'/users'});//路径方式切换路由 [全写]
      
      // [推荐]名称方式切换路由： 注意！多次切换相同路由会报错，建议加入手工判断或者官方代码
      if(this.$route.emps != Emps){ // 手工判断,Emps为路由的name，表示不是当前路由才去切换
        this.$router.push({name:"emps"});// 
  	}  
  }

4.路由怎么传参?

第一种方式传递参数 queryString传统方式

切换路由时通过?号拼接参数

 <router-link to="/login?id=21&name=zhangsan">我要登录</router-link>

在组件中获取参数

const login = {
  template:'<h1>用户登录</h1>',
  data(){return {}},
  methods:{},
  created(){
    console.log("=============>"+this.$route.query.id+"======>"+this.$route.query.name);
  }
};

第二种方式传递参数 restful

通过使用路径方式传递参数

<router-link to="/register/24/张三">我要注册</router-link>

var router = new VueRouter({
  routes:[
    {path:'/register/:id/:name',component:register}   //定义路径中绑定key,在router-link的to属性后面拼接对应参数，获取key
  ]
});