内容绑定,事件绑定 v-text 设置标签文本值(textContent) 会将标签文本内容全部替换 支持字符串拼接 <div id="app"> <h2 v-text="message"></h2> <h2 v-text="message">这句话会被覆盖</h2> <h2 v-text="mes ...
转载 2021-09-23 17:53:00
108阅读
2评论
\
原创 2022-07-06 08:38:54
132阅读
v-if:直接操作的是DOM元素。v-show操作的是display。◆v-if指令的作用是:根据表达式的真假切换元素的显示状态 ◆本质是通过操纵dom元素来切换显示状态 ◆表达式的值为true,元素存在于dom树中,为false,从dom树中移除 ◆频繁的切换v-show,反之使用v-if,前者的切换消耗小  结果:1,原始的没有显示的时候:2,点击显示出来:代码: <
原创 2022-07-06 08:37:30
125阅读
【代码】Vue 本地应用-计数器。
原创 2023-07-29 03:42:31
58阅读
◆v-html指令的作用是:设置元素的innerHTML ◆内容中有htm|结构会被解析为标签 ◆v-text指令无论内容是什么,只会解析为文本 ◆解析文本使用v-text,需要解析htm|结构使用v-html  结果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8
原创 2022-07-06 08:38:00
148阅读
◆v-show指令的作用是:根据真假切换元素的显示状态 ◆原理是修改元素的display,实现显示隐藏 ◆指令后面的内容最终都会解析为布尔值 ◆值为true元素显示,值为false元素隐藏◆数据改变之后,对应元素的显示状态会同步更新【主要是通过操作display】结果:1,原始图:2,点击年龄加一: 3,点击切换状态图:代码: <!DOCTYPE html><
原创 2022-07-06 08:37:53
158阅读
◆通过Vue实现常见的网页效果 ◆学习Vue指令,以案例巩固知识点 ◆Vue指令指的是,以v-开头的- -组特殊语法◆v-text指令的作用是:设置标签的内容(textContent) ◆默认写法会替换全部内容,使用差值表达式{}可以替换指定内容 ◆内部支持写表达式 结果:代码:<!DOCTYPE html><html lang="en"><head> &
原创 2022-07-06 08:41:47
118阅读
◆v-bind指令的作用是:为元素绑定属性◆完整写法是v-bind:属性名◆简写的话可以直接省略v-bind,
原创 2022-07-06 14:19:09
143阅读
如何导入GitHub下的vue项目,并在本地电脑启动一、准备工作node.js环境(npm包管理器)vue-cli 脚手架构建工具cnpm、npm 的淘宝镜像注: Henley-PC已经使用全局安装好,(建议全局安装)其他电脑需检查二、安装node.js安装node.js比较简单,需要该安装路径则修改,直接下一步即可注:建议安装比较新版本的node.js,否则新版本cnpm等不支持旧版本node.
转载 2024-05-15 08:56:00
170阅读
vue-cli本地环境API代理设置和解决跨域前言我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的
原创 2023-11-27 11:42:33
420阅读
使用vue的同学们大都是基于vue-cli来搭建项目的,vue-cli中的配置全面强大。// 常用的命令 npm run dev // 本地热更新模式 npm run build //生产模式 会在根目录下打包出一个dist文件夹,直接放在服务器上就可以使用了开发阶段与后台同学进行数据交互(调试接口) 本机与服务器之间会出现跨域问题跨域报错解决办法在npm run dev执行后,项目会在本地nod
svg图标放大不失真,png会出现失真现象。一、方法一1、在对应vue项目里添加插件vue add svg-sprite输入 Y2、再执行npm install svgo svgo-loader --save-dev然后你就会看到 自动新增 的根目录文件vue.config.js和src/components/SvgIcon.vue,如图:3、在main.js里注册SvgIcon组件//引入s
转载 2023-09-05 23:01:13
180阅读
Vue项目搭建与部署一,介绍与需求 1.1,介绍Vue  是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用Vue两大核心思想:组件化和数据驱动。组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用;数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的D
转载 2024-07-16 11:11:16
86阅读
方式一:在windows本地部署1.准备vue项目 打开终端,输入vue create hello命令来创建一个名为hello的vue项目用于部署 cd hello npm run build 来对hello项目进行打包,打包后会生成一个dist文件夹2.nginx官网下载nginx,版本选择最新的稳定版即可下载并解压后进入nginx文件夹下的conf文件夹,找到nginx.conf文件并打开 将
项目背景这个项目是跟着B站做的,任务目标是完成一个具备基本记事能力的记事本。基本记事能力:新增、删除、清空。功能实现新增通过v-for生成列表结构<li class="todo" v-for="(item,index) in list">add:function(){this.list.push(this.inputValue);},通过v-model获取用户数据data:{     
转载 2021-02-09 09:44:12
317阅读
2评论
Vue在Windows系统下本地项目的安装与部署一、项目的前期准备1、node.js 的安装Vue项目通常通过webpack工具来构建,而webpack命令是依赖node.js开发环境的,所以首先要安装node.js。node.js的官方地址为:https://nodejs.org/en/download/,下载相应的版本。测试是否安装成功:在终端输入npm若显示npm相关命令则安装成功。2、cn
转载 6月前
80阅读
# 使用 Vue.js 开发 Android 本地应用 随着移动互联网的快速发展,越来越多的开发者希望使用他们熟悉的前端工具来构建原生移动应用Vue.js 作为一种流行的前端框架,同样也可以用于开发 Android 应用。通过一些工具和框架,例如 Cordova 或 Capacitort, 我们能够将 Vue.js 应用打包成可在 Android 设备上运行的原生应用。本文将指导你如何使用 V
原创 10月前
38阅读
一、直接在的src下写图片的路径这也是以前写静态页面时候用的静态路径,直接把图片的相对路径写死在上面。二、通过 import 导入图片资源 // 绑定数据 import mySrc from "./xxxx.jpg"; // 导入图片的相对路径 export default { data: () => ({ myPicture: mySrc, }) } 三、通过 require 导入图片资
# Android 本地 Vue 开发指南 随着移动应用的普及,越来越多的开发者选择使用 Vue.js 这个轻量级的框架来构建用户界面。然而,在 Android 原生应用中,如何使用 Vue.js 构建本地页面呢?本文将介绍一个结合 Android 和 Vue 的开发方案,并提供代码示例以帮助你更好地理解。 ## 什么是 Android 本地 Vue? Android 本地 Vue 是将 V
原创 7月前
21阅读
Vue本地应用前言内容绑定,事件绑定v-text指令v-html指令v-on指令基础案例练习:计数器显示切换,属性绑定v-showv-ifv-bind案例练习:图片切换列表循环,表元素绑定v-forv-on补充v-model案例练习:记事本小结 前言本文是Vue框架学习的第二部分-Vue本地应用,从“内容绑定,事件绑定”,“显示切换,属性绑定”,“列表循环,表元素绑定”三个方面学习v-text
  • 1
  • 2
  • 3
  • 4
  • 5