Andy Computer Blog: 3月 2024

2024年3月19日星期二

vue learning by hsu

5-1 5-1 Vuex 簡介 | 重新認識 Vue.js | Kuro Hsu

6-1 https://book.vue.tw/CH6/6-2-composition-intro.html

6-2 6-2 Composition API 的核心 | 重新認識 Vue.js | Kuro Hsu

vue setup function

组合式 API：setup() | Vue.js (vuejs.org)

3-2 Vue SFC 單一元件檔 | 重新認識 Vue.js | Kuro Hsu

我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性：

vue

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

template attribute

<template>：内容模板元素 HTML 内容模板（ <template> ）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。

vue variable and string

<component :is="'card'"></component>

becareful the :attribute is variable and "varaible" and double quote used single '' will be string

vue css style

Class and Style Bindings | Vue.js (vuejs.org)

2024年3月18日星期一

vue app.vue

3-2 Vue SFC 單一元件檔 | 重新認識 Vue.js | Kuro Hsu

定义一个组件

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC

javascript template litterater

Day03【ES6 小筆記】JS 組字串好方便！一目瞭然最清楚（模板字串符 template literal） - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)

alert(`Hello ${name.value}!`)

2024年3月11日星期一

vue learning and vue3

1. https://book.vue.tw/CH1/1-3-computed-and-methods.html

# vue3 create and learning

2024年3月6日星期三

vue install folder

# you can find

root@437f0e4a33ad:/vue/test3/ui1# cat package.json

