- 一. Vue条件渲染分享我的学习收获希望能够帮到大家今天为大家分享关于Vue的条件渲染（v-if v-else v-else-if v-show）下面我们来结合代码理解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="... 一. Vue条件渲染分享我的学习收获希望能够帮到大家今天为大家分享关于Vue的条件渲染（v-if v-else v-else-if v-show）下面我们来结合代码理解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="...
- 一、前言vant中的van-image组件的src参数默认为图片的网络链接：<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg"/>当要引用本地的图片时，直接写图片的路径在vue项目中会刷不出图片（但用 <img> 标签可以显示 ）。 二、解决方式一<van-swipe :autopl... 一、前言vant中的van-image组件的src参数默认为图片的网络链接：<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg"/>当要引用本地的图片时，直接写图片的路径在vue项目中会刷不出图片（但用 <img> 标签可以显示 ）。 二、解决方式一<van-swipe :autopl...
- 计算属性有些时候，我们在模板中放入了过多的逻辑，从而导致模板过重，且难以维护。例如：<div id="app"> {{ message.split('').reverse().join('') }}</div>碰到这样的情况，我们必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串，而且，一旦我们想要在模板中多次使用翻转字符串时，会更加麻烦。 所以，当我们处理复杂逻辑时... 计算属性有些时候，我们在模板中放入了过多的逻辑，从而导致模板过重，且难以维护。例如：<div id="app"> {{ message.split('').reverse().join('') }}</div>碰到这样的情况，我们必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串，而且，一旦我们想要在模板中多次使用翻转字符串时，会更加麻烦。 所以，当我们处理复杂逻辑时...
- v-model指令可以在表单元素上创建双向数据绑定。即数据更新元素更新、元素更新数据也会更新。本质上v-model为语法糖元素类型属性事件input[type=text]、textareavalueinputinput[checkbox]、input[radio]checkedchangeselectvaluechange input type=text 文本框<div id="app">... v-model指令可以在表单元素上创建双向数据绑定。即数据更新元素更新、元素更新数据也会更新。本质上v-model为语法糖元素类型属性事件input[type=text]、textareavalueinputinput[checkbox]、input[radio]checkedchangeselectvaluechange input type=text 文本框<div id="app">...
- 列表渲染利用v-for指令，基于数据多次渲染元素。 在v-for中使用数组用法：(item, index) in items参数：items: 源数据数组item：数组元素别名index：可选，索引 可以访问所有父作用域的属性<ul id="app"> <li v-for="(person, index) in persons"> {{ index }}---{{ person.n... 列表渲染利用v-for指令，基于数据多次渲染元素。 在v-for中使用数组用法：(item, index) in items参数：items: 源数据数组item：数组元素别名index：可选，索引 可以访问所有父作用域的属性<ul id="app"> <li v-for="(person, index) in persons"> {{ index }}---{{ person.n...
- v-on指令的修饰符 事件修饰符 .stop调用 event.stop，阻止事件冒泡 <!-- 此时只弹出button --> <div id="app"> <div @click="alert('div')"> <button @click.stop="alert('button')">点击</button> </div></div>const vm = new Vue({ ... v-on指令的修饰符 事件修饰符 .stop调用 event.stop，阻止事件冒泡 <!-- 此时只弹出button --> <div id="app"> <div @click="alert('div')"> <button @click.stop="alert('button')">点击</button> </div></div>const vm = new Vue({ ...
- Vue相关指令具有特殊含义、拥有特殊功能的特性指令带有v-前缀，表示它们是Vue提供的特殊特性指令可以直接使用data中的数据 v-pre跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。 <!-- 不会被编译 --> <span v-pre>{{ msg }}</span> v-cloak这个指令保持在元素上直到关联实例结束编... Vue相关指令具有特殊含义、拥有特殊功能的特性指令带有v-前缀，表示它们是Vue提供的特殊特性指令可以直接使用data中的数据 v-pre跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。 <!-- 不会被编译 --> <span v-pre>{{ msg }}</span> v-cloak这个指令保持在元素上直到关联实例结束编...
- 开始使用Vue引入vue.js官网：vuejs.org开发版本：包含完整的警告和调试模式生产版本：删除了警告，体积更小引入vue.js后，给我们提供了一个构造函数 Vue在js中，new Vue()new Vue() 后会返回一个vue实例对象，我们用变量接着它const vm = new Vue()传递一个配置对象{} – > const vm = new Vue({}) el类型： 字... 开始使用Vue引入vue.js官网：vuejs.org开发版本：包含完整的警告和调试模式生产版本：删除了警告，体积更小引入vue.js后，给我们提供了一个构造函数 Vue在js中，new Vue()new Vue() 后会返回一个vue实例对象，我们用变量接着它const vm = new Vue()传递一个配置对象{} – > const vm = new Vue({}) el类型： 字...
- 1. 如何在vue中集成tsvue-cli 创建项目时选择ts依赖yarn add typescript 进行安装vite 安装tsvite—>vue/vue-ts就可以直接写ts代码了可以学习下typescript—》点击蓝色字体跟我一起快速入门ts哦学了typescript之后再用ts的写法来写vue组件代码 2. composition API 中 使用vue-routermian.... 1. 如何在vue中集成tsvue-cli 创建项目时选择ts依赖yarn add typescript 进行安装vite 安装tsvite—>vue/vue-ts就可以直接写ts代码了可以学习下typescript—》点击蓝色字体跟我一起快速入门ts哦学了typescript之后再用ts的写法来写vue组件代码 2. composition API 中 使用vue-routermian....
- 一、前言Vue项目编译过程中，出现如下错误信息：ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJsUnexpected token name «i», expected punc «;» [./node_modules/element-ui/src/utils/merge.js:2,0][static/js/ven... 一、前言Vue项目编译过程中，出现如下错误信息：ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJsUnexpected token name «i», expected punc «;» [./node_modules/element-ui/src/utils/merge.js:2,0][static/js/ven...
- 条件判断v-if条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示：<div id="app"> <p v-if="seen">现在你看到我了</p></div> <script>const app = { data() { return { seen: true /* 改为false，信息就无法显示 */ } }} Vue.creat... 条件判断v-if条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示：<div id="app"> <p v-if="seen">现在你看到我了</p></div> <script>const app = { data() { return { seen: true /* 改为false，信息就无法显示 */ } }} Vue.creat...
- Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。插值文本数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：<!DOCTYPE ht... Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。插值文本数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：<!DOCTYPE ht...
- 刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：const app = Vue.createApp({ /* 选项 */ })传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组... 刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：const app = Vue.createApp({ /* 选项 */ })传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组...
- 我们使用了 npm 安装项目(Vue-cli 和 Vite)，我们在 IDE（Vscode、Atom等） 中打开该目录，结构如下所示：命令行工具 vue-cli（runoob-vue3-test）：Vite目录解析接下来，我们打开目录下的 src/APP.vue 文件，代码如下（解释在注释中）：src/APP.vue 文件代码<!-- 展示模板 --><template> <img alt... 我们使用了 npm 安装项目(Vue-cli 和 Vite)，我们在 IDE（Vscode、Atom等） 中打开该目录，结构如下所示：命令行工具 vue-cli（runoob-vue3-test）：Vite目录解析接下来，我们打开目录下的 src/APP.vue 文件，代码如下（解释在注释中）：src/APP.vue 文件代码<!-- 展示模板 --><template> <img alt...
- 打包 Vue 项目使用以下命令：cnpm run build执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。如果直接双击打开 index.html，在浏览器中页面可能是空白了，要正常显示则需要修改下 index.html ... 打包 Vue 项目使用以下命令：cnpm run build执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。如果直接双击打开 index.html，在浏览器中页面可能是空白了，要正常显示则需要修改下 index.html ...
上滑加载中
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新，构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间，华为云展示了Serverless与MCP融合创新的解决方案，本期访谈直播，由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持，华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中，探讨处理器生态的关键要素及其联系，分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源，3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源，3步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签