Vue学习之基础大全

导入vue：
    <script src="vue.min.js"></script>
创建vm实例
var vm=new Vue({
        el:'#app',//指定要控制的元素
        data:{},
        methods:{}
})
在id为app的div里

一、指令学习

1.v-cloak、v-text、v-bind、v-html、v-on

<div id="app">
    <h2>1.v-cloak、-text、-bind、-HTML、-on指令</h2>
    <p>{{msg}}</p>
    <!--使用 v-cloak 能够解决 插值表达式闪烁的问题 ,还能对值拼接-->
    <p v-cloak>v-cloak:+++++++++++{{msg}}----------</p>
    <!--使用v-text没有闪烁问题,覆盖元素中的原本内容，-->
    <p v-text="msg">v-text:======================</p>

    <!--使用v-html:将msg解析为HTML格式，也会覆盖原本内容-->
    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2">111111</div>

    <!--使用v-bind:vue提供的用于绑定属性的指令 简写为：，还可以拼接字符-->
    <input type="button" value="v-bind指令" v-bind:title="mytitle +',我是拼接的'">

    <!--使用v-on：绑定事件机制  简写为@-->
    <input type="button" value="v-on指令" v-on:click="show">
    <input type="button" value="v-on指令：mouseover" @mouseover="show2">
    <br><br><br>
</div>

 2.事件修饰符 ：.stop   .prevent  .capture  .self  .once

<h2>2.事件修饰符</h2>
    <div class="inner" @click="divHandler">

        <input type="button" value="戳它" @click.once="btnHandler"><br>
        <!--默认：先btn的后div的-->
        <!-- 内层加入.stop后，没有触发外层div -->
        
        <a href="http://www.baidu.com" @click.prevent="linkclick">百度一下，你就知道</a>
        <!-- 链接加入.prevent，阻止默认行为 -->

        <!-- 外层使用.capture， 捕获机制->顺序为：先div后btn   .capture加在外层-->

        <!-- 外层使用.self，实现只有点击当前元素才会触发事件处理函数 -->

        <!-- 使用.once，当前元素只触发一次 -->

    </div>
    <div class="outer" @click="div2Handler">
        <div class="inner" @click.self="divHandler">
            <input type="button" value="戳一下" @click="btnHandler">
            <!-- 默认顺序：btn inner outer -->
            <!-- .self只会阻止自己身上的冒泡，btn outer -->
        </div>
    </div>

 3.v-model实现数据双向绑定

 <h2>3.v-model实现表单数据双向绑定</h3>
    <!-- v-bind:只能实现数据的单向绑定,从M自动绑定到V -->
    <!-- <input type="text" v-bind:value="msg3"> -->
     <input type="text" v-bind:value="msg3" v-model:value="msg3">
     <!-- v-model :实现表单元素和model中数据的双向绑定，只能运用在表单元素中
    input（radio，text，address，email...）select、CheckBox、textarea等
    -->

 4.v-for 循环遍历与迭代数字

<h2>4.v-for循环遍历普通数组与对象</h3>
    <!-- <p>{{list[0]}}</p><p>{{list[2]}}</p><p>{{list[3]}}</p> -->
    <!-- <p v-for="item in list">{{item}}</p> -->
    <!-- 注意：空格 -->
    <p v-for="(user,i) in list">Id:{{user.id}} --- 名字:{{user.name}} --- 索引:{{i}}</p>
    <p v-for="(val,key) in user">值：{{val}} --- 键：{{key}} </p>
    <p v-for="(val,key,i) in user">值：{{val}} --- 键：{{key}} --- 索引:{{i}}</p>

    <h3>4.1 v-for迭代数字</h3>
    <!-- 从1开始迭代 -->
    <p v-for="count in 4">这是第{{count}}次循环</p>
    <!-- 2.20+以后， -->
    <h4>魔道祖师</h4>
    <div>
        <label>
            Id:
            <input type="text" v-model="id">
        </label>
        <label >
            Name:
            <input type="text" v-model="name">
        </label>

        <input type="button" value="添加" @click="add">
        
    </div>
    <!-- 注意：v-for循环的时候，key属性只能使用number获取string -->
    <!-- 注意：key 使用时，必须使用v-bind属性绑定的的形式 -->
    <!-- 在组件中，使用v-for循环时，或者在一些特殊情况中，如果v-for有问题，得为它指定唯一的字符串/数字 类型 :key值 -->
    <p v-for="item in list1" :key="item.id">
        <input type="checkbox" >
       {{item.id}} --- {{item.name}}
    </p>

 5.v-show与v-if

