m0_61472704的博客

一、数据绑定指令概览指令 简介 缩写 {{}} ①插值表达式，实现数据的双向绑定 ②其中内容作为表达式时，还可以用js的语法进行解析 v-html 绑定的内容为html v-bind 绑定属性 : v-text 元素的文本属性绑定 v-model 用户输入时，属性双向绑定 :model v-if 条件判断，一般用来控制dom的显示和隐藏 （也可用v-sh.

上一篇笔记新建一个vue3.0项目新建项目后，用vscode打开，会看到项目目录，如下图来看看我们新建的项目里有哪些内容node_modules npm 加载的项目依赖模块 public 用于存放静态资源，不会被压缩、合并 src 主要开发内容都在这个文件夹下，包含以下几项： ① assets：存放图片、logo ②components:：存放组件 ③ router：存放路由（路由用于界面之间跳转） ④ store：仓库...

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创建项目① 一般选择“自定义项目”，用键盘上下键移动，回车选.....

setUp

一、路由1、安装新建项目时若选择了路由，会自动在创建时就安装配置好，参考：新建一个vue3.0项目若未安装，则运行命令：npm install vue-router@4，参考：vue-router官方文档2、配置main.js中引入了router (新建项目时选择了路由，这些文件都会自动生成好)router的具体配置3、应用router-link相当于a标签，实现页面跳转；router-view是路由出口，路由匹配到的组件展现在这里二、组件传值......

vue路由与导航守卫

一、$refs的使用每个组件实例上，都包含一个$ref对象，可用来获取DOM元素或组件的引用。//使用ref属性，给对应组件添加引用名称<my-counter ref="counterRef"></my-counter><button @click="getRef">获取 $refs 的引用</button>methods:{ getRef(){ //通过this.$refs.引用名称 可以引用组件实例 console.l

一、组件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

一、侦听器1、什么是watch侦听器watch允许开发者监视数据的变化，从而做出特定的操作。语法如下：<input type="text" v-model="username"/>const vm = new vue({ el:"#app", data:{ username:"" }, watch:{ //要监视哪个数据，就把数据名当作方法名即可 username(newVal, oldVal){ con

前言：安装vue_devtools工具方便调试安装：1、下载vue_devtools工具百度网盘链接: https://pan.baidu.com/s/1XE-8jyifC_1Ut3xjZPb2cA 提取码: ub2u2、谷歌浏览器中添加工具打开右上角“开发者模式”，把下载的文件拖进去，就好了！最后记得把“允许访问文件网址”打开。一、vue简介1、概念：一套构建用户界面的前端框架2、两个特性：① 数据驱动视图 ②...

一、什么是前端工程化？模块化：js、css、资源的模块化 组件化：复用现有的UI结构、样式和行为 规范化：目录结构的划分、编码/接口/文档的规范化、GIt分支管理 自动化：自动构建、部署、测试前端工程化是指：在企业级的项目开发中，把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化。前端工程化的解决方案例如：gulp、webpack、grunt、parcel二、webpack的基本使用1、什么是webpack？概念：webpack是前端项目工程化的具体解决方案功能：提