你的位置:首页 > Java教程

[Java教程]Vue组件


gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson12

 

一 创建组建的步骤

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>Vue组件</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>  </head>  <body>    <div class="test">      <zujian></zujian>    </div>    <script type="text/javascript">      var myComponent = Vue.extend({  //第一步:定义        template: '<div>我是内容</div>'      })            Vue.component('zujian',myComponent) //第二步:注册到Vue上面            var myVue = new Vue({  //第三步:创建实例化        el: '.test'      })    </script>  </body></html>

或者用一种简单的方法创建组件

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>Vue组件</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>  </head>  <body>    <template id="lili-template"> <!--注意此处必须是id,用class不行-->      <div>我是内容2</div>    </template>    <div class="test">      <zujian></zujian>    </div>    <script type="text/javascript">      var myVue = new Vue({        el: '.test',        components: {          zujian: {            template: '#lili-template'          }        }      })    </script>  </body></html>

 

二 父子组件

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>Vue组件--父子组件</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>  </head>  <body>    <div class="test"> <!--局部注册-->      <zujian></zujian>    </div>    <script type="text/javascript">      var childComponent = Vue.extend({  //第一步:定义        template: '<div >我是孩子</div>'      });      var parentComponent = Vue.extend({        template: '<div >我是父容器<child></child></div>', //注意此处要引用孩子组件        components: {          'child': childComponent        }      });      Vue.component('zujian',parentComponent); //第二步:注册到Vue上面            var myVue = new Vue({  //第三步:创建实例化        el: '.test'      })    </script>  </body></html>

或者另一种比较明了的写法:

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>Vue组件--父子组件另一种写法</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>  </head>  <body>    <div class="test">      <zujian></zujian>    </div>    <template id="parentComponent">      <div class="myParent">        我是父容器        <child></child>      </div>    </template>        <template id="childComponent">      <div class="mychild">        我是孩子      </div>    </template>        <script type="text/javascript">            var myVue = new Vue({         el: '.test',        components: {          zujian: {            template:'#parentComponent',            components: {              child: {                template:'#childComponent'              }            }          }        }      })    </script>  </body></html>

 

三 Vue组件选项

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>Vue组件--组件选项</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>  </head>  <body>    <div class="test">      <div class="lala">        <zujian></zujian>      </div>    </div>    <script type="text/javascript">      var myComponent = Vue.extend({          template: '<div>我是{{a}}{{b}}</div>',        data : function () {  //不想让MyComponent 所有的实例将共享同一个 data 对象,所以将data写成函数形式返回          return {            a: 1,            b: 2          }        },        el: function () {  //不想让MyComponent 所有的实例将共享同一个 el 对象,所以将el写成函数形式返回          return ".lala"        }      })                var myVue = new Vue({        el: '.test',        components: {          zujian:myComponent        }      })    </script>  </body></html>

 

四 Vue组件作用域(父子通信)

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>Vue组件--组件作用域</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>  </head>  <body>    <!-- 子组件模板 -->    <template id="child-template">     {{msg1}}    </template>        <!-- 父组件模板 -->    <div id="events-example">     <p>Messages: {{ messages | json }}</p>     <child :msg1="mssss">            </child>    </div>        <script type="text/javascript">      var parent = new Vue({       el: '#events-example',       data: {        messages: '我是父框架222',        mssss: 'ddddddd'       },       components: {         child: {           template: '#child-template',           props: {msg1: String }          }       }      })    </script>  </body></html>