<h2>5. v-show与v-if</h3>

    <input type="button" @click="flag=!flag" value="toggle">
    <!-- v-if：每次都会重新删除或创建元素 ，
        有较高的切换性能消耗，频繁切换情况不要用，用v-show-->
    <h3 v-if="flag">这是v-if控制的元素</h3>
    <!-- v-show：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display：none样式 ，
        有较高的初始渲染消耗，如果元素可能永远不会被显示出来被用户看到，用v-if-->
    <h3 v-show="flag">这是v-show控制的元素</h3>

6.键盘修饰符

<h2>6. 键值修饰符</h2>
    <!-- 使用时为：@keyup.xxx="function" -->
    <li>.enter</li>
    <li>.tab</li>
    <li>.delete</li>
    <li>.esc</li>
    <li>.space</li>
    <li>.up</li>
    <li>.down</li>
    <li>.right</li>
    <li>.left</li>
    <li>.keycode(数字)</li>

  <!-- 测试自定义键盘修饰符 -->

  <input type="text" v-model="name" @keyup.f2="add"> 

  // 自定义全局修饰符

  Vue.config.keyCodes.f2=113;

 二、vue中的样式

1.内联样式-style

<div id="app">
        <!-- 对象就是无序的键值对的集合,        对象中有横线的不能省略单引号 -->
        <h1 :style="{color:'red','font-weight':'200'}">这是一个h1</h1>
        <h1 :style="styleObj">这是一个h1</h1>
        <h1 :style=[styleObj,styleObj2]>这是一个h1</h1>
        
    </div>
    
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                styleObj:{color:'red','font-weight':'200'},
                styleObj2:{'font-style':'italic'}
            },
            methods:{}
        })
    </script>

 2.class样式

<head><style>
        .red{
            color: red;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em;
        }
        .change{
            color:green;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 以前的使用方式 -->
        <h1 class="red thin">大大无法想象</h1>
        <!-- 第一种使用方式，直接传递一个数组，注意：这里的class得用v-bind绑定 -->
       <h1 :class="['thin','italic']">很大，无法想象！！！</h1> 
        <!-- 在数组中使用三元表达式 -->
        <h1 :class="['thin','italic',!flag?'active':'']">很大！！！</h1>
        <!-- 在数组中使用对象来代替三元表达式提高可读性 -->
        <h1 :class="['thin','italic',{'change':flag}]">很大！！！</h1>
        <!-- 对象的属性是类名，可带引号也可不带，属性的值是一个标识符 -->
        <!-- <h1 :class="{ red:true,thin:true,italic:false}">很大！！！</h1> -->
        <h1 :class="classObj">很大！！！</h1>
        
    </div>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                flag:true,
                classObj:{ red:false,thin:true,italic:false,change:true}
            },
            methds:{}
        })
    </script>

 三、过滤器filter

 过滤器的定义语法：
       Vue.filter('过滤器的名称',function(){});// 过滤器中的function第一个参数，永远都是过滤器（管道符前面）传递过来的数据

  <div id="app">          
            <p v-html='msg'></p>

            <!-- <p>{{ msg | msgFormat }}</p> -->
            <!-- <p>{{ msg | msgFormat(' *****') }}</p> -->
            <p>{{ msg | msgFormat('夷陵老祖',' *****','魏无羡') }}</p>
    </div>
     <script>

         //定义一个全局过滤器：msgFormat
            Vue.filter('msgFormat',function(msg,arg,arg2,arg3){
                //字符串的 replace方法，第一个参数，除了可写一个字符串外，还可以定义正则
                return msg.replace(/<br>/g,arg+arg2+arg3);//将换行符换成三个参数相连的样子
            });

         var vm=new Vue({
             el:'#app',
             data:{
                 msg:'魔道祖师：'+'<br>'+'<br>'        
             },
             methods:{},
         })
     </script>             

 四、vue-resource

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!--1. 注意：vue-resource依赖于Vue，注意先后顺序 -->
    <!-- this.$http. -->
    <script src="../lib/vue-resource.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="Get请求" @click="getInfo">
        <input type="button" value="Post请求" @click="postInfo">
        <input type="button" value="Jsonp请求" @click="jsonpInfo">
    </div>
    <script>
    var vm=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            getInfo(){//发起get请求
                // 当发起get请求之后，通过 .then来设置成功的回调函数
                this.$http.get('http://www.liulongbin.top:3005/api/getlunbo').then(function(result){
                    console.log(result)
                    // 通过 result.body 拿到服务器返回的数据
                });
                // this.$http.jsonp("http://vue.studyit.io/api/getlunbo").then(result => {
                //         console.log(result.body);
                //     });
            },
            postInfo(){
                // 手动发起的表单请求默认没有表单格式，有的服务器处理不了
                // 通过post的第三个参数，设置，提交内容为普通表单数据格式
                this.$http.post('http://www.liulongbin.top:3005/api/post',{},{emulateJSON:true}).then(result=>{
                    console.log(result.body)
                })
            },
            jsonpInfo(){//发起jsonp请求
                this.$http.jsonp('http://www.liulongbin.top:3005/api/jsonp').then(result=>{
                    console.log(result.body)
                })
            }
        }
    })
    </script>

 六、生命周期函数

