- 侦听器侦听属性，响应数据（data&computed）的变化，当数据变化时，会立刻执行对应函数， 值类型 函数类型例：const vm = new Vue({ el: '#app', data: { msg: 'hello，你好呀，我是杉杉', }, watch: { msg () { console.log('msg的值改变啦~'); } }}) /... 侦听器侦听属性，响应数据（data&computed）的变化，当数据变化时，会立刻执行对应函数， 值类型 函数类型例：const vm = new Vue({ el: '#app', data: { msg: 'hello，你好呀，我是杉杉', }, watch: { msg () { console.log('msg的值改变啦~'); } }}) /...
- 一. 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...
上滑加载中
推荐直播
-
华为云码道-玩转OpenClaw，在线养虾2026/03/11 周三 19:00-21:00
刘昱，华为云高级工程师/谈心，华为云技术专家/李海仑，上海圭卓智能科技有限公司CEO
OpenClaw 火爆开发者圈，华为云码道最新推出 Skill ——开发者只需输入一句口令，即可部署一个功能完整的「小龙虾」智能体。直播带你玩转华为云码道，玩转OpenClaw
回顾中 -
华为云码道-AI时代应用开发利器2026/03/18 周三 19:00-20:00
童得力，华为云开发者生态运营总监/姚圣伟，华为云HCDE开发者专家
本次直播由华为专家带你实战应用开发，看华为云码道(CodeArts)代码智能体如何在AI时代让你的创意应用快速落地。更有华为云HCDE开发者专家带你用码道玩转JiuwenClaw，让小艺成为你的AI助理。
回顾中 -
Skill 构建 × 智能创作：基于华为云码道的 AI 内容生产提效方案2026/03/25 周三 19:00-20:00
余伟，华为云软件研发工程师/万邵业（万少），华为云HCDE开发者专家
本次直播带来两大实战：华为云码道 Skill-Creator 手把手搭建专属知识库 Skill；如何用码道提效 OpenClaw 小说文本，打造从大纲到成稿的 AI 原创小说全链路。技术干货 + OPC创作思路，一次讲透！
回顾中
热门标签