Vue installation environment

Vue.js provides an official command-line tool for quickly building large, single-page applications. The tool provides an out-of-the-box build tool configuration that brings a modern front-end development process. One minute to start projects with hot reloads, save time static checking, and build configurations available for production:

$NPM install --global vue-cli # create a new project based on webpack template $vue init webpack my-project My-project $NPM install # $NPM run devCopy the code

TODOLIST demo development

The project structure

The project directory is shown in the figure above. It introduces the directories involved in this demo and some basic information

  • Index.html Project entry file

    Note that there is a DIV with id ‘app’ that mounts the component through this DOM node

    <! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first-project</title> </head> <body> <div id="app"></div> <! -- built files will be auto injected --> </body> </html>Copy the code

  • SRC /main.js imports the component and mounts it in the DOM structure of the entry file

    Note: I’ve replaced the app. vue file I introduced here with my todolist. vue file

      import Vue from 'vue'
  import App from './todoList.vue'       
  
  new Vue({
    el: '#app',
    render: h => h(App)
  })
Copy the code

  • SRC/Todolist. vue encapsulates a todoList component

    <template> <div id="app"> <h1>{{title}}</h1> <! <input V-model ="newItem" V-on :keyup.enter="addNew"/> <! <ul> <li v-for="item in items" v-bind:class="{finished: finished: item.isFinished}" v-on:click="toggleFinish(item)"> {{item.label}} </li> </ul> <br /><br /><br /><br /><br /> <p><strong> Below is a basic demonstration of a set of component calls </strong></p> <! Call the child component and pass the PRPS argument to the child component (msgFromFather). Call the child-tell-something hook to the child component to pass arguments to the parent component. Import component names such as strAstrB must be converted to str-a-str --> <component-for-to-do-list msgFromFather="Hi! child-component" v-on:child-tell-something="listenToMyChild"> </component-for-to-do-list> <h3>Main conponent hear child-component say:{{childWords}}</h3> </div> </template> <script> import ComponentForToDoList from '. / components/ComponentForToDoList 'export default {/ / data data: the function () {return {title:' An todolist ', the items: [], newItem: ", childWords: "}}, // declare methods: {// Click the event callback function, toggleFinish item. IsFinished: function(item){ item.isFinished = ! item.isFinished }, addNew: function() { this.items.push({ label: this.newItem, isFinished: False,}) this.newitem = ""}, // the child component raises the event callback function, // binds the argument to its own data.childWords listenToMyChild: function(msg){ this.childWords = msg } }, // ComponentForToDoList}} </script> <style>. } html {height: 100%; } body {display: flex; align-items: center; justify-content: center; height: 100%; } #app {color: #2c3e50; margin-top: -100px; max-width: 600px; font-family: Source Sans Pro, Helvetica, sans-serif; text-align: center; } #app a {color: #42b983; text-decoration: none; } .logo {width: 100px; height: 100px} h3 {color: #42b983; } </style>Copy the code

  • SRC/components/ComponentForToDoList vue subcomponents

    Note: The components directory convention is the location of the child component, and here is the code for the child component

    <template> <div class="hello"> <h3>{{ 'Main-conponent call me:' + msgFromFather }}</h3> <button v-on:click="onClickBtn">call back for main-conponent</button> </div> </template> <script> export default { data () { return { msg: 'Nice to meet you ! }}, // props can be used within the current component to props:['msgFromFather'], methods: {onClickBtn: function(){ //console.log('fff:'+this.msgFromFather); //debugger; this.$emit('child-tell-something', this.msg) }, } } </script> <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 { color: #42b983; } </style>Copy the code

For details, see comments and run results

Run the project

NPM run dev # will automatically open the default browser port 8000Copy the code

The initial page

It is divided into two parts: the first part is a basic Todolist that can input events and switch states. The second part is a demonstration of basic parameter passing between components.

After the operation

Write in the back

Dig a hole and fill it in slowly