beforeCreate()、created()、beforeMount()、mounted()、beforeUpdate()

<div id="app">
        <input type="button" value="修改msg" @click="msg='NO'">
        <h3 id="h3">{{msg}}</h3>
    </div>
    
    <script>
    
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'----ok',
        },
        methods:{
            show(){
                console.log('执行了show方法')
            }
        },
        beforeCreate() {//遇到第一个生命周期函数，表示示例被完全创建出来之前会执行它
            console.log('beforeCreate:'+this.msg)
            // this.show() is not a function
            // 在beforeCreate（）生命周期函数执行的时候，data 和 methods 中的数据都还没有被初始化
        },
        created() {//遇到的第二个生命周期函数
            console.log('created:'+this.msg),
            this.show()
        // 在created函数中，data 和 methods都已被初始化好了
        // 如果要调用methods里的方法，最早在created里执行
            
        },
        beforeMount() {//遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但尚未把 模板 渲染到页面中
          var a=  document.getElementById("h3").innerText
            console.log('beforeMount:'+a)
            // 在beforeMount函数执行的时候，页面中的元素还没有被真正替换过来，只有之前写的一些模板字符串
        },
        mounted() {//遇到的第四个生命周期函数，表示内存中的模板已经真实的挂载到页面中，用户已经可以看到 渲染好的页面了
            var a=  document.getElementById("h3").innerText
            console.log('mounted:'+a)
            // 注意：mounted 是实例创建期间最后一个生命周期函数，当执行完mounted就表示，实例已经完全被创建好了，
            // 此时如果没有其他操作的话 这个实例静静的躺在内存中
        },
        // 接下来是运行中的两个事件
        beforeUpdate() {//这时候 表示 我们的界面还没被更新 
            console.log('beforeUpdate：界面上元素的内容'+document.getElementById('h3').innerText)//无效果，
            //加button试试 --可以看出来了
            console.log('data 中的 msg是'+this.msg)
        // 结论：
        // 当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时 data数据是最新的，页面尚未和data保持同步
        },
    })
     //结果：beforeCreate:undefined
 　　　　　　　　created:----ok
 　　　　　　　　执行了show方法
 　　　　　　　　beforeMount:{{msg}}
 　　　　　　　　mounted:----ok
　　　　　点击按钮之后打印新增：
　　　　　　　　beforeUpdate：界面上元素的内容----ok
　　　　　　　　data 中的 msg是NO
    </script>

 七、动画

1.不使用动画

<div id="app">
        <input type="button"value="toogle" @click="flag=!flag">
    <!-- 需求：点击按钮，让h3显示，再次点击，隐藏 -->
    <h3 v-if="flag">春风吹不倒，我的杨柳腰</h3>
    </div>
    <script>
    var vm=new Vue({
        el:'#app',
        data:{flag:false},
    }) 
    </script>

2.使用过渡类名实现

