Skip to main content

Understanding Vue

In trying to debug the latest problem with vue-router (can't add a new page /person), I want to back up and understand vue fundamentals better.

vue executable

Vue (3.9.2) is installed on my Windows system, so that I can say vue create <app-name> in any directory. vue info shows that I have npm (6.4.1) in C:\Program Files\nodejs\npm.CMD, but that @vue/cli is not installed.

c:\Users\alast\AppData\Roaming\npm\vue.cmd - is basically node vue.js.

vue create makes a scaffold:

<project>/
    public/
        index.html
        favicon.html
    src/        <-- '@' in an import refers to here
        assets/
        components/
        views/
        App.vue
        main.js  <-- entry point
        router.js

vue ui runs the browser-based control app (at localhost:8000).

Modules

Vue seems to make extensive use of JavaScript "modules" for its component system. In JavaScript, the export statement makes an object (or resource in general) available. You say this in firstfile.js:

export { name: "App", data: "1234" }

Whatever other code is going on in firstfile.js, you are offering that object to the world as the entry point. Another file (which could be a module) can bring it in with an import statement:

import App from './firstfile'

If you want to be able to say import defaultExport from "./firstfile" you need the default keyword:

export default { name: "MyMod", data: "1234" }

Apparently, every .vue file is a module.

In PHP, the include statement is replaced by the contents of the file, so it is executed right there. Import may work the same way (I don't know), but since it's typically an object literal, it doesn't get executed. It brings it into the namespace of the importing file. They say you are importing "bindings" only--that is, the ability to refer to the object and its constituents by name.

Vue Files

Vue Files have three parts: Template, Script, and Style. I think it works like this: Vue compiles the template, replacing vue commands and mustache injections with real references and puts the result into the export object. So, the export object has name:, data: and now html: components. I don't know specifically, but I think only the Script portion is run when the .vue file is imported by its parent.

Again, bindings. Importing a .vue file gives you access to its data, computed, methods, and its processed template and style. If you use it in a template context, its html gets inserted in place.


Comments

Post a Comment

Popular posts from this blog

CSS for Tables

Tables still have a place--for tabular data. Duh. Such as the Companies table in FDB. But I had to remember the CSS around tables. First, the basic structure: table   thead     tr       th   tbody     tr       td Table border-collapse: { separate (default) | collapse } border-spacing: { #both | #horiz #vert } - default is 1px empty-cells: { show (default) | hide } table-layout: { auto (default) | fixed } - fixed is like !important for widths For a responsive table, put it inside a container (e.g., div) with overflow-x: auto; Width, height, border can be applied to table, th and td--not tr, thead or tbody. Cells th and td tags. CSS doesn't seem to like naked th and td. Prefer table td or table th selectors. text-align: { left | center | top } vertical-align: { top | bottom | middle } padding (margin doesn't do anything; use border-spacing) border-bottom: - for just horizontal lines between rows Rows For a mouse-over to select whole rows at a time: tr:hov
Post a Comment
Read more

A JSON Db Product?

The last post "solved" the problem of many-to-many table joins by papering over the association table with a RESTful JSON interface. As long as we're using JSON, we might as well take advantage of multi-valued table cells. I'm naturally wondering where this leads. JSON identifiers and types and SQL identifiers and types overlap so much that their intersection is a useful subset. Camel-case fields in string, number, bool flavors. Many-to-many occurs often in the world: Students in Classes Actors in Films (musicians on recorded songs) Parts in Assemblies Customers and Products (joined by Orders) The generalized description is that a Table requires a unique identifier for each row. Tables list students, actors, films, customers, and so on.  An Association Table is has two or more foreign keys that match unique identifiers in other tables. The knowledge of how a FK maps to a specific Table is baked in--we wouldn't want a "table name" column.
Post a Comment
Read more

GraphQL is the many-to-many solution

Exactly! Regular readers of this blog (me) will appreciate my stumbling attempts to pre-define a REST interface that supports many-to-many interfaces. GET a class, for example, and the return includes an array of the students in that class. In this context, we don't want a full Student record, just the Student's name and Id, for example. With a REST interface, the server writer has to guess how to abbreviate the Student record. GraphQL fixes that. The front end requests just the data it wants. If we want a list of the students in a class and the assigned roommates for that student...we can do that! A lot of my prototype REST service is hardwired--not single tables, so much, but the many-to-many stuff certainly. There was a certain amount of work implementing the simple router ("/table/recordno"). GraphQL means throwing a lot of that away, but I can see immediately that GraphQL's approach is what I want. My schema tables (implementing INSERT and UPDATE) look
Post a Comment
Read more