A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 24th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Today we are going to do a small demo with Vue, a small demo of dynamic evaluation page, mainly to practice some of the knowledge we have learned before

1. Target function interface

The project code: https://github.com/yk2012/vue_demo/tree/main/demo2_Comments

2. Split interface modules

3. Home page index. HTML

Import the bootstrap. CSS file in the head tag

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>vue_demo</title>
    <link rel="stylesheet" href="./static/css/bootstrap.css">
  </head>
  <body>
    <div id="app"></div>
    <! -- built files will be auto injected -->
  </body>
</html>
Copy the code

4. Static page construction

4.1 the main js

Package the entry js file, and later all package to form an app.js in the home page index.html

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app'.components: {
        App
    },
    template: '<App/>'
})
Copy the code

4.2 App. Vue

Import tag import
Map the component label Components
Using component labels

<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>Please comment on Vue</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <! -- *3* Use component tag -->
      <Add />
      <List />
    </div>
  </div>
</template>

<script>
<script>
  // *1* Imports components
  import Add from './components/Add'
  import List from './components/List'

  export default {
    // *2* Maps component labels
    components: {
      Add,
      List
    }
  }
</script>
</script>

<style>

</style>
Copy the code

4.3 the Add. Vue

<template>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label>The user name</label>
        <input type="text" class="form-control" placeholder="Username">
      </div>
      <div class="form-group">
        <label>Comment on the content</label>
        <textarea class="form-control" rows="6" placeholder="Comment content"></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-default pull-right">submit</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
  export default{}</script>

<style>

</style>
Copy the code

4.4 List. Vue

<template>
  <div class="col-md-8">
    <h3 class="reply">Comment reply:</h3>
    <h2 style='display: none'>No comment, click left to add a comment!!</h2>
    <ul class="list-group">
      <li class="list-group-item">
        <div class="handle">
          <a href="javascript:;">delete</a>
        </div>
        <p class="user"><span >xxx</span><span>Said:</span></p>
        <p class="centence">The React well!</p>
      </li>
      <li class="list-group-item">
        <div class="handle">
          <a href="javascript:;">delete</a>
        </div>
        <p class="user"><span >yyy</span><span>Said:</span></p>
        <p class="centence">React is kind of hard!</p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{}</script>

<style>
.reply {
  margin-top: 0px;
}

li {
  transition:.5s;
  overflow: hidden;
}

.handle {
  width: 40px;
  border: 1px solid #ccc;
  background: #fff;
  position: absolute;
  right: 10px;
  top: 1px;
  text-align: center;
}

.handle a {
  display: block;
  text-decoration: none;
}

.list-group-item .centence {
  padding: 0px 50px;
}

.user {
  font-size: 22px;
}
</style>
Copy the code

4.5 show

5. Dynamic components

5.1 Dynamically Displaying Initialization Data

Data data: user name + comment content
Storage with arrays []
The data is placed in the App component

5.1.1 App. Vue

<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>Please comment on Vue</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <! -- *3* Use component tag -->
      <add />
      <list :comments="comments" />
    </div>
  </div>
</template>

<script>
    // *1* Imports components