<!-- 自定义两组样式，来控制transition内部的元素实现动画 -->
    <style>
        .v-enter,
            /* .vue-enter【这是一个时间点】是进入之前元素的起始状态，此时还没有开始进入 */
        .v-leave-to{
            /* 是动画离开之后，离开的终止状态，此时，元素动画已经结束了 */
            opacity: 0;
            transform: translateX(80px);
        }
 
        .v-enter-active,
        /*  [入场动画的时间段]*/
        .v-leave-active{
            /* [离场动画的时间段] */
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button"value="toogle" @click="flag=!flag">
    <!-- 需求：点击按钮，让h3显示，再次点击，隐藏 -->
    <transition>
            <h3 v-if="flag">春风吹不倒，我的杨柳腰</h3>
    </transition>
   
    <!-- 1.使用transition元素，把需要被动控制的元素，包裹起来 -->
    <!-- transition 是Vue官方提供的 -->
</div>

 3.使用第三方类：animate.css

 <link rel="stylesheet" href="../lib/animate.css">
    <!-- 入场用bounceIn 离场bounceOut -->
</head>
<body>
    <div id="app">
        <input type="button"value="toogle" @click="flag=!flag">

    <!-- 使用:duration="毫秒值"来设置入场离场时的动画时长 -->
    <transition enter-active-class="bounceIn" leave-active-class="bounceOut":duration="400">
            <h3 v-if="flag">春风吹不倒，我的杨柳腰</h3>
    </transition>

    <hr>
    <input type="button"value="toogle1" @click="flag1=!flag1">
    <!-- 使用:duration="{enter:,leave:}"设置出入场时间 -->
    <transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut"
    :duration="{enter:00,leave:400}">
            <h3 v-if="flag1">春风吹不倒，我的杨柳腰</h3>
    </transition>

 4.修改v-前缀

  <style>
        .my-enter,
        .my-leave-to{
            opacity: 0;
            transform: translatey(80px);
        }       
        .my-enter-active,
        .my-leave-active{
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
    <div id="app">
       <input type="button"value="toogle2" @click="flag2=!flag2">
       <transition name="my">
            <h4 v-if="flag2">月儿在手中开呀怀儿笑，云儿在那眼前睡得早</h4>
       </transition>
   </div>

 5.使用钩子函数模拟小球动画

<style>
        .ball{
            width:15px;
            height:15px;
            border-radius: 50%;
            background-color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="快到碗里来" @click="flag=!flag">

        <transition
           @before-enter="beforeEnter"
           @enter="enter"
           @after-enter="afterEnter"> 
            <div class="ball" v-show="flag"></div>
        </transition>
       
    </div>
    <script>
        
        var vm=new Vue({
            el:'#app',
            data:{
                flag:false,
            },
            methods:{
                // 注意：动画钩子函数的第一个参数：el表示 要执行的动画的那个DOM元素，是个原生JS DOM对象
                // el是通过docum.getElementByID(''),方法获取到的原生JS对象
                beforeEnter(el){//表示动画入场之前，此时动画尚未开始，
                    // 可以在这里设置元素开始动画开始之前的起始样式
                    el.style.transform="translate(0,0)"//设置小球开始动画之前的起始位置
                },
                enter(el,done){
                    //这句话没有实际作用，不写没动画效果
                    el.offsetWidth//强制动画刷新
                    // 表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
                    el.style.transform="translate(150px,450px)"
                    el.style.transition='all 1s ease'

                    // 立马消失？这里的done就是afterEnter函数，即，done为afterEnter函数的引用
                   done()
                },
                afterEnter(el){//动画完成之后
                    // el.style.transform="translate()"
                    // console.log("执行完毕！")
                    this.flag=!this.flag
                }
            },
        })
    </script>

 6.列表的动画

 <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
    li{
        border:1px solid #999;
        margin: 5px;
        line-height: 35px;
        padding-left: 5px;
        font-size: 12px;

        width:100% 
        /* 解决设置absolute后，宽度的变化 */
    }
    li:hover{
        background-color:pink;
        transition: all 0.4s ease;
        /* 悬停时，背景过渡 */
    }
    /* 固定组合，4个，实现进入时渐变，离开时渐变 */
    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translateY(80px);
    }
    .v-enter-active,
    .v-leave-active{
        transition: all 1s ease;
    }

/* 自编样式 前一个元素离开时，让剩下的渐变移动 ，与.v-leave-active:position为absolute一起使用*/
    .v-move{
        transition:all 1s ease;
    }
    /* absolute弊端：元素离开时宽度后发生变化，
    解决：设置其宽为100%即可 */
    .v-leave-active{
        position: absolute;
    }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label for="">
                Id:
                <input type="text" v-model="id">
            </label>
            <label for="">
                Name:
                <input type="text" v-model="name">
            </label>

            <input type="button" value="添加" @click="add">
        </div>
        <!-- <ul> -->
            <!-- 在使用列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹
            需要使用transitionGroup -->
            <!-- 给 transition-group添加appear，实现页面刚展示出来的时候的入场动画 -->
            <!-- tag标签，指明将transition渲染为什么标签，不指定默认渲染为span -->
            <transition-group appear tag="ul">
                <!-- 要为v-for循环创建的元素设置动画，必须为每个元素设置 :key属性 -->
                    <!-- <li v-for="item in list" :key="item.id" @click="del(i)"> -->
                    <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                        <!-- 移除：@click 增加i元素-->
                            {{item.id}} ---{{item.name}}
                        </li>
            </transition-group>
        <!-- </ul> -->
    </div>
    
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[
                    {id:1,name:'魏无羡'},
                    {id:2,name:'蓝忘机'},
                    {id:3,name:'江澄'},
                    {id:4,name:'金子轩'}, 
                ]
            },
            methods:{
                add(){
                    this.list.push({id:this.id,name:this.name})
                },
                del(i){
                    this.list.splice(i,1)
                }
            }
        })
    </script>

