vue 组件1

aircoder

于 2019-01-30 17:12:30 发布

阅读量252

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/aircoder/article/details/86706010

版权

vue学习专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
       
        <div id="components-demo">
                <button-counter></button-counter>
              </div>

              <p>

<div id='title1'>
                <blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
</div>
      
</body>
<script>
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

new Vue({ el: '#title1' })

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})   

new Vue({ el: '#components-demo' })
</script>
</html>