import Add from './components/Add'
import List from './components/List'

  export default {
    data(){
      return {
        comments: [{name:'Bob'.content: 'Vue so easy.'
          },
          {
            name: 'Cat'.content: 'Vue so so.'}}},// *2* Maps component labels
    components: {
      Add,
      List
    }
  }
</script>

<style>

</style>



Copy the code

5.1.2 List. Vue

<template>
  <div class="col-md-8">
    <h3 class="reply">Comment reply:</h3>
    <h2 style='display: none'>No comment, click left to add a comment!!</h2>
    <ul class="list-group">
      <item v-for="(comment, index) in comments" :key="index" :comment="comment" />
    </ul>
  </div>
</template>

<script>
import Item from './Item.vue'
export default {
  // Declare a receive property, which becomes a property of the component object
  props: ['comments'].components: { Item },
}
</script>

<style>
.reply {
  margin-top: 0px;
}


</style>
Copy the code

5.1.3 Item. Vue

<template>
  <li class="list-group-item">
    <div class="handle">
      <a href="javascript:;">delete</a>
    </div>
    <p class="user"><span >{{comment.name}}</span><span>Said:</span></p>
    <p class="centence">{{comment.content}}</p>
  </li>
</template>

<script>
export default {
  props: {// Specify the attribute name and the type of the attribute value
    comment: Object,}}</script>

<style>
li {
  transition:.5s;
  overflow: hidden;
}

.handle {
  width: 40px;
  border: 1px solid #ccc;
  background: #fff;
  position: absolute;
  right: 10px;
  top: 1px;
  text-align: center;
}

.handle a {
  display: block;
  text-decoration: none;
}

.list-group-item .centence {
  padding: 0px 50px;
}

.user {
  font-size: 22px;
}
</style>
Copy the code

5.1.4 ensuring show

5.2 Dynamic Interaction – Add operations

App.vue

The behavior (method) of updating the data is defined in the component where the data resides
Define add comment function (method)
Passed to the Add. Vue

<template>
    <add :addComment="addComment "/>
</template>

<script>
  export default {
    methods: {// Add a comment
      addComment(comment){
        this.comments.unshift(comment); }}},</script>

Copy the code

Add.vue

Add the event @click to the button

Check the validity of input
Based on the input data, encapsulate it into a comment object
Add it to comments
Remove the input

Get the data V-model from the input box
Define the data
Add method add

<template>
  <input type="text" class="form-control" placeholder="Username" v-model="name">
  <textarea class="form-control" rows="6" placeholder="Comment content" v-model="content"></textarea>
  <button type="button" class="btn btn-default pull-right" @click="add">submit</button>
</template>

<script>
  export default {
    props: {addComment: { // Specify attribute name/attribute value type/attribute necessity.
        type:Function.required: true}},data(){ // To fetch data from the page, use v-model
      return {
        name: ' '.content: ' '}},methods: {
      add(){
        // 1. Check the validity of the input
        const name = this.name.trim();
        const content = this.content.trim();
        if(! name || ! content){ alert("Name and content cannot be empty.");
          return;
        }
        // 2. Encapsulate the input data into a comment object
        const comment = {
          name,
          content
        };
        // 3. Add it to comments
        this.addComment(comment);
        // 4. Clear the input
        this.name=' ';
        this.content=' '; }}}</script>
Copy the code

5.3 Dynamic Interaction – Delete operations

App.vue

<template>
  <list :comments="comments" :deleteComment="deleteComment" />
</template>

<script>
  export default {
    methods: {deleteComment(index){
        this.comments.splice(index, 1); }},</script>
Copy the code

List.vue

<template>
  <div class="col-md-8">
    <h3 class="reply">Comment reply:</h3>
    <h2 v-show="comments.length===0">No comment, click left to add a comment!!</h2>
    <ul class="list-group">
      <item v-for="(comment, index) in comments" :key="index" :comment="comment" :deleteComment="deleteComment" :index="index" />
    </ul>
  </div>
</template>

<script>
import Item from './Item.vue'
export default {
  // Declare a receive property, which becomes a property of the component object
  props: ['comments'."deleteComment"].components: { Item },
}
</script>
Copy the code

Item.vue

<template>
  <li class="list-group-item">
    <div class="handle">
      <a href="javascript:;" @click="deleteItem">delete</a>
    </div>
    <p class="user"><span >{{comment.name}}</span><span>Said:</span></p>
    <p class="centence">{{comment.content}}</p>
  </li>
</template>

<script>
export default {
  props: {// Specify the attribute name and the type of the attribute value
    comment: Object.deleteComment: Function.index: Number
  },
  methods: {
    deleteItem(){
      const {comment, index, deleteComment} = this;
      if(window.confirm('Confirm deletion${comment.name}? `)){ deleteComment(index); }}}}</script>
Copy the code

The project code: https://github.com/yk2012/vue_demo/tree/main/demo2_Comments

Finally, welcome to my column and make friends with YK bacteria

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

【Vue】 Advanced series (3) Vue modular actual combat – DEMO1 – dynamic evaluation page

1. Target function interface

2. Split interface modules

3. Home page index. HTML

4. Static page construction

4.1 the main js

4.2 App. Vue

4.3 the Add. Vue

4.4 List. Vue

4.5 show

5. Dynamic components

5.1 Dynamically Displaying Initialization Data

5.1.1 App. Vue

5.1.2 List. Vue

5.1.3 Item. Vue

5.1.4 ensuring show

5.2 Dynamic Interaction – Add operations

App.vue

Add.vue

5.3 Dynamic Interaction – Delete operations

App.vue

List.vue

Item.vue

【Vue】 Advanced series (3) Vue modular actual combat – DEMO1 – dynamic evaluation page

1. Target function interface

2. Split interface modules

3. Home page index. HTML

4. Static page construction

4.1 the main js

4.2 App. Vue

4.3 the Add. Vue

4.4 List. Vue

4.5 show

5. Dynamic components

5.1 Dynamically Displaying Initialization Data

5.1.1 App. Vue

5.1.2 List. Vue

5.1.3 Item. Vue

5.1.4 ensuring show

5.2 Dynamic Interaction – Add operations

App.vue

Add.vue

5.3 Dynamic Interaction – Delete operations

App.vue

List.vue

Item.vue

Related Posts

[032] — Understand the cycle of events from two perspectives

Basic JavaScript syntax – DOM-bom-js-ES6 new syntax

Update @vue/cli4 to make a throttling component with composition-API