八、组件

1，组件之data和method

<div id="app">
        <mycom1></mycom1>
    </div>
    
    <script>
        // 1.组件可以有自己的data数据
        // 2.组件的 data 和实例的 data 有点不一样，实例中的data可以为一个对象，但是组件中的必须是一个方法
        // 3.组件中的 data 除了必须为一个方法外，这个方法内部，还必须返回一个对象才行
        // 4.组件中的 data 数据，使用方式和实例中的 data 使用方式完全一样
        Vue.component('mycom1',{
            template:'<h3>这是全局组件</h3>',
            data:function(){
                return{
                    msg:'这是组件中的data定义的数据'
                }
            }
        })

//组件的data必须是一个function
<div id="app">
       <count></count>
       <hr>
       <count></count>
       <hr>
       <count></count>
    </div>
    <template id="tmpl">
        <div>
            <input type="button" @click="increment" value="加">
            <h3>{{count}}</h3>
        </div>
    </template>
    
    <script>
        var dataObj={count:0}
        //计数器组件，身上有个按钮，每当点击按钮，让 data 中的 count 值 + 1
        Vue.component('count',{
            template:'#tmpl',
            // data:function(){  //data是一个function
             data(){
            //   return dataObj  //使用多个组件时，数据一样
            return {count:0}  //使用多个组件时，不关联
            },
            methods:{  //methods是一个对象
                increment(){
                    this.count+=1
                }
            }
        })

　　　　　　</script>

 2.组件之创建组件的方式 - 前4个外部定义

1）使用Vue.extend：

<div id="app">
    <!-- 如果要使用组件，直接把组件名称，以HTML标签的形式引入页面即可 -->
        <!-- <myCom1></myCom1>  错误的-->
        <my-com1></my-com1> //1
        <mycom1></mycom1>   //2
</div> 
// 1.分两步
        //1.1 使用vue.extend来创建全局vue组件
       var com1= Vue.extend({
            template:'<h3>这是使用Vue.extend 创建的组件</h3>'//通过template属性，指定了组件要展示的HTML结构
        })
        // 1.2 使用Vue.components('组件的名称',创建出来的组件模板对象)
        Vue.component('myCom1',com1)
        // 使用Vue.component定义全局组件时，若使用驼峰，则引用时大写改小写两单词之间用“——”链接
        // 否则，直接写

        // 2.一步解决
        Vue.component('mycom1',Vue.extend({
            template:'<h3>外部定义一：这是Vue.component里Vue.extend创建的组件</h3>'
        }))

 

定义组件的时候，全局：Vue.component('组件名称',{})

    组件模板几种方式的创建，通过Vue.component吧组件模板电对象，注册为一个全局的vue组件，同时为这个组件起来一个名称，

    在页面以标签显示 引入组件

2）Vue.component('组件名称',{})

 // 第二种
        Vue.component('mycom2',{
            // 注意：不论是哪种方式创建出来的组件，组件的template属性的模板内容，必须有且只有一个唯一的根元素
            template:'<div><h3>外部定义二、这是使用Vue.component 创建的组件</h3> <span> 我是第二种方式里的其他标签</span></div>'
        })

3）Vue.component('组件名称',{tamplate:'#tmpl'})

 <!-- 在被控制的#App外面 使用template元素定义组件的模板结构 依旧遵循唯一根元素-->
     <template id="temp1">
        <div>
            <h3>外部定义三：这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮</h3>
            <h4>好用，不错</h4>
        </div>
    </template>

