一、数据的绑定
1.数据绑定
在vue中数据通过data属性进行绑定，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> {{name}} </div> <script> new Vue({ el: '#app', data: { name:'python' } }) </script> </body> </html>
二、组件的使用
1.全局组件和局部组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <zujian_all></zujian_all> </div> <script> // 局部组件注册,定义局部组件 var zujian_a={ template:'<div>局部组件1</div>', }; // 全局组件 Vue.component( 'zujian_all', { // 在全局中使用绑定的数据 {{name}} template:'<div>全局组件 <zujian_a></zujian_a> {{name}} </div>', // components 将局部组件注册到全局组件中 components:{ zujian_a, }, // data属性指定绑定的数据内容，可以在当前的组件中进行使用 data:function(){ return {name:'python'} } } ) new Vue({ el: '#app', }) </script> </body> </html>
三、组件传值
父组件给子组件传值，组件中通过props属性传递数据，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <zujian_all></zujian_all> </div> <script> // 局部组件注册,定义局部组件 var zujian_a={ template:'<div>局部组件1 {{pos}} </div>', // 在子组件中通过props属性定义接受值的名称 props:['pos'] }; // 全局组件 Vue.component( 'zujian_all', { // 在全局组件中调用子组件时，通过v-bind指定子组件中pos接受父组件中的哪个值 template:'<div>全局组件 <zujian_a v-bind:pos="name"></zujian_a> </div>', // components 将局部组件注册到全局组件中 components:{ zujian_a, }, // data属性指定绑定的数据内容，可以在当前的组件中进行使用 data:function(){ return {name:'python'} } } ) new Vue({ el: '#app', }) </script> </body> </html>
子组件给父组件传值，通过$emi将数据传递个父组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello Ming</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id='app'> <zujian_all></zujian_all> </div> <script> var zujian_a={ template:'<div> 局部组件A <button v-on:click="isupload"> 上传</button> </div>', methods:{ isupload:function(){ this.$emit('isListen','hello') // 子元素上的点击事件成功后，通过 $emit 将事件和数据传递给父组件 } } } Vue.component('zujian_all',{ template:'<div> 全局组件 <zujian_a v-on:isListen="isShow"></zujian_a> </div>', components:{ zujian_a }, methods:{ isShow:function(data){ alert(data) //data参数接受子组件传递的值 } } }) new Vue({ el:'#app' }) </script> </body> </html>
