1. Introduction of vue

  • JavaScript framework
  • Simplified Dom manipulation
  • Responsive data-driven
  • Development environment Version(like full version of jQuery), production version (like mini version of jQuery)
  • You can create a VUE project by following the official steps or by using @vue/cli
Import vue.js of the development version. 2. Create a Vue instance object and set the EL and data attributes 3. Use concise template syntax to render data to the page <div> {{message}} </div> <script SRC ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
        let vue = new Vue({
            el: "#app",
            data: {
                message: "hello vue!!"}}); </script>Copy the code

2. El hardpoints

  • What is the scope of a VUE instance?

    A: Vue manages the elements hit by the EL option as well as the internal descendant elements
  • The sample
    <div id = "app">
        {{message}}
        <span>{{message}}</span>
    <div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                message: "Welcome to VUE"}}); </script>Copy the code

  • Can you use other selectors? A: You can use other selectors, but ID selectors are recommended

  • Can I set other DOM elements? A: You can use other double tags instead of HTML and BODY

3. Data Data objects(Supports objects and functions, components must use functions)

  • The data used in Vue is defined in Data
  • Data can be written to complex types of data
  • When rendering complex type data, just follow the JS syntax
  • The definition of a component is accepted onlyfunction
  • The sample
    <div id = "app">
        <h1>{{message}}</h1>
        <h2>{{school.name}}{{school.mobile}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
            <li>{{campus[2]}}</li>
        </ul>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                message: "Hello everyone!!",
                school: {name: 'Chow Sui Fat', mobile: '1301121241'},
                campus: ["Beijing"."Shanghai"."Guangzhou"."Shenzhen"]}}); </script>Copy the code

4. vue.com ponent componentsOnly the full version is supported

  • Define a file namedButton-counter, name can be changedThe new component
  • The first argument to Component gives you the name of the component. The second argument is the same as Vue instance Options
  • Components can be reused indefinitely,Data must be a functionTo avoid data confusion caused by referencing the same memory address
  • Uppercase component names are recommended to avoid conflicts with HTML tags
  • The sample
    Vue.component("Button-counter", {data() {return{
                count: 0
            }
        },
        template: `
            <button @click="count++"</button> '}); new Vue({ el:"#app",
        template: `
            <Button-counter></Button-counter>
        `
    });
Copy the code

or

    import Demo from "./Demo.vue";
    new Vue({
        el: "#app",
        components: {Demo},
        template: `
            <div>
                <Demo></Demo>
            </div>
        `
    });
Copy the code

5. What is the vUE lifecycle

A: There are always a variety of events from the time a Vue instance is created, run, and destroyed. These events are collectively called the life cycle!

6. Lifecycle four hooks

Life cycle functions during creation:

  • beforeCreate : The instance has just been created in memory, and the data and Methods attributes have not yet been initialized
  • The sample
    new Vue({
        el: "#app".data() {return {
                n: 1
            }
        },
        methods: {
            fn(){ console.log(1); }},beforeCreate(){// Note that console.log(this.n) has not been initialized for data and methods when the beforeCreate life cycle function is executed. // undefined console.log(this.fn()); }})Copy the code
  • created : The instance has been created OK in memory, data and methods have been initialized, and templates have not yet been compiled
  • The sample
    new Vue({
        el: "#app".data() {return {
                n: 1
            }
        },
        methods: {
            fn(){ console.log(this.n); }},created(){// 1. In create, data and methods are initialized // 2. If you want to call methods in Methods or manipulate data in data, initially you can only do console.log(this.n) in Created; // 1 this.fn(); / / 1}})Copy the code
  • beforeMount : The template is compiled in memory, but not yet mounted to the page
  • The sample
    <div id="app">{{msg}}</div>
    
    new Vue({
        el: "#app".data() {return {
                n: 1
            }
        },
        beforeMountConsole. log(document.getelementbyid (){// When executing beforeMount, the compiled template is only in memory and not yet on the page."app").innerText) // {{msg}}
        }
    })
Copy the code
  • mounted : At this point, the compiled template is mounted to the container specified on the page for display
  • The sample
    <div id = "app">{{msg}}</div>
    
    new Vue({
        el: "#app".data() {return {
                msg: "ok"}},mouted// Mounted is the last life cycle function during instance creation. When the mounthed function completes, the instance is completely created console.log(document.getelementByid ()"app").innerText) // ok
        }
    })
Copy the code

Mid-life functions at runtime:

  • beforeUpdate : Execute the function before status update
  • The sample
    new Vue({
      el: "#app".data() {
        return {
          n: 1,
        };
      },
      methods: {
        add1() {
          this.n += 1;
        },
      },
      template: `
        <div>
          <button @click="add1">+1</button>
          {{n}}
        </div>
      `,
      beforeUpdate() {
        console.log("fasdfs"); }});Copy the code
  • updated : This function is executed when state values in data and display data on the page are changed or updated
  • The sample
    new Vue({
      el: "#app".data() {
        return {
          n: 1,
        };
      },
      methods: {
        add1() {
          this.n += 1;
        },
      },
      template: `
        <div>
          <button @click="add1">+1</button>
          {{n}}
        </div>
      `,
      updated() {
        console.log("The data is updated."); }});Copy the code

Life cycle functions during destruction:

  • beforeDestroy : Called before instance destruction
  • destroyed: Called after instance or component destruction
  • The sample
Demo1.vue
    <template>
      <div class="red"></div>
    </template>
    
    <script>
    export default {
      beforeDestroy() {
        console.log("Trigger before component destruction");
      },
      destroyed() {
        console.log("Component destroyed trigger"); }}; </script> <style> .red { width: 100px; height: 100px; border: 3px solid red; } </style> main.js import Demo1 from"./Demo1.vue";
    
    new Vue({
      el: "#app".data() {
        return {
          isShow: true}; }, components: { Demo1, }, template: ` <div> <button @click="isShow=false"</button> <Demo1 v-if="isShow"></Demo1>
        </div>
      `,
    });
Copy the code

7. Pass data using props

  • Details:The component not only needs to reuse the content of the template, but also the communication between components. Usually, the template of the parent component contains a child component, and the parent component must pass data or parameters to the child component, and the child component will render according to the different parameters after receiving them. Data transfer in the VUE component can be implemented via props
  • The sample
    // child.vue
    <template>
      <div>{{message}}</div>
    </template>
    
    <script>
      export default {
        props: ["message"]}; </script> <style></style> // father.vue <template> <div> <inputtype="text" v-model="message" />
        <child :message="message"></child>
      </div>
    </template>
    
    <script>
    import child from "./child.vue";
    export default {
      data() {
        return {
          message: ""
        };
      },
      components: { child }
    };
    </script>
    
    // main.js
    import father from "./father.vue";
    new Vue({
      el: "#app",
      components: { father },
      template: `
        <div>
          <father></father>
        </div>
      `,
    });
Copy the code