// 第三种
        Vue.component('mycom3',{
            template:'#temp1'
        })

 4) Vue.component('组件名称',对象)

 // 第四种
        var abc={ //通过对象 字面量的形式，定义了一个组件模板对象
            template:'<h3>外包定义四、这是用对象承接了template组件，</h3>'
        }
        Vue.component('mycom4',abc)

 5）内部定义

// 内部定义第二种
    var register={
        template:'<h3>内部定义二：这是用对象承接的template</h3>'
    }
    var vm2=new Vue({
        el:'#app2',
        data:{},
        methods:{},
        filters:{},
        directives:{},
        components:{//定义内部私有组件
//1.内部定义第一种
            login:{
                // template:'<h3>这是私有的 login 组件</h3>'
                template:'#templ2'
            },
            // '组件名称':组件模板
            // 2.1内部定义第二种
            // register  
            // 2.2内部定义第二种
            'register':register//同上一个作用
        },
    })
    </script>

 

3.组件之ref获取DOM元素和组件引用

<div id="app">
        <input type="button" value="获取元素" @click="getElement" ref="mybtn">
        <h3 id="myh3" ref="myh3">纵然与世无争 道不同义在心中，怎奈侠肝义胆，却成一场空</h3>
        <hr>
        <login ref="mylogin"></login>
    </div>
    <script>
        // 登录组件
        var login={
            template:'<input type="button" value="登录组件">',
            data(){
                return{
                    msg:'son msg'
                }
            },
            methods: {
                show(){
                    console.log("调用了子组件的方法")
                }
            },
        }
    var vm=new Vue({
        el:'#app',
        methods:{
            getElement(){
                // console.log(document.getElementById('myh3')) //值为h3
                // console.log(document.getElementById('myh3').innerHTML)//值为h3的内容   
　　　　　　　　　　　　// console.log(document.getElementById('myh3').innerText)//值为h3的内容 
            //    ref ：reference引用 获取DOM结点
                console.log(this.$refs.myh3.innerText)   //myh3的内容
                console.log(this.$refs.mybtn.innerHTML+'我是button的')  //我是button的
                console.log(this.$refs.mylogin.msg) //son msg
                console.log(this.$refs.mylogin.show()) //结果：调用了子组件的方法->执行了show方法  
                                                      //  结果  undefined  -> 打印语句里调用的方法没返回值
            }
        },
        components:{
            login
        }
    })
    </script>

 4.组件之组件切换

    <h3>第一种切换方式</h3>
        <a href="" @click.prevent="flag=true">登录</a>
        <a href="" @click.prevent="flag=false">注册</a>

        <login v-if="flag"></login>
        <register v-else="flag"></register>
        <hr>

   <h3>第二种切换方式</h3>
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>

        <!-- vue提供了component，来展示对应名称的组件 -->
        <!-- component是一个占位符，:is属性，指定要展示的组件的名称 -->
        <!-- <component :is="componentId"></component> -->
        <component :is="comName"></component>
        
        <!-- 总结：当前学习的vue提供的标签：
        component、template、transition、transition-group -->
        <hr>

   var vm=new Vue({

        el:'#app',

        data:{

            flag:false,

            comName:'register',//当前 component 中的 :is 绑定的组件的名称

        },

        methods:{}

   })

 

    <h3>实现切换动画</h3>
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>

        <!--通过 mode属性：out-in 设置组件切换时候的模式-->
        <transition mode="out-in"> 
            <component :is="comName"></component>
        </transition>

 5.组件之父组件向子组件传值

<div id="app">
        <!-- 值：消息，props与data -->
        <!--父组件可以在引用子组件的时候，通过属性绑定的形式（v-bind）的形式，把需要传递给子组件的数据，传过去 -->
            <com1 v-bind:parentmsg="msg"></com1>
<div>

var vm=new Vue({
        el:'#app',
        data:{
            msg:'123 - 父组件中的数据',
            datamsgFromson:null,
        },
        methods:{
            show(data){
                console.log('调用了父组件身上的show方法 --- '+data)
                this.datamsgFromson=data
            },
        },
        components:{
            com1:{ // 子组件中默认无法访问父组件中，data 上的数据、methods 里的方法,如下
                // template:'<h3>这是子组件 ---{{msg}}</h3>' //获取不到msg
                template:'<h3 @click="change">这是子组件 ---{{parentmsg}}</h3>',//获取不到parentmsg

                props:['parentmsg'],//把父组件传递过来的parentmsg属性，现在props数组中，定义一下，才能使用
                // 注意：组件中的所有 props 中的数据，都是通过父组件传递给了子组件
                // props中的数据都是只读的，

                data(){ //子组件中的data数据并不是通过父组件传递的，而是自己私有的
                    // data里的数据都是可读可写的
                    return {
                        title:'666',
                        content:'qqq',
                    }
                },
                filters:{},
                directives:{},
                components:{},
                methods: {
                    change(){ //给template里的标签添加绑定事件
                        this.parentmsg="被修改了"
                    }
                },
            },

                  com2:com2  //传递方法

        }
    })
    </script>

 

