组件

作者: 雨笑_e29c | 来源:发表于2018-09-19 14:42 被阅读0次

全局变量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <div id='app'>

      <my-component></my-component>

      <my-component></my-component>

  </div>

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    <script>

      全局组件

        Vue.component('my-component',{

            template:` 

                  <ul>

                        <li>

                            <a href="">首页</a>

                        </li>

                        <li>

                            <a href="">详情页</a>

                        </li>

                  </ul>

            `

        })

      new Vue({

          el:'#app',

          data:{},

          methods:{},

          filters:{},

          computed:{},

      })

    </script>

</body>

</html>


局部变量

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<div id="app">

<my-component></my-component>

<my-component></my-component>

<my-component></my-component>

<my-component></my-component>

<my-component></my-component>

</div>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

    new Vue({

    el:"#app",

    data:{},

    methods:{},

    computed:{},

    components:{

    "my-component":{

    template:`<p>优秀</p>`

    }

    }

    })

    </script>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <div id='app'>

      <my-father></my-father>

  </div>

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

    <script>

      Vue.component("my-father",{

          template:`

              <div>

                  <h1>这是父组件</h1>

                  <my-child v-bind:num='msg'></my-child>

              </div>

            `,

          data:function(){

              return{

                  msg:'我是福组件中的值'

              }

          }

      })

      Vue.component("my-child",{

          props:['num'],

          template:`

              <div>

                <ul>

                    <li>这是组组件的内容1</li> 

                    <li>这是组组件的内容2</li> 

                    <li>这是组组件的内容3</li>

                </ul>

                <a href='#'>{{num}}</a>

            </div>

            `

      })

      new Vue({

          el:"#app"

      })

    </script>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <div id='app'>

      <my-component></my-component>

  </div>

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

  <script>

    Vue.component('my-component',{

        template:`

              <div>

                  <p>{{mess}}</p>

                  <button @click='alt'>按钮</button>

              </div>

        `,

        data:function(){

            return{

                mess:'我是组件中的值'

            }

        },

        methods:{

            alt:function(){

                alert('bdsjjf')

            }

        }

    }) 

    new Vue({

        el:"#app",

        data:{

            msg:'jsdkvg'

        },

        methods:{

        }

    })

    </script>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <div id='app'>

      <my-father></my-father>

  </div>

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

  <script>

      Vue.component('my-father',{

          template:`

                <div>

                    <my-tit v-bind:tit='title'></my-tit>

                    <my-fruit v-bind:fruList='list'></my-fruit>

                </div>

          `,

          data:function(){

              return{

                  list:['apple','pear','banana'],

                  title:'水果列表'

              }

          }

      })

      Vue.component('my-tit',{

          props:['tit'],

          template:`

                <h2>{{tit}}</h2>

              `

      })

      Vue.component('my-fruit',{

          props:['fruList'],

          template:`

                <ul>

                    <li v-for="value in fruList">{{value}}</li>

                </ul>

            `

      })

      new Vue({

          el:'#app'

      })

    </script>

</body>

</html>


复习

过滤器:

        全局

        Vue.filter('过滤器的名字',function(data){ return })

        {{num|过滤器的名字}}

        <p>{{number}}</p>

        局部

        new Vue({

            filters:{

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

              }

            },

            computed:{

              number:function(){

              }

            }

        })

    计算属性:用来处理复杂逻辑操作  后期更容易维护

组件(component):组件化开发 组件可以扩展 HTML 元素,封装可重用的代码。

    全局组件

    局部组件

    注:

        组件名不可以使用已经存在的html元素

        组件中的data数据是一个函数,并且要有一个返回值


相关文章

网友评论

      本文标题:组件

      本文链接:https://www.haomeiwen.com/subject/tlybnftx.html