Vue 3 渲染后端返回的标签 | component 标签的使用 和 compile 的使用 作者: Chuwen 时间: 2022-05-13 分类: WEB开发 评论 ## 缘由 项目中有一个需求，需要动态渲染后端返回的 HTML，如下所示，下述的**每一个** `svg` 是后端动态返回的 ```html <template> <div class="class-name"> <!--这里的每一个 svg 都会从 API 返回渲染--> <svg></svg> <svg></svg> <svg></svg> </div> </template> ``` 试过这样，但是不会渲染出来： ```html <template> <div class="class-name"> <template v-html="svg1"></template> <template v-html="svg2"></template> <template v-html="svg3"></template> </div> </template> ``` ## 解决方案 通过浏览 Vue.js 文档，发现如下文章： - [渲染函数 - 模板编译](https://v3.cn.vuejs.org/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6 "模板编译") - [内置特殊元素 - component](https://staging-cn.vuejs.org/api/built-in-special-elements.html#component) - [在 Vue.js 中使用 Vue.compile](https://stackoverflow.com/questions/68981411/vue3-how-to-use-vue-compile-in-vue3) ### `<component>` 是 Vue 内置特殊元素 > `<component>` 和 `<slot>` 具有类似组件的特性，也是模板语法的一部分。它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。 所以，使用 `<component>`、`Vue.compile` 就实现了我想要的功能 gist: https://gist.github.com/PrintNow/f9fec1890bd736593800564c45584c3b ```vue <template> <h2>实现效果</h2> <div class="class-name"> <component :is="getSvg" :style="svg_style"></component> <component :is="getSvg" :style="svg_style"></component> <component :is="getSvg" :style="svg_style"></component> </div> <h2><code>getSvg</code> 输出结果：</h2> <pre v-text="getSvg"></pre> <h2><code>svg</code> 输出结果：</h2> <pre v-text="svg"></pre> </template> <script> import { compile } from "vue"; export default { name: "App", components: {}, data() { return { svg_style: { width: "64px", height: "auto" }, svg: `<svg t="1652418272564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2045" width="512" height="512"> <path d="M408 617m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2046"></path> <path d="M927 369H111.75a25 25 0 0 1 0-50H927a25 25 0 0 1 0 50zM569.79 748H225a30 30 0 0 1 0-60h344.79a30 30 0 0 1 0 60zM668 748h-2.84a30 30 0 1 1 0-60H668a30 30 0 0 1 0 60z" fill="#087E6A" p-id="2047"></path> <path d="M832 860H197A125.14 125.14 0 0 1 72 735V263a125.14 125.14 0 0 1 125-125h635a125.14 125.14 0 0 1 125 125v472a125.14 125.14 0 0 1-125 125zM197 188a75.09 75.09 0 0 0-75 75v472a75.09 75.09 0 0 0 75 75h635a75.09 75.09 0 0 0 75-75V263a75.09 75.09 0 0 0-75-75z" fill="#087E6A" p-id="2048"></path> </svg>`, }; }, computed: { getSvg() { return compile(this.svg); }, }, }; </script> <style> .class-name * { display: block; } </style> ``` <iframe src="https://codesandbox.io/embed/sparkling-fog-2ycfeb?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="sparkling-fog-2ycfeb" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe>
Larvel + Vue 项目使用 Docker 作者: Chuwen 时间: 2021-12-28 分类: Docker 评论 先给出配置文件，有空了再慢慢说道 ### Dockerfile: ```dockerfile FROM node:12-alpine as frontend WORKDIR /app ADD web-vue/package.json /app/ ADD web-vue/package-lock.json /app/ RUN npm install --registry=https://registry.npm.taobao.org ADD web-vue /app RUN npm run build # 第 1 个阶段，构建 composer 所需要的依赖包 FROM composer as composer COPY database/ /app/database/ COPY composer.json /app/ RUN set -x ; cd /app \ && composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ \ && composer install \ --ignore-platform-reqs \ --no-interaction \ --no-plugins \ --no-scripts \ --prefer-dist # 第 2 个阶段 FROM shine09/php-fpm:73 as laravel ENV TZ="Asia/Shanghai" LANG="C.UTF-8" ARG LARAVEL_PATH=/app/laravel COPY --from=composer /app/vendor/ ${LARAVEL_PATH}/vendor/ COPY . ${LARAVEL_PATH} RUN set -x ; cd ${LARAVEL_PATH} \ && mv .env.docker .env \ && mkdir -p storage \ && mkdir -p storage/framework/cache \ && mkdir -p storage/framework/sessions \ && mkdir -p storage/framework/testing \ && mkdir -p storage/framework/views \ && mkdir -p storage/logs \ && chmod -R 777 storage \ && chmod -R 777 bootstrap/cache/ \ && php artisan package:discover # 第 3 个阶段 FROM nginx:alpine as nginx ENV TZ="Asia/Shanghai" LANG="C.UTF-8" ARG LARAVEL_PATH=/app/laravel COPY laravel.conf /etc/nginx/conf.d/ COPY --from=laravel ${LARAVEL_PATH}/public ${LARAVEL_PATH}/public COPY --from=frontend /app/net /app/frontend ``` ### docker-compose.yaml: ```yaml version: "3.7" services: php: build: context: . dockerfile: Dockerfile target: laravel container_name: project_app_server restart: always networks: - project_app nginx: build: context: . dockerfile: Dockerfile target: nginx container_name: project_app depends_on: - php ports: - "8092:80" networks: - project_app volumes: - ./logs/:/app/logs/ networks: project_app: driver: bridge name: project_app ``` ### laravel.conf: ```conf server { listen 80; server_name app.nowtime.cc; root /app/laravel/public; index index.php index.html; access_log /app/logs/$host.log; error_log /app/logs/$host.error.log; location / { try_files $uri $uri/ /index.php?$query_string; } location ^~ /app { alias /app/frontend; index index.html; try_files $uri $uri/ /app/index.html; } location ~ .*\.php(\/.*)*$ { fastcgi_pass project_app_server:9000; include fastcgi.conf; fastcgi_connect_timeout 10; fastcgi_send_timeout 10; fastcgi_read_timeout 10; } } ```
Vue.js 组件 script 分离 作者: Chuwen 时间: 2021-10-14 分类: Vue.js 评论 ## 需要 通常情况下，在单 `.vue` 文件开发很方便，但是当业务逻辑起来了，那么经常需要修改 `script` 和 `template` 部分，用编辑器分屏也不是那么好操作，故有了**组件 script 分离** ## 例子 ### `TableList.vue` ```vue <template> <div> <h1>测试 {{test}}</h1> </div> </template> <script> import index from './index' export default index </script> ``` ### `index.js` > 在 `TableList.vue` 同级创建个如 `index.js` 文件 ```js export default { name: "TableList", components: { 'pagination': Pagination }, data(){ return { test: 'test' } } } ```
Vue.js 下拉框组件当点击菜单栏外的时候关闭菜单 作者: Chuwen 时间: 2021-08-23 分类: Vue.js,JavaScript 评论 ## Menu.vue > 菜单组件 >  ``` <template> <div class="menu" v-if="show"> <!--假设是菜单组件......--> </div> </template> <script> export default { data(){ return { show: true,//是否显示菜单 } }, mounted() { // 在这里加上就可以了 document.addEventListener('click', (e) => { // 如果当前组件(菜单组件)的 DOM “不包含” 当前点击的 DOM // 就关闭显示菜单 if (!this.$el.contains(e.target)) this.show = false }) } } </script> ```
Vue.js 使用 form 表单，按下 Enter 或 Submit 按钮阻止跳转页面 作者: Chuwen 时间: 2021-08-07 分类: Vue.js,JavaScript 1 条评论 #### 添加 `.prevent` 事件修饰符即可阻止跳转 [https://cn.vuejs.org/v2/guide/events.html#事件修饰符](https://cn.vuejs.org/v2/guide/events.html#事件修饰符 "https://cn.vuejs.org/v2/guide/events.html#事件修饰符") > 使用 `form` 的好处还有一点就是，在 input 按下回车(Enter)即可提交表单 ```vue <!--添加 .prevent 修饰符阻止跳转--> <!--注意 login 是自定义函数--> <form @submit.prevent="login"> <input type="text" /> <button type="submit">提交</button> </form> ```