<div id="app">
        <!-- 值：methods -->
            <!-- 父组件向子组件传递方法，使用的是事件绑定机制（v-on）当自定义了一个事件属性之后，子组件就能够通过某些方式来调用 方法 -->
            <!-- <com2 v-on:fun="show"></com2> -->
            <!-- 传参1 -->
            <!-- <com2 @fun="show('哈哈')"></com2>   -->
            <!-- 未传参1 -->
            <com2 @fun="show"></com2>
    </div>

 

<template id="tmpl2">
       <div>
           <h3>这是 子组件2</h3>
           <input type="button"value="子组件中的按钮，点击触发父组件传递过来的方法" @click="myclick">
       </div>
   </template>


    <script>
        //另一种
        var com2={
            template:'#tmpl2',
            data(){
                return{
                    sonmsg:{name:'小头儿子',age:6}
                }
            },

            methods: {
                myclick(){
                    // console.log('1111')
                    // 当点击子组件按钮时，如何拿到父组件传递过来的func方法，并调用
                    //未传参2
                //    this.$emit('fun')
                    // 传参2
                    this.$emit('fun','哈哈')
                    // emit：英文原义- 触发、调用、发射
                    this.$emit('fun',this.sonmsg)
                }
            },
        }

 九、路由

1.路由的基本使用 

<!-- 1.安装路由模块 -->

    <script src="../lib/vue-router.js"></script>

 

// 2. 创建一路由对象，当导入vue-router包后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
        //在new 路由对象时，可以为构造函数，传递一个配置对象
        var routerObj=new VueRouter({
            // route //这个配置对象中的route表示 【路由配置规则】
            routes:[ //路由配置规则
            // 每个路由规则都是一个对象，这个对象身上有两个必须的属性，
              // 属性1：path - 监听那个路由连接地址
              // 属性2：component - 表示，如果路由是前面匹配到的path，则展示component属性对应的那个组件，
                //    值为组件模板对象，不是引用名称
            {path:'/',redirect:'/login'}, //这里的 redirect 完全是两码事
            {path:'/login',component:login},
            {path:'/register',component:register}
            ], 
      })

      // 此处login为组件的模板对象

        var login={

            template:'<h3>登录组件</h3>'

        }

        //此处login为组件名称，不是对象，不能放到路由里，应选择上面的

         Vue.component('login',{

         template:'<h3>登录组件yaya</h3>'

         });

       var register={

           template:'<h3>注册组件</h3>'

       }

<div id="app">

        <!-- router-link:默认渲染为a标签 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>


        <!-- 这是vue-router 提供的元素，专门用来当做占位符的，将来路由规则、匹配到的组件，就会展示到这个router-view中
        可视router-view为占位符 -->
 
                <router-view></router-view>        
 
    </div>

 

 var vm=new Vue({
        el:'#app',
        data:{},
        methods:{},
        router:routerObj //将路由规则对象注册到vm实例上，用来监听URL变化，然后展示组件

    })

 2.路由之修改样式：

<transition mode="out-in">
                <router-view></router-view>        
 </transition>

一般样式如下：

    .v-enter,

    .v-leave-to{

        opacity: 0;

        transform:translateX(150px);

    }

    .v-enter-active,

    .v-leave-active{

        transition: all 0.5s ease;

    }

/* 修改样式第一种：修改自带的类样式  */

    .router-link-active{

        color:red;

        font-weight: 800;

        /* font-style: italic; */

        font-size: 20px;

        text-decoration: underline;

        background-color: green;

    }

/* 修改样式第二种，自定义样式，传给linkActiveClass */

    .myactive{

        color:green;

        font-weight: 400;

        background-color: pink;

    }

