- 计算属性有些时候，我们在模板中放入了过多的逻辑，从而导致模板过重，且难以维护。例如：<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 ...
- 1、独立版本我们可以在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。https://unpkg.com/vue@3.2.21/dist/vue.global.js2.使用 CDN 方法以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。Staticfile CDN（国内） : https://cdn.staticfile.or... 1、独立版本我们可以在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。https://unpkg.com/vue@3.2.21/dist/vue.global.js2.使用 CDN 方法以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。Staticfile CDN（国内） : https://cdn.staticfile.or...
- Vue框架基本配置 Vue框架基本配置
上滑加载中
推荐直播
-
华为云码道Skill实战与极速交付，智能开发全链路实战2026/07/22 周三 19:00-21:00
王一男-华为云码道产品规划专家；李炎-华为云码道产品专家；姜浩-华为云HCDG核心组成员
直播深度解读华为云码道6月产品新特性，从Skill市场安装专家技能，带你零距离体验从需求，开发，审查，重构全链路闭环的开发过程。从零构建并交付一个完整项目，让您体验从代码提交到服务上线的“极速”之旅。
回顾中 -
聚开发者之力，创具身新未来2026/07/23 周四 15:00-17:00
张豪杰/程文/王军/刘新春/黄钦开 /张晓天
本次华为云具身智能开发平台CloudRobo培训面向具身智能开发者，带您全流程体验机器人本体R2C小时级接入、环境重建与轨迹生成仿真数据生产、PB级数据管理、数据评测、模型训推、强化学习和Benchmark一键评测等功能，并体验业界主流具身模型应用。
回顾中
热门标签