3、Vue数据绑定与组件化开发

1、Vue数据绑定

1.1普通函数与箭头函数this指向问题

  • ES5的普通函数，this指向是指向了调用者，比如vue实例的方法（在methods中声明了一个方法）是由vue实例vm调用的,所以this指向vm
  • 箭头函数的this指向它的调用者所在的上下文，也就是vm实例所在的上下文（定义vm的父类），即window

 

 

1.2表单输入绑定

 

1.3数据的双向绑定

 v-model只能应用在input 、 textare 、select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
</div>
<script src="../vue基本使用/vue.js"></script>
<script>
    // 数据的双向绑定， v-model
    new Vue({
        el:"#app",
        data(){
            return{
                msg:"鲁班",
            }
        }
    })
</script>
</body>
</html>

 

 

 

2.组件化开发

2.1全局组件

声明组件 使用组件

// 声明一个TestBtn全局组件
vue.compoment('TestBtn',{
    data(){
 
    },
    methods:{

    },
    computed:{

    },
    created(){
 
    }
})

 

 

 

2.2局部组件

声明组件 挂载组件 使用组件

// 声明组件
let Son={
    data(){
 
    },
    methods:{

    },
    computed:{

    },
    created(){
 
    }
}

let Vheader={
    data(){
 
    },
    methods:{

    },
    computed:{

    },
     // Vheader组件中使用Son组件
        template:`
        <div class="app">
            <Son />
        </div>
        `,
    // 挂载Son组件到Vheader组件
        components: {
            Son
        }
    created(){
 
    }
}

 

 

2.3组件的嵌套

数据：单向数据流

 

2.4父子组件传值

　　父=》子

  • 在子组件中声明props 只要声明了该属性，那么就可以在组件中任意使用　　
  • 在父组件通过绑定自定义属性 挂载数据属性　　

 

　　子=》父

  • 在子组件中通过this.$emit("方法名",值)
  • 在父组件中绑定自定义事件

 

2.5平行组件传值

bus公交车对象：绑定$on和$emit

let bus = new Vue();

A=>B传值

$emit('函数名',值)===>$on(“函数名”,()=>{})

 

 <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
   </head>
   <body>
   <div id="app">
       <App />
   
   </div>
   <script src="../vue基本使用/vue.js"></script>
   <script>
       // A==>B   B要声明事件 $on("事件名称",(){})
       // A要触发事件  $emit("A组件中声明的事件","传入的参数")
       // 前提是 前提是这两个方法必须绑定在同一个实例化对象(bus)
   
       // 声明一个bus对象
       let bus= new Vue();
       Vue.component("Test2",{
           data() {
               return {
                   text:''
               };
           },
           //定义模板
           template:`
               <h2>{{this.text}}</h2>
           `,
           methods:{
   
   
               },
           created(){
               //声明事件
               bus.$on("testData",(val)=>{
                   this.text = val;
               })
           }
   
       });
       //声明一个全局组件,全局组件不用挂载就可以使用，复用性高
       Vue.component("Test",{
           data() {
               return {
                   msg:"我是子组件的数据"
               };
           },
           //定义模板
           template:`
           <button @click="HandlerClick">传递</button>
           `,
           methods:{
               HandlerClick(){
                    //触发事件
                    bus.$emit("testData",this.msg);
               }
           },
   
       })
   
       //声明Vheader组件
       let Vheader={
           data() {
               return {}
           },
           // 定义模板，并使用Test组件
           template:`
           <div class="app">
               <Test />
               <Test2 />
           </div>
           `,
       }
   
       // 声明App组件
       let App={
           data() {
               return {}
           },
           // 使用Vheader组件
           template:`
           <div class="app">
               <Vheader />
           </div>
           `,
           // 挂载Vheader组件
           components: {
               Vheader
           }
       }
       new Vue({
           el:"#app",
           data(){
               return{}
           },
           // 挂载组件
           components:{
               App
           }
       })
   </script>
   </body>
   </html>

 

posted @ 2019-10-04 00:18  Mr_Yun  阅读(542)  评论(0)    收藏  举报