vue组件

@、
于 2021-06-01 16:57:12 发布
阅读量78
点赞数 1
文章标签： vue
本文链接：https://blog.csdn.net/weixin_43608642/article/details/117447137
版权
vue组件

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h3 style="color: crimson">组件基础</h3>
      <p style="color: aqua">基础用法:组件的使用都是先注册以便vue能够识别</p>
      <shengchankuaile></shengchankuaile>
      <p style="color: aqua">通过prop向子组件传递数据(titles)</p>
      <shengchankuaile titles="六一儿童节快乐！"></shengchankuaile>
      <p style="color: aqua">通过prop使用v-for向子组件传递数据(titles)</p>
      <shengchankuaile
        v-for="item of message"
        :keys="item.id"
        :titles="item.text"
      ></shengchankuaile>
      <p style="color: aqua">通过prop向子组件传递数组(posts)</p>
      <p>-------电影列表-------</p>
      <dianying v-for="post of posts" :keys="post.id" :post="post"></dianying>
      <p style="color: aqua">监听子组件事件：放大且由子组件控制放大值</p>
      <div :style="{ fontSize: postFontSize + 'em' }">
        <fangda
          :context="context"
          v-on:enlarge-text="postFontSize += $event"
        ></fangda>
      </div>
      <p style="color: aqua">监听子组件事件：放大使用方法接受参数</p>
      <div :style="{ fontSize: postFontSize1 + 'em' }">
        <fangda :context="context" v-on:enlarge-text="fdevent"></fangda>
      </div>
      <p style="color: aqua">组件上使用v-model</p>
      组件输入：
      <shuru v-model="searchText"></shuru>
      <p style="color: aqua">通过插槽分发内容</p>
      <div class="demo">
        <alert-box>好饿好饿好饿好饿呀！</alert-box>
      </div>
    </div>
  </body>
</html>
<style>
  .demo {
    width: 299px;
    padding: 25px 35px;
    margin-top: 1em;
    margin-bottom: 40px;
    overflow-x: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #eee;
    border-radius: 2px;
  }
  .demo-alert-box {
    padding: 10px 20px;
    background: #f3beb8;
    border: 1px solid #f09898;
  }
</style>
<!-- 组件模板样式：基础(1) -->
<script type="text/x-template" id="templatedemo">
  <div>
      <p v-if="titles != null">
        {{keys}}、{{titles}}
      </p>
    <p>快乐值：{{count}}</p>
   <button v-on:click="count++">点击生产快乐</button>
  </div>
</script>

<!-- 组件模板样式：基础(2) -->
<script type="text/x-template" id="templatedemo2">
  <div>
    <p>{{keys}}、{{post.name}}--->{{post.price}}元</p>
  </div>
</script>

<!-- 组件模板样式：基础(3) -->
<script type="text/x-template" id="templatedemo3">
  <div>
    <p>{{context}}</p>
    <button v-on:click="$emit('enlarge-text',0.1)">
      放大
    </button>
  </div>
</script>

<!-- 组件模板样式：基础(4) -->
<script type="text/x-template" id="templatedemo4">
  <div>
    <input :value="value" @:input="$emit('input',$event.target.value)" ></input>
  </div>
</script>

<script type="text/javascript">
  /* 组件注册：基础(1) */
  Vue.component("shengchankuaile", {
    data: function () {
      return {
        count: 0,
      };
    },
    props: ["keys", "titles"],
    template: "#templatedemo",
  });
  /* 组件注册：基础(2) */
  Vue.component("dianying", {
    props: ["keys", "post"],
    template: "#templatedemo2",
  });
  /* 组件注册：基础(3) */
  Vue.component("fangda", {
    props: ["context"],
    template: "#templatedemo3",
  });
  /* 组件注册：基础(4) */
  Vue.component("shuru", {
    props: ["value"],
    template: "#templatedemo4",
  });
  /* 组件注册：基础(5) */
  Vue.component("alert-box", {
    template: `
    <div class="demo-alert-box">
      <strong>错误!</strong>
      <slot></slot>
    </div>
  `,
  });

  var app = new Vue({
    el: "#app",
    data: {
      message: [
        { id: 1, text: "端午节快乐！" },
        { id: 2, text: "618购物快乐！" },
      ],
      posts: [
        { id: 1, name: "开飞机的舒克", price: "15.2" },
        { id: 2, name: "想想都想笑", price: "54.1" },
        { id: 3, name: "超级大电影", price: "0.11" },
        { id: 4, name: "还是开心好", price: "6.66" },
      ],
      postFontSize: 1,
      postFontSize1: 1,
      context: "六一儿童节快乐！！！",
      searchText: "啥也不是！",
    },
    methods: {
      fdevent: function (number) {
        this.postFontSize1 += number;
      },
    },
    computed: {},
  });
</script>