//增加linkActiveClass如下：

   var routerObj=new VueRouter({

 

            routes:[ //路由配置规则

 

            {path:'/',redirect:'/login'}, //这里的 redirect 完全是两码事

            {path:'/login',component:login},

            {path:'/register',component:register}

            ],

            // 修改样式第二种：通过linkActiveClass设置样式

            linkActiveClass:'myactive'

        })

 3.路由的嵌套

    <div id="app">
        <router-link to="/account">Account</router-link>
        <router-view></router-view>
    </div>

    <template id="tmpl">
        <div>
            <h3>这是Account组件</h3>
            <router-link to="/account/login">登录</router-link>
            <router-link to="/account/register">注册</router-link>

            <!-- 放置子路由组件的位置 -->
            <router-view></router-view>
        </div>
    </template>
  
    <script>
        // 组件的模板对象
        var account={
            template:'#tmpl'
        }
        var register={
            template:'<h4>注册组件</h4>'
        }
        var login={
            template:'<h4>登录组件</h4>'
        }
        var router=new VueRouter({
            routes:[
                {   path:'/account',
                    component: account,
                    children:[  //children：子路由，子路由的path前面不用带斜线，否则永远以根路径开始请求，不方便用户立即URL地址
                         {path:'login',component:login},
                         {path:'register',component:register}
                    ],
                },
            ]
        })

    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{},
        router,
    })
    </script>

 4.路由之使用命名规则实现经典布局

<style>
        .header{
            background-color: orange;
            height:80px;
        }
        .left{
            background-color:lightgreen;
            flex:2
        }
        .main{
            background-color: lightpink;
            flex:8;
        }
        .container{
            display: flex;
            height: 600px;            
        }
        h2{
            margin:0;
            /* padding:0; */
            font-size: 16px;
        }
        html,body{
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-view></router-view>
        <div class="container">
            <router-view name='left'></router-view>
            <router-view name="main"></router-view>
        </div>
    </div>

    <script>
        // 模板
        var header={
            template:'<h2 class="header">Header头部区</h2>'
        }
        var leftBox={
            template:'<h2 class="left">侧边栏区域</h2>'
        }
        var mainBox={
            template:'<h2 class="main">主题、体区域</h2>'
        }

    // 创建路由对象
    var router = new VueRouter({
        routes:[
            {
                // {path:'/left',component:leftBox},
                // {path:'/main',component:mainBox}
                path:'/',components:{
                    'default':header,
                    'left':leftBox,
                    'main':mainBox
                }
            },           
        ]
    })
    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{},
        router
    })
    </script>   

 十、vuex

//项目入口     ---main.js文件

// console.log('ok')
import Vue from '../node_modules/vue/dist/vue.js'
// 1.运行cnpm i vue-x -S
// 2。导入vuex
import Vuex from "vuex"
// 3.注册vuex到vue中
Vue.use(Vuex)
// 4.new Vuex.Store()实例，得到一个数据仓储对象
var store=new Vuex.Store({
    state:{
        count:0
        // 如果在组件中想要访问，store中的数据，只能通过this.$store.state.名称
        // 
    },
    // 注意：操作store中的state值，通过调用mutations提供的方法，
    // 子组件想要调用mutation中的方法，只能使用this.$store.commit('方法名')
    // mutations的参数列表中，最多支持两个参数，参数1：state状态，参数2：通过commit传递过来的值
    mutations:{
        increment(state){
            state.count++;
        },
        subtract(state,obj){
            // console.log(obj);
            state.count-=(obj.c+obj.d);
        },
       
    },
    getters:{
        // 注意：这里的getters，只负责对外提供数据，不负责修改数据，修改state中的数据，找mutations
        optCount:function(state){
            return  '当前最新的count值是：'+state.count
        }
    }
}) 


import app from './app.vue'

var vm=new Vue({
    el:'#app',
    render:c=>c(app),
    //5.将vuex创建的store挂载到vm实例上
    store:store
    // 只要挂载到了vm上，可以全局使用了
})

组件一使用：

<template>
    <div>
        <input type="button" value="减少" @click="del">
        <input type="button" value="增加" @click="add">
        <input type="text" v-model="this.$store.state.count">
    </div>
</template>
<script>
export default {
    methods:{
        add(){
            // this.$store.state.count++;
            // 不符合vuex的设计概念
            this.$store.commit('increment');
        },
        del(){
            // this.$store.state.count--;
            this.$store.commit('subtract',{c:3,d:4});
        }
    }
}
</script>

组件二使用：

<template>
    <div>
        <!-- <h3>当前数量为：{{this.$store.state.count}}</h3> -->
        <h3>{{this.$store.getters.optCount}}</h3>

    </div>
</template>
<script>
export default {
    
}
</script>