000 VUE结构简单介绍

1. DOM API和VUE实现同一个功能对比

1.1 DOM API是怎么做的

image.png
image.png

注意，上面的/app.js中的app.js是由webpack在development tools启动过程中最后生成的bundle的名称

1.2 VUE又是怎么做的

image.png

2. JS文件中Vue结构简单介绍

image.png image.png

require('../node_modules/bootstrap/dist/css/bootstrap.min.css')

/*
import the Vue object from the vue module, which was downloaded and installed into the node_modules 
folder when the project was created*/
import Vue from "vue"

//A Vue object is created using the new keyword  
new Vue(
/*
the constructor accepts a configuration object whose properties provide settings that control how the application
behaves and define the content that it presents to the user.
*/
{
    //The Vue object uses the el property to identify the element in index.html that will be replaced to display 
    //the application content。 即index.html里面id为app的元素将会被替换 
    el: "#app", //#app表示选择the element whose id attribute is set to app

    /*The template property is used to provide Vue.js with the HTML content that will replace the element matched 
    by the el property. 如果使用DOM API，这些工作需要自己做，而使用VUE这种方式，则简单很多*/

    /*v-on:click这个属性是一个directive. Directive是一个Vue.js feature，用于把一个函数apply到一个HTML element上。
    注意如何影响界面展示的：Since Vue.js data is reactive, changing the counter value causes Vue.js to evaluate the data binding in
the h1 element, which changes the message displayed to the user*/
    /*template: `<div class="text-center p-3">
                    <h1 class="bg-secondary text-white p-3">
                        Button Presses: {{ counter }}
                    </h1>
                    <button class="btn btn-secondary" v-on:click="handleClick">
                        Press Me
                    </button>
                </div>`,*//*Vue.js提供的数据绑定为template content 和 data object提供了连接
                Vue.js会把数据绑定当做一个JS表达式进行计算，the data binding 实际就是the data object’s 的一个属性名
1. The data is live or reactive, meaning that a change to the value of the counter property will be automatically reflected in the contents of the h1 element*/

    template: `<div class="text-center p-3">
                    <h1 class="bg-secondary text-white p-3">
                        {{message}}
                    </h1>
                    <button class="btn btn-secondary" v-on:click="handleClick">
                        Press Me
                    </button>
                </div>`,//即时使用的是computed property，上面的{{message}}也是一个数据绑定
    data: {
        counter: 0
    },
    methods: {
        handleClick() {
            this.counter++;
        }
    },
/*The computed configuration defines data values that require some computation to produce a result.   */
    computed: {
        message() {
            return this.counter == 0 ? "Button Not Pressed" : `Button Presses: ${this.counter}`;
        }
    }
});
/*和下面这个纯DOM API写法是等效的：

require('../node_modules/bootstrap/dist/css/bootstrap.min.css')
let counter = 1;
let container = document.createElement("div");
container.classList.add("text-center", "p-3");
let msg = document.createElement("h1");
msg.classList.add("bg-primary", "text-white", "p-3");
msg.textContent = "Button Not Pressed";
let button = document.createElement("button");
button.textContent = "Press Me";
button.classList.add("btn", "btn-secondary");
button.onclick = () => msg.textContent = `Button Presses: ${counter++}`;
container.appendChild(msg);
container.appendChild(button);
let app = document.getElementById("app");
app.parentElement.replaceChild(container, app);
*/

3. 引入Component

3.1 小步改进

image.png
image.png

APP.vue：

<script>
//components are Vue objects
  export default {//1.  the configuration object must be exported
    template: `<div class="text-center p-3">
                  <h1 class="bg-secondary text-white p-3">
                    {{ message }}
                  </h1>
                  <button class="btn btn-secondary" v-on:click="handleClick">
                    Press Me
                  </button>
                </div>`,
//2. The other change is to the data property, which must be expressed as a function
    /*The data property is assigned a function that returns an object whose properties provide the data values for the component. 
*/
    data: function () {
      return {counter: 0}
    },
    methods: {
      handleClick() {this.counter++;}
    },
    computed: {
      message() {
      return this.counter == 0 ? "Button Not Pressed" : `Button Presses: ${this.counter}`;
      }
    }
  }
/*在使用这个component时：Components must be registered with Vue.js before they are used, and this is one of the main jobs usually
performed in the main.js*/
</script>

补充说明定义component文件的结构： image.png

main.js内容：

require('../node_modules/bootstrap/dist/css/bootstrap.min.css')

import Vue from "vue"
import MyComponent from "./App"
//imports the module from the App.vue file and gives it the name MyComponent。一般习惯上使用the file name 作为 the name of the import
new Vue(
{   
    el: "#app", //#app表示选择the element whose id attribute is set to app

/*这个components属性的作用是：
This property is assigned an object that provides Vue.js with a list of HTML elements and the components that are associated
with them。 就本例而言，向Vue.js指明，custom这个element和MyComponent关联.*/

    components: { "custom": MyComponent },

    template: "<custom />"
});

从工程实践角度来看App.vue的目的： image.png

3.2 再做改进：vue文件中把Template从JavaScript Code中分离出来

image.png

APP.vue：

<template>
  <div class="text-center p-3">
    <h1 class="bg-secondary text-white p-3">
      {{ message }}
    </h1>
    <button class="btn btn-secondary" v-on:click="handleClick">
      Press Me
    </button>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {counter: 0}
    },
    methods: {
      handleClick() {this.counter++;}
    },
    computed: {
      message() {
      return this.counter == 0 ? "Button Not Pressed" : `Button Presses: ${this.counter}`;
      }
    }
  }
/*在使用这个component时：Components must be registered with Vue.js before they are used, and this is one of the main jobs usually
performed in the main.js*/
</script>

3.3 再做改进：分离JavaScript 和 HTML Files

image.png
image.png