{

"name": "ui1",

"version": "0.1.0",

"private": true,

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

"dependencies": {

"core-js": "^3.8.3",

"vue": "^3.2.13"

# you can find vue-cli-server in this bin

root@437f0e4a33ad:/vue/test3/ui1# ls -al ./node_modules/.bin/

total 40

drwxr-xr-x. 2 root root 4096 Feb 27 07:16 .

drwxr-xr-x. 648 root root 20480 Mar 6 06:13 ..

lrwxrwxrwx. 1 root root 18 Feb 27 03:41 acorn -> ../acorn/bin/acorn

lrwxrwxrwx. 1 root root 36 Feb 27 03:41 ansi-html -> ../ansi-html-community/bin/ansi-html

lrwxrwxrwx. 1 root root 32 Feb 27 03:41 autoprefixer -> ../autoprefixer/bin/autoprefixer

lrwxrwxrwx. 1 root root 22 Feb 27 03:41 browserslist -> ../browserslist/cli.js

lrwxrwxrwx. 1 root root 23 Feb 27 07:16 color-support -> ../color-support/bin.js

lrwxrwxrwx. 1 root root 20 Feb 27 03:41 cssesc -> ../cssesc/bin/cssesc

lrwxrwxrwx. 1 root root 23 Feb 27 03:41 eslint -> ../eslint/bin/eslint.js

lrwxrwxrwx. 1 root root 25 Feb 27 03:41 esparse -> ../esprima/bin/esparse.js

lrwxrwxrwx. 1 root root 28 Feb 27 03:41 esvalidate -> ../esprima/bin/esvalidate.js

lrwxrwxrwx. 1 root root 14 Feb 27 03:41 flat -> ../flat/cli.js

lrwxrwxrwx. 1 root root 12 Feb 27 03:41 he -> ../he/bin/he

lrwxrwxrwx. 1 root root 30 Feb 27 03:41 highlight -> ../cli-highlight/bin/highlight

lrwxrwxrwx. 1 root root 30 Feb 27 03:41 html-minifier-terser -> ../html-minifier-terser/cli.js

lrwxrwxrwx. 1 root root 15 Feb 27 03:41 is-ci -> ../is-ci/bin.js

lrwxrwxrwx. 1 root root 19 Feb 27 03:41 is-docker -> ../is-docker/cli.js

lrwxrwxrwx. 1 root root 25 Feb 27 03:41 js-yaml -> ../js-yaml/bin/js-yaml.js

lrwxrwxrwx. 1 root root 18 Feb 27 03:41 jsesc -> ../jsesc/bin/jsesc

lrwxrwxrwx. 1 root root 19 Feb 27 03:41 json5 -> ../json5/lib/cli.js

lrwxrwxrwx. 1 root root 14 Feb 27 03:41 mime -> ../mime/cli.js

lrwxrwxrwx. 1 root root 20 Feb 27 03:41 mkdirp -> ../mkdirp/bin/cmd.js

lrwxrwxrwx. 1 root root 23 Feb 27 03:41 multicast-dns -> ../multicast-dns/cli.js

lrwxrwxrwx. 1 root root 24 Feb 27 03:41 nanoid -> ../nanoid/bin/nanoid.cjs

lrwxrwxrwx. 1 root root 27 Feb 27 07:16 node-gyp -> ../node-gyp/bin/node-gyp.js

lrwxrwxrwx. 1 root root 26 Feb 27 07:16 node-sass -> ../node-sass/bin/node-sass

lrwxrwxrwx. 1 root root 19 Feb 27 07:16 nopt -> ../nopt/bin/nopt.js

lrwxrwxrwx. 1 root root 27 Feb 27 03:41 opener -> ../opener/bin/opener-bin.js

lrwxrwxrwx. 1 root root 36 Feb 27 03:41 parser -> ../@babel/parser/bin/babel-parser.js

lrwxrwxrwx. 1 root root 27 Feb 27 03:41 prettier -> ../prettier/bin-prettier.js

lrwxrwxrwx. 1 root root 25 Feb 27 03:41 regjsparser -> ../regjsparser/bin/parser

lrwxrwxrwx. 1 root root 22 Feb 27 03:41 resolve -> ../resolve/bin/resolve

lrwxrwxrwx. 1 root root 16 Feb 27 03:41 rimraf -> ../rimraf/bin.js

lrwxrwxrwx. 1 root root 27 Feb 27 07:16 sassgraph -> ../sass-graph/bin/sassgraph

lrwxrwxrwx. 1 root root 23 Feb 27 03:41 semver -> ../semver/bin/semver.js

lrwxrwxrwx. 1 root root 16 Feb 27 03:41 svgo -> ../svgo/bin/svgo

lrwxrwxrwx. 1 root root 20 Feb 27 03:41 terser -> ../terser/bin/terser

lrwxrwxrwx. 1 root root 32 Feb 27 03:41 update-browserslist-db -> ../update-browserslist-db/cli.js

lrwxrwxrwx. 1 root root 21 Feb 27 03:41 uuid -> ../uuid/dist/bin/uuid

lrwxrwxrwx. 1 root root 42 Feb 27 03:41 vue-cli-service -> ../@vue/cli-service/bin/vue-cli-service.js

lrwxrwxrwx. 1 root root 25 Feb 27 03:41 webpack -> ../webpack/bin/webpack.js

lrwxrwxrwx. 1 root root 46 Feb 27 03:41 webpack-bundle-analyzer -> ../webpack-bundle-analyzer/lib/bin/analyzer.js

lrwxrwxrwx. 1 root root 47 Feb 27 03:41 webpack-dev-server -> ../webpack-dev-server/bin/webpack-dev-server.js

lrwxrwxrwx. 1 root root 18 Feb 27 03:41 which -> ../which/bin/which

2024年3月5日星期二

Node simple run server

# folder

[andychung@shared-docker-builder test2]$ ls

node_modules package.json package-lock.json public server.js

#################################

# server.js

var fs = require('fs');

var host = '0.0.0.0';

var port = 8080;

var express = require('express');

const path = require('path')

var app = express();

// http://10.0.1.30/hello_vue.html

app.use(express.static(path.join(__dirname, "public")));

app.get("/", function(request, response){

response.send("hello express");

});

app.get("/a", function(request, response){

response.send(__dirname);

});

app.listen(port, host);

#################################

# package json

[andychung@shared-docker-builder test2]$ cat package.json

{

"name": "y",

"version": "1.0.0",

"description": "",

"main": "app.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "node server.js"

"author": "",

"license": "ISC",

"dependencies": {

"express": "^4.18.2"

}

node and npm global

# global install

root@c329f82c119d:/# npm install -g sass-loader

# global command

root@c329f82c119d:/# npm list -g

/usr/local/lib

+-- @vue/cli@5.0.8

+-- corepack@0.24.0

+-- list@2.0.19

+-- npm@10.2.4

`-- sass-loader@14.1.1

# global folder

root@c329f82c119d:/# ls -al /usr/local/lib/node_modules/

drwxr-xr-x. 3 root root 17 Mar 6 01:59 @vue

drwxr-xr-x. 4 root root 106 Jan 22 12:11 corepack

drwxr-xr-x. 7 root root 133 Mar 6 06:54 list

drwxr-xr-x. 7 root root 153 Jan 22 12:11 npm

drwxr-xr-x. 4 root root 90 Mar 6 06:54 sass-loader

Nodejs and npm and lodash

npm install lodash

ls -al node_modules#

jquery lodash neo-async sass-loader

# node

Welcome to Node.js v21.6.1.

> const _ = require('lodash');

> const numbers=[1,2,3]

> numbers

[ 1, 2, 3 ]

> _.first(numbers)

# ref

https://www.digitalocean.com/community/tutorials/how-to-use-node-js-modules-with-npm-and-package-json

https://linyencheng.github.io/2022/09/27/relationships-between-frontend-and-backend/tool-npm/

訂閱：文章 (Atom)

Andy Computer Blog

2024年3月19日星期二

vue learning by hsu

vue setup function

template attribute

vue variable and string

vue css style

2024年3月18日星期一

vue app.vue

定义一个组件

javascript template litterater

2024年3月11日星期一

vue learning and vue3

2024年3月6日星期三

vue install folder

2024年3月5日星期二

Node simple run server

node and npm global

Nodejs and npm and lodash

關於我自己

標籤

網誌存檔

2024年3月19日 星期二

2024年3月18日 星期一

定义一个组件​

2024年3月11日 星期一

2024年3月6日 星期三

2024年3月5日 星期二

關於我自己

標籤

網誌存檔

2024年3月19日星期二

2024年3月18日星期一

定义一个组件

2024年3月11日星期一

2024年3月6日星期三

2024年3月5日星期二