![](https://img-blog.csdnimg.cn/direct/3c28ae8f7ef04653b2739eaf6699369b.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
文章平均质量分 70
vue
*洋芋果果
软件开发
展开
-
vue3数据指令绑定
一、数据绑定指令概览指令 简介 缩写 {{}} ①插值表达式,实现数据的双向绑定 ②其中内容作为表达式时,还可以用js的语法进行解析 v-html 绑定的内容为html v-bind 绑定属性 : v-text 元素的文本属性绑定 v-model 用户输入时,属性双向绑定 :model v-if 条件判断,一般用来控制dom的显示和隐藏 (也可用v-sh.原创 2022-02-09 15:31:20 · 1170 阅读 · 0 评论 -
认识vue3.0项目的目录结构
上一篇笔记新建一个vue3.0项目新建项目后,用vscode打开,会看到项目目录,如下图来看看我们新建的项目里有哪些内容node_modules npm 加载的项目依赖模块 public 用于存放静态资源,不会被压缩、合并 src 主要开发内容都在这个文件夹下,包含以下几项: ① assets:存放图片、logo ②components::存放组件 ③ router:存放路由(路由用于界面之间跳转) ④ store:仓库...原创 2022-02-08 10:17:43 · 3037 阅读 · 0 评论 -
新建一个vue3.0项目
1.输入 vue -V 检查脚手架版本如图,若版本低于3.0,则需要更新②更新脚手架(vue-cli)先卸载旧版,再下载新版卸载npm uninstall -g vue-cli下载npm install -g @vue/cli如果下载不成功,如图,则需要删除node_modules下的@vue文件夹再执行安装命令更新成功2.输入命令vue create vue-next-test创建项目① 一般选择“自定义项目”,用键盘上下键移动,回车选.....原创 2022-02-07 17:49:46 · 1648 阅读 · 0 评论 -
vue3之setup的理解与使用
setUp原创 2022-02-15 17:10:59 · 4090 阅读 · 0 评论 -
vue3 路由、组件传值、生命周期
一、路由1、安装新建项目时若选择了路由,会自动在创建时就安装配置好,参考:新建一个vue3.0项目若未安装,则运行命令:npm install vue-router@4,参考:vue-router官方文档2、配置main.js中引入了router (新建项目时选择了路由,这些文件都会自动生成好)router的具体配置3、应用router-link相当于a标签,实现页面跳转;router-view是路由出口,路由匹配到的组件展现在这里二、组件传值......原创 2022-02-10 14:18:05 · 4091 阅读 · 0 评论 -
vue 关于路由和导航守卫
vue路由与导航守卫原创 2022-06-15 18:32:58 · 662 阅读 · 0 评论 -
vue基础(五)
原创 2022-05-26 10:45:00 · 320 阅读 · 0 评论 -
vue基础(四)ref 和 数组 的使用
一、$refs的使用每个组件实例上,都包含一个$ref对象,可用来获取DOM元素或组件的引用。//使用ref属性,给对应组件添加引用名称<my-counter ref="counterRef"></my-counter><button @click="getRef">获取 $refs 的引用</button>methods:{ getRef(){ //通过this.$refs.引用名称 可以引用组件实例 console.l原创 2022-05-03 17:10:25 · 4260 阅读 · 0 评论 -
vue 基础(三)
一、组件1、使用组件的三个步骤//3、以标签形式引用<div> <Left></Left></div>//1、import导入组件import Left from '@/components/Left.vue'//2、在components中注册组件export default { components:{ Left }}2、vue.components全局注册组件在main.js中配置://1原创 2022-04-21 17:53:02 · 878 阅读 · 0 评论 -
vue基础(二)
一、侦听器1、什么是watch侦听器watch允许开发者监视数据的变化,从而做出特定的操作。语法如下:<input type="text" v-model="username"/>const vm = new vue({ el:"#app", data:{ username:"" }, watch:{ //要监视哪个数据,就把数据名当作方法名即可 username(newVal, oldVal){ con原创 2022-04-13 13:17:08 · 4009 阅读 · 0 评论 -
vue基础(一)
前言:安装vue_devtools工具方便调试安装:1、下载vue_devtools工具百度网盘链接: https://pan.baidu.com/s/1XE-8jyifC_1Ut3xjZPb2cA 提取码: ub2u2、谷歌浏览器中添加工具打开右上角“开发者模式”,把下载的文件拖进去,就好了!最后记得把“允许访问文件网址”打开。一、vue简介1、概念:一套构建用户界面的前端框架2、两个特性:① 数据驱动视图 ②...原创 2022-04-09 17:07:22 · 3830 阅读 · 5 评论 -
前端工程化与webpack
一、什么是前端工程化?模块化:js、css、资源的模块化 组件化:复用现有的UI结构、样式和行为 规范化:目录结构的划分、编码/接口/文档的规范化、GIt分支管理 自动化:自动构建、部署、测试前端工程化是指:在企业级的项目开发中,把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化。前端工程化的解决方案例如:gulp、webpack、grunt、parcel二、webpack的基本使用1、什么是webpack?概念:webpack是前端项目工程化的具体解决方案功能:提原创 2022-04-09 12:48:52 · 749 阅读 · 0 评论