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

  1. Import tag import
  2. Map the component label Components
  3. 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
  1. Check the validity of input
  2. Based on the input data, encapsulate it into a comment object
  3. Add it to comments
  4. 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