![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue基础
文章平均质量分 57
麻瓜呀
前端小小白
展开
-
vue3框架腾讯地图v1版项目-MultiMarker点标记自定义样式和图片的写法
腾讯地图v1版 MultiMarker点标记功能中的样式应用, 更换点标记的图片等方法原创 2024-06-06 15:03:41 · 464 阅读 · 0 评论 -
html- a标签包裹img标签, 点击图片无法跳转问题记录及解决方法
这里的解决方式通过把a标签跟img标签的结构改成同级, 然后样式中对a标签添加绝对定位, 并且保证a标签的z-index为当前最高层级。首先明确我们的目标, 就是a标签包裹的内容, 都能点击后以后直接跳转。原创 2023-10-24 17:39:20 · 1258 阅读 · 0 评论 -
vue基础-侦听器watch
侦听器watch1.作用侦听data/计算属性中声明的变量的值的变化2.语法watch: { 被侦听的属性名(newVal, oldVal)){ newVal: 表示修改后的值 oldVal: 表示修改前的值 } }<template> <div> // 注意: watch是和计算属性computed同级的 <input type="text" v-model="name" />原创 2022-05-26 21:55:17 · 172 阅读 · 0 评论 -
vue基础-computed计算属性
computed计算属性1. 计算属性用途例如购物车, 总价是依赖商品价格算出来的当你需要依赖一些变量计算出来结果的时候, 就可以使用计算属性注: 计算属性不能和data里的数据重名2. 代码示例<template> <div> <p>商品1: <input type="number" v-model.number="product1" /></p> <p>商品2: <input type="n原创 2022-05-26 21:36:14 · 284 阅读 · 0 评论 -
vue基础-filter过滤器
filter过滤器1. 作用转换格式, 把变量或者表达式转换出来 -2. 语法:{{ 表达式 | 方法名 }}3. 代码示例<template> <div> <h1>价格: {{ price }}</h1> <h1>{{ price | rmb }}</h1> <h1>{{ price | dollar }}</h1> <h1>{{ price | o原创 2022-05-26 21:26:45 · 84 阅读 · 0 评论 -
vue基础-动态设置样式class和style
动态设置样式class和style一. :class语法:class="{类名: 布尔值, 类名2: 布尔值}"作用: 动态设置class代码示例<template> <div> <button :class="{ grey: isOn === true, white: isOn === false }" @click="isOn = !isOn" > 开关 &l原创 2022-05-26 21:19:30 · 625 阅读 · 0 评论 -
vue基础-实现控制元素显示隐藏 v-show与v-if,以及v-if-else
v-show与v-if作用一.v-show控制元素显示, 通过display: none控制显示语法: v-show=“变量或者表达式”如果变量或者表达式为true, 会显示标签, 否则隐藏二. v-ifv-if控制标签显示语法: v-if=“变量或者表达式”v-if通过控制标签是否删除显示 , v-if有性能优势三. 代码示例<template> <div> <h1 v-show="age >= 18">年满18岁才能看到以下内容&原创 2022-05-26 21:03:07 · 3808 阅读 · 0 评论 -
vue基础v-moder修饰符( number, trim, lazy )
v-moder修饰符一. v-model修饰符语法法: v-model.修饰符="变量"二.这里只列举v-model修饰符在表单中的作用number修饰符: 把数据转换为数字类型并赋值给变量trim修饰符: 去掉字符串首尾空格lazy修饰符: 等表单失去焦点, 才把值赋予给Vue数据变量三. 代码示例<template> <div> <p>年龄: <input type="number" v-model.number="age" /原创 2022-05-26 20:49:16 · 1255 阅读 · 0 评论 -
vue基础-v-on的修饰符
v-on的修饰符一. 事件修饰符的语法:@事件名.修饰符="..."注: @是v-on的简写形式二.prevent修饰符作用: 阻止事件默认行为代码示例:<a href="https://www.baidu.com" @click.prevent="done">去百度</a>这里绑定了点击事件, 点击事件默认行为就是点击交互, 所以这里的按钮为禁用状态三. stop修饰符作用阻止事件冒泡代码示例:<template> <原创 2022-05-26 20:14:34 · 506 阅读 · 0 评论 -
vuex基础
vuex介绍作用方便组件通信, 状态管理模式(管理共享数据用的)Vuex是采用集中式管理组件依赖的共享数据的一个工具, 可以解决不同组件数据共享的问题项目当中引入 vuex下载包 npm i vuex@3根据vue版本下载对应版本的vuex, 最新版的vuex仅支持vue3配置项目 main.jsimport Vue from 'vue'import App from './App.vue'Vue.config.productionTip = false// 引入 v原创 2022-05-24 20:35:25 · 155 阅读 · 0 评论 -
vue侦听器watch
vue侦听器watch一. 侦听器watch的用途可以侦听data/computed属性值改变侦听一个属性变化基本语法:watch:{ "被侦听的属性名"(newVal, oldVal){ } }二.侦听器完整例子<template> <div> <input type="text" v-model="name"> </div></template><script>export defa原创 2022-05-23 19:49:45 · 177 阅读 · 0 评论 -
vue计算属性computed
vue计算属性computed一. 计算属性computed用途和语法例如购物车,当你需要根据一些变量计算出来结果的时候语法: computed: { "计算属性名" () { return "值" } }注意:依赖的变量变化的时候会重新计算计算属性不能和data里的数据重名二. 计算属性computed示例<template> <div> <p>{{ num }}</p&g原创 2022-05-23 19:44:28 · 139 阅读 · 0 评论 -
Vue过滤器属性filter
vue属性过滤器filter一. 过滤器filter作用作用是转换格式, 把变量或者表达式转换出来Vue中的过滤器场景全局定义字母都大写的过滤器字母转大写, 输入"hello", 输出"HELLO"局部定义字符串翻转的过滤器字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"二. 过滤器filter语法:全局注册的语法:Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})局部注册的语法:原创 2022-05-23 19:38:22 · 1036 阅读 · 0 评论 -
Vue组件和组件通信
Vue组件和组件通信一.Vue组件概念, 创建注册使用; 封装组件概念 :组件是可复用的 Vue 实例, 封装标签, 样式和JS代码 — 一个vue文件就是一个组件组件化 :封装的思想,把页面上 可重用的部分 封装为 组件,从而方便项目的开发和维护一个页面,可以拆分成一个个组件,一个组件就是一个整体, 每个组件可以有自己独立, 互不影响口诀: 哪部分标签复用, 就把哪部分封装到组件内组件内template只能有一个根标签组件内data必须是一个函数, 独立作用域原创 2022-05-17 19:10:00 · 404 阅读 · 0 评论 -
vue通过设置代理解决跨域(适合初学vue测试学习阶段使用)
vue通过设置代理解决跨域此方式适合适合初学vue测试学习阶段使用, 使用的是vue2的版本步骤1通过vue脚手架创建好项目, 没有脚手架请先行安装vue脚手架.创建vue项目命令vue create 项目名// 规范命名, 小写字母开头这里使用的是vue2的版本步骤二打开项目根目录创建vue.config.js文件里面配置代码module.exports = { devServer: { // 设置代理 port: 3009, // 自定义端口号 o原创 2022-05-11 10:44:15 · 269 阅读 · 0 评论 -
Vue基础(笔记)
一.Vue基础概念是渐进式javascript框架, 一套拥有自己规则的语法渐进式步骤:声明式渲染→组件系统→客户端路由→大规模状态管理→构建工具框架: 拥有自己的规则和元素, 比库强大库: 封装属性和方法作用提升开发效率MVVM设计模式设计模式:一类问题的通用解决方案MVVM: 数据(模型)视口 视口模型二. Vue-脚手架vue/cli脚手架概念: Vue官方提供的一个全局模块板, 此包用于创建脚手架项目好处: 开箱即用,0配置webpack, 支持原创 2022-05-09 22:17:08 · 234 阅读 · 0 评论 -
vue项目中引入moment依赖方式(配置显示年月日时间格式)
vue项目中引入moment依赖方式(配置国内时间显示格式)效果格式展示: 2022-05-04显示操作步骤:一. 在项目根目录下, 下载moment依赖下载命令npm i moment二. 在想要引入的.vue文件下,进行引入在scripti标签中引入momentimport moment from "moment"三. 在script标签中配置过滤器filters中的函数addProduct注: 过滤器filters与与data同级, 用逗号隔开export default原创 2022-05-04 14:27:08 · 6332 阅读 · 0 评论