vue 笔记

vue实例可以看做是一个大组件
mvvm数据的双向传递

在vue中如果要获取原生的元素或自定义组件，可以通过ref属性来获取，给要获取的标签中添加ref=“name(自定义)”属性，在vue组件中使用this.$refs.name的方式来获取原生元素或组件，如果获取的是原生元素获取到的就是原生元素，如果是组件，获取到的就是原生组件(this.$refs.name(ref名).data(组件内部数据名(data内部数据名,method内部方法名)))

var app=new Vue({
   el:“#app”,  
   data:{  //存放数据
   //使用方法
  //<p>{{xxx}}</p>
        xxx:“hello”   //把div内的内容替换为hello
        aaa:{
        aaab:“xxx”
        aaaa:“xxx”
        }
       bbb:[“xxx”,“xxx”]
    }
   methods:{  //存放事件
   //只要使用就会调用
    //使用方法 
   //<p>{{事件名()}}</p>
    事件名(){
     //要用this调用
      this.xxx=“123”  把xxx的文本替换为123
      this.xxx+=“123”  在xxx后面加123
      },
    },
   directives:{//自定义局部指令
                使用方法<p v-color></p>　　//不传参数

               或<p v-color=“xxxx”></p>　　//传参数
      “color”:{
           bind(el,obj){
             el.style.color=obj.value
            }
        }
   },
   filters:{//自定义局部过滤器
                    使用方法
                    <p>{{msg ┃过滤器名}}
        过滤器名(value){
             ……
        return   value
         }
   },
   components:{//自定义局部组件
       “标签名”:{
           template:“#template名”,
           components:{
                 “子组件标签名”:{//使用时只能写在父组件内(不能写在vue实例中)
                   template:“#子组件id名”
                   }
            }
        }
   },
   computed:{//专门用于定义计算属性
　　//会把结果缓存，如果返回值相同不继续调用
            //使用方法
           //<p>{{obj}}</p>
      obj(){       
         let res=……
        return  res
       }
    },
    watch:{//当监听的属性发生变化时执行指定函数
         要监听的属性名(newvalue,oldvalue){
                newvalue是改变后的属性值
                oldvalue是改变前的属性值
          }
    }
})

 

 

自定义全局指令(定义在vue实例之前，否则会报错)
第一个参数:指令名称
第二个参数:对象
在自定义指令时，指令名称前不用加v-但在使用时需要写v-color，如:
<p v-color></p>

或<p v-color="xxxx"></p>
bind:指令被绑定到元素上的时候执行
inserted:绑定指令的元素被添加到父元素上的时候调用

Vue.directive(“color”,{
  //这里的el就是被绑定指令的那个元素
  //binding是传进来的参数
  bind:function(el,binding){
   el.style.color=binding.value
   }
  inserted:function(el){
   ……
   }
})

定义全局过滤器(只能在插值语法和v-bind中使用)可连续使用
第一个参数是过滤器名称
第二个参数是处理数据的函数，默认情况下函数接收一个参数，这个参数就是要被处理的数据，第二个参数为从html中传递过去的参数
最后需要把数据返回出去
使用方法:
msg为要处理的数据
<p>{{msg ┃过滤器名称1 ┃过滤器2}}</p>
可以传递参数
<p>{{msg ┃过滤器名称1(123)}}</p>

Vue.filter(“过滤器名称”,function(value,str){
     ……
     return  value
})

构造全局组件
注意点:
在注册组件时如果用了驼峰命名，那么在使用时需要转换成短横线分隔命名，如，标签名，方法名为myFather，那么在使用时需要写成my-father，使用组件传递数据时标签与属性名都不能用驼峰命名(都使用短横线命名就没问题了)

创建完后需要写在vue容器内
方法一

var a1=Vue.extend({
//只能有一个跟元素
   template:“<div>123456</div>”
})
Vue.component(“xxx”(标签名),a1)

方法二

let obj={
  template:“<div>123456</div>”
}
Vue.component(“xxx”,obj)

方法三(建议使用)
在body标签内创建script标签

<template id=“b”>
  //添加模板
   <div>123456</div>
</template>
Vue.component(“xxx”,{
  template:“#b”
})

使用方法

<div id=“app”>//vue容器
    <自定义组件名></xxx>
</div>

在template组件的其他属性data,methods,components(使用方法与在vue实例中一样，只是定义方法不同。一个页面内多次复用组件并用方法改变过data值，其他组件的data不会改变)

Vue.component(“xxx”,{
     template:“#template id名”,
     methods:{
        函数名(){
         ……
         }
      },
     data(){//data必须为函数
      return  {
          msg:“xxxxx”
       }
     },
     components:{
     //定义子组件用法与vue实例相同(使用时只能写在父组件内(不能写在vue容器内))
       “标签名”:{
            template:“#子组件id名”
        }
      }
})

父向子组件的data数据传递
默认情况下子组件不能使用父组件的data数据，若要子组件可以用父组件的数据

1,需要在子标签内添加   :name(自定义名)=“需要传递的数据名”       来传递数据

2,把子组件内传递的数据名改为{{name}}来显示数据

3,在js中创建的子组件内加上props:[“name”]，来接收数据
如
html内

<template id=“fathet”>
   <div>
    <p>{{father}}</p>
    <son :name=“son1”></son>
   </div>
</template>

<template id=“son”>
   <p>{{name}}</p>
</template>

js内

Vue.component(“father”,{
   template:“#father”,
   data(){
     return {
       father:“父组件”,
       son1:“子组件”
      }
    },
   components:{
      “son”:{
           template:“#son”,
           props:[“name”]
      }
   }
})

父组件向子组件methods函数传递(与data传递不同)
默认情况下子组件不能用父组件的函数，如要使用
1,需要在父组件内的子标签上添加@son-fun(自定义(不能用驼峰命名))=“要传递的父方法名”，来传递函数
2,在子组件内的标签中添加@click=“子组件方法名”，来获取函数
3,在创建的子组件内添加方法并写this.$emit(“son-fun”)来接收参数
如
html内

<template id=“fathet”>
   <div>
    <son @son-fun=“Fun”></son>
   </div>
</template>

<template id=“son”>
      <input type=“button” @click=“sonFun”/>
</template>

js内

Vue.component(“father”,{
   template:“#father”,
   components:{
      “son”:{
           template:“#son”,
           methods:{
               sonFun(){
                    this.$emit(“son-fun”,“子组件传递的参数”(选填))
               }
           }
      }
   },
  methods:{
    Fun(data(父组件接收的参数)){
        console.log(data)
    }
  }
})

 

子组件向父组件传递数据

1,在创建的父组件内添加一个方法fun来接收数据fun(data){}

2,把方法添加到子组件内@son-fun(自定义)=“fun”

3,在js中创建的子组件内添加一个方法来传递子组件的数据

methods:{
   子组件方法名(){
        this.$emit(“son-fun”,“子组件向父组件传递的数据”(选填，如果写了需要在父方法接收一个参数))
   }
}

 

html

<template id=“father”>
  <div>
       <son @son-fun=“fun”></son>
       <p>{{name}}</p>
  </div>
</template>

js

Vue.component(“father”,{
   template:“#father”,
   components:{
      “son”:{
           template:“#son”,
           methods:{
               sonFun(){
                    this.$emit(“son-fun”,“name”(子组件传递的参数)(选填))
               }
           },
          data(){
             return {
                 name:“zs”
             }
          }
      }
   },
  methods:{
    fun(data(接收子组件的参数)){
        console.log(data)
    }
  }
})