2018-10-09 vue的简单复习

主流框架

vue angular react

1.vue简介

简化Dom操作

2.vue指令

 v-for=""  循环操作

 v-model=""  双向数据绑定  用于表单元素

 v-on:事件="函数名"       绑定事件  简写 @事件=""

 v-show="" 控制元素的显示或隐藏  display:none

 v-if=""   。。。。。。。。。。  visibility:hidden;

 v-else
 v-else-if   
 
 v-bind:属性='值'   绑定属性  简写 :属性='值'

 v-text  不可以解析标签

 v-html  可以解析标签

 v-once  只绑定一次

 v-pre   原样输出

 v-cloak  

3.vue过滤器

  全局:
  局部:

4.vue计算属性

    处理复杂逻辑操作

5.vue中的组件 （重要）

 作用：
    1.扩张html元素
    2.封装可重用的代码

6.组件之间的传值(难，重)

1.父传子  用属性  props:['属性']
2.子传父  用事件传  $emit
3.非父子   借助中间量

7.路由(路由的嵌套，路由的传参

8.vue中的ajax axios

-->
<div id='app'>


<my-component></my-component>

</div>

<script src='js/vue.js'></script>

<script>

//组件

    Vue.component('my-component',{
        template:`

         <div>
             <h1>这是my-component组件</h1>
             <a href="">{{msg}}</a>
             <my-child v-bind:mess='txt' @send="rcvMsg"></my-child>
           
         </div>
        `,
        data:function(){
            return{
                txt:'hello component',
                msg:''
            }
        },
        methods:{
            rcvMsg:function(a){
                this.msg=a
            }
        }
    })
    
      Vue.component('my-child',{
        props:['mess'],
        template:`

         <div>
            <h1>my-child组件</h1>
            <a href="">{{mess}}</a>
            <button @click="sendMsg">发送</button>
         </div>

        `,
          data:function(){

            return{
                text:'我是子组件中的数据，要在福组件中显示'
            }

        },
        methods:{

            sendMsg:function(){
                this.$emit('send',this.text)
            }

        }
    })
    
    //全局过滤器

    Vue.filter('过滤器的名字',function(data){
        return
    })
    new Vue({//vue实例

        el:'#app'//选择器

//        data:{//专门存放数据

//            msg:"hello vue",

//            arr:[],

//            obj:{}
//            
//        },
//        methods:{//专门存放方法

//            alet:function(){

//                alert(111)

//            }
//        },
//        filters:{//局部过滤器

//            过滤器的名字:function(data){

//                 return  
  
//            }
//        },
//        computed:{

//            名字：function(){

//                return // 逻辑操作

//            }
//        },
//        components:{

//            '组件名':{

//                template:``

//            }
//        }
        
    })