xyx-Eshang的博客

文章目录1.通过路由传参1.1.使用\传参1.2.调用函数传参2.通过路由接收参数1.通过路由传参1.1.使用<router-link>传参<router-link>用to属性指定跳转的路径，而加上冒号变成==:to==后，属性值就必须是一个对象，这个对象中就可以设置很多内容：query参数就是GET的参数，参数会直接拼接到url上还可以设置params参数，这就是POST参数1.2.调用函数传参首先路由的跳转用到this.$router.push( )，其中的

文章目录0.参考视频1.通过函数触发路由跳转1.1.目标分析1.2.目标实现2.嵌套路由2.1.目标分析2.2.目标实现0.参考视频120.嵌套路由1.通过函数触发路由跳转1.1.目标分析在"为我评分"界面，若评分少于3分，就会通过路由("/form")跳转到"表单填写"1.2.目标实现在函数中，通过this.$router.replace( "xxx" )来切换当前的路径：2.嵌套路由2.1.目标分析在其中一个由<router-view>渲染出来的组件中，再定义一个由&

文章目录0.参考视频1.目标与实现思路2.实践起来2.1.安装Vue-router插件2.1.创建并注册组件2.2.为导航栏对应按键添加\2.3.为相应组件添加\确定展示组件的位置2.4.创建并暴露路由器2.5.在main.js中引入并注册路由器0.参考视频118.路由基本使用1.目标与实现思路当前已有以下组件，希望实现的功能如下：Menu：导航栏，点击"表单"显示Form组件，点击"评分"显示Star组件Main：Form组件和Star组件将展示在Main组件中Form：表单组件Star

文章目录0.参考视频1.生活中的路由与路由器2.SPA应用3.Vue中的路由(vue-router)3.1.Vue路由初理解3.2.Vue路由类型0.参考视频117.路由的简介1.生活中的路由与路由器生活中的路由，就是路由器插槽(key)和主机(value)的一组对应关系通俗地说，路由就是一组KV对路由器则扮演多组路由的管理者2.SPA应用在讲Vue路由之前，需要对SPA应用有一定理解：整个应用只有一个完整的页面点击页面的导航链接不会引起跳转与刷新，只会做页面的局部更新数

文章目录1.flex - 子项占用剩余空间的比例1.1.基本使用1.2."圣杯布局"2.align-self - 子项在==侧轴==的排列方式3.order - 子项在主轴的排列顺序1.flex - 子项占用剩余空间的比例1.1.基本使用flex属性用以分配子项占剩余空间的比例，其值就代表占用的份数以下图为例，父容器定义justify-content: space-between - 首尾贴边，剩余均分虽然是平分了剩余的空间，但其中有间隔。若希望让子元素占满间隔，则可以为他们添加flex属性：

文章目录1.flex-direction - 主轴方向2.justify-content - 主轴子项目排列方式3.flex-wrap - 子项目是否换行4.align-items - 侧轴子项目排列方式(==单行==)5.align-content - 侧轴子元素排列(==多行==)6.flex-flow - 主轴方向、子项目是否换行1.flex-direction - 主轴方向在flex布局中存在主轴，flex容器中的子项目都是沿着主轴排列的我们可以通过flex-direction属性来设置主轴的

文章目录1.传统布局与FLEX布局2.FLEX布局初体验3.FLEX布局原理4.flex布局常见属性1.传统布局与FLEX布局如果是PC端页面布局，建议使用传统布局如果是移动端或不考虑兼容性问题的PC端页面布局，推荐使用FLEX弹性布局2.FLEX布局初体验如果使用传统方式布局，上述的界面则必须用到浮动，且最后还要清除浮动但如果采用FLEX布局，只需为其css样式添加display: flex就能实现先设置好父元素和子元素基本CSS样式和HTML样式：为父元素的css

文章目录0.参考视频1.单文件组件(.vue文件)1.1.命名1.2.单文件组件结构2.根目录文件分析2.1.package.json2.2.package-lock.json3.按照文件执行顺序分析文件3.1.HTML文件 - public/index.html3.2.入口文件 - src/main.js3.3.父组件 - src/App.vue3.4.子组件 - components/HelloWorld.vue4.运用Vue脚手架，自己编写程序4.1.子组件 - Child.vue4.2.父组件 -

文章目录0.前置1.启动可视化搭建面板0.前置在此之前，需要先安装并配置好npm：03.npm安装教程并需要安装好vue全家桶：04.通过npm安装vue全家桶1.启动可视化搭建面板在项目目录中启动命令行程序（在地址栏输入cmd）输入vue-ui启动可视化搭建面板在启动的Vue项目管理器中，“创建” --> “在此创建新项目”输入项目名，包管理器选npm，随后下一步选择预设，这里以"默认"为例等待，出现下方界面，则说明准备就绪了，此时可以自定义插件、

文章目录1.安装vue全家桶2.添加系统变量3.安装webpack1.安装vue全家桶在开始菜单栏搜索"cmd"，右键以管理员身份运行输入下方指令安装vue，其中-g代表安装到global全局目录中npm install vue -g输入下方指令安装vue-routernpm install vue-router -g输入下方指令安装vue-clinpm install -g @vue/cli 2.添加系统变量由于vue脚本安装到了自定义的global

文章目录0.参考文章1.前置知识2.下载和安装3.更改npm本地仓库位置4.配置npm的镜像站5.配置环境变量NODE_PATH0.参考文章npm安装教程1.前置知识npm: Nodejs下的包管理器webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

文章目录0.参考视频1.概述2.VueComponent(简称==VC==)3.VM和VC3.1.二者区别3.2.this的指向0.参考视频57. VueComponent构造函数58. Vue实例与组件实例1.概述组件的本质是一个名为VueComponent的构造函数，是由Vue.extend生成的2.VueComponent(简称VC)VueComponent是一个构造函数，当我们通过下方代码创建组件时：let component = Vue.extend({ ... })ext

文章目录0.参考视频1.概述2.嵌套组件演示2.1.创建子组件2.2.创建父组件，在父组件中==注册==子组件2.3.创建Vue实例(==VM==)，注册父组件2.4.在被挂载的元素中，使用父组件3.标准化开发规约0.参考视频56. 组件的嵌套1.概述最低级的子组件最先定义子组件需要在它的父组件中注册(定义components属性)子组件的HTML写在父组件的template中最高级的父组件在一个Vue实例中注册2.嵌套组件演示2.1.创建子组件在<script>中用V

文章目录0.参考视频1.概述2.基础铺垫2.1.data的两种写法2.2.写法区别：3.创建组件3.1.定义数据3.2.定义模板4.注册组件5.使用组件0.参考视频p54 非单文件组件1.概述非单文件组件：一个文件包含有n个组件单文件组件：一个文件只包含有1个组件，后缀为==.vue==创建组件时一定要定义模板template注册组件用components属性，嵌套组件时也可以在组建中定义components使用组件时，用<组件名> </组件名>

文章目录0.参考视频1.概述2.为什么要用组件0.参考视频p53 对组件的理解1.概述组件：实现应用中局部功能代码和资源的集合组件是可复用的Vue实例：一组可重复使用的模板页面可认为是由n个组件组装而成，组件也可以认为是由n个组件组装而成每个组件包含一整套的html、css和js2.为什么要用组件传统方式编写页面依赖关系混乱，不好维护（一个css/js被多个html使用，牵一发则动全身）代码复用率很低（html中的代码没有复用）组件化编写页面每个组件的功能代

文章目录1.目标和实现思路2.点击更换城市3.更换城市的同时查询天气4.效果演示1.目标和实现思路 目标 实现思路 点击更换城市 v-on 更换城市的同时查询天气 一个函数中调用另一个函数 2.点击更换城市在

文章目录1.目标和实现思路2.按下回车查询数据3.渲染数据4.效果演示1.目标和实现思路 目标 实现思路 按下回车查询数据 v-on搭配axios 渲染数据 v-moedel 2.按下回车查询数据声明Vue实

1.功能介绍在输入框回车查询天气点击按钮查询查询2.导航 - 细节实现[28.网络应用 - 天知道 - 回车查询](28.网络应用 - 天知道 - 回车查询.md)[29.网络应用 - 天知道 - 点击查询](29.网络应用 - 天知道 - 点击查询.md)...

文章目录1.概述2.基础使用3.进阶使用 - 将获取的数据保存到Vue对象中3.1.发送请求到他人服务器的网络接口3.2.发送请求到本地服务器接口1.概述axios回调函数中的this不再指向这个Vue对象，而是这个回调函数和本地应用最大的区别就是改变了数据来源发送跨域请求到后端服务器时，后端服务器需要解决跨域问题2.基础使用很简单，定义methods，在对应的方法体中，直接在里面写axios…即可声明Vue实例，定义sendGet()和sendPost()为被挂载元素添加v-

文章目录1.概述2.axios：功能强大的网络请求库2.1.引入2.2.如何使用3.实践：只使用axios不使用Vue3.1.代码3.2.效果1.概述axios必须先引入才可以使用使用axios.get或axios.post即可发送对应的请求then方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取响应内容或错误信息2.axios：功能强大的网络请求库axios官方文档axios实际上是ajax的封装库，相比原生的ajax，发送请求的方式更加简便。2.1.引入在&lt

文章目录1.章节概述2.导航1.章节概述axios：基于ajax的轻量级网络请求库axios + Vue：二者兼容性甚好案例：天知道 - 天气预报2.导航[25.网络应用 - axios基本使用](25.网络应用 - axios基本使用.md)[26.网络应用 - axios加Vue](26.网络应用 - axios加Vue.md)[27.网络应用 - 天知道](27.网络应用 - 天知道.md)[28.网络应用 - 天知道 - 回车查询](28.网络应用 - 天知道 - 回车查询.m

文章目录0.目标与实现思路1.待办数量为0时，隐藏"统计"和"清空"2.效果演示0.目标与实现思路 目标 实现思路 待办数量为0时，隐藏"统计"和"清空" v-show 1.待办数量为0时，隐藏"统计"和"清空"为"统计"和"隐藏"的元素添加v-show2.效果演示...

文章目录0.目标与实现思路1.点击按钮清空2.效果演示0.目标与实现思路 目标 实现思路 点击按钮清空 v-on 1.点击按钮清空在Vue对象中添加clear()定义按钮元素，使用v-on指令@click2.效果演示...

文章目录0.目标与实现思路1.统计记事本条目数2.效果演示0.目标与实现思路 目标 实现思路 统计记事本条目数 v-text搭配数组 1.统计记事本条目数v-text的值，也可以是一个表达式，如"todoArr.length"定义<div>，设置样式，用v-text指令传值(

文章目录0.目标与实现思路1.鼠标移到选项时显示删除按钮2.点击删除3.效果演示0.目标与实现思路 目标 实现思路 鼠标移到选项时显示删除按钮 v-on搭配v-show 点击删除 v-on搭配数组(splice(num)弹出索引对应元素)

文章目录0.目标与实现思路1.获取用户输入2.生成列表结构3.回车后新增数据4.效果演示0.目标与实现思路 目标 实现思路 获取用户输入 v-model双向绑定 生成列表结构 v-for搭配数组

文章目录1.功能介绍2.导航：细节实现1.功能介绍新增：在输入框中输入并回车，新增数据删除：点击数据右方的"×"删除数据统计：左下角对数据总数进行统计清空：右下角有一个清空所有数据的按钮隐藏：统计、清空这两个元素，在没有数据时会被隐藏2.导航：细节实现[19.本地应用 - 小黑记事本 - 新增](19.本地应用 - 小黑记事本 - 新增.md)[20.本地应用 - 小黑记事本 - 删除](20.本地应用 - 小黑记事本 - 删除.md)[21.本地应用 - 小黑记事本 - 统计](2

文章目录1.概述2.基本使用3.进阶使用 - 搭配v-on改值1.概述v-model指令的作用是：响应式地设置和获取表单元素的值绑定的数据会和表单元素的值相关联绑定的元素←-→表单元素的值，即双向绑定2.基本使用老规矩，先在<script>中声明一个Vue实例之后在<input>标签中加入v-model属性可以看到，表单的值改变 --> message改变 -->有v-text的<div>的值改变3.进阶使用 - 搭配v-on改值目

文章目录1.概述2.常用的事件名3.进阶用法演示3.1.进一步限定事件3.2.触发范围1.概述事件后面可接".属性名"对事件进一步修饰，如keyup.enter限定事件为"松开enter键"事件触发有范围，假设Vue对象挂载到一个<input>中，则唯有在<input>中触发事件方可触发函数2.常用的事件名转自Vue v-on常用事件名 - 持续更新 事件名 触发条件

文章目录1.概述2.基本使用3.进阶使用3.1.获取索引3.2.对象数组1.概述v-for指令的作用是：根据数组数据生成列表结构v-for语法为：(item,index) in 数组上述第一个参数是"单项名"，第二个参数是"索引"如果数组内容变动，由v-for指令渲染的数据也会即时变动(数据是响应式的)2.基本使用v-for会根据数组长度，动态生成<li>基础指令为"单项名 in 数组名""单项"的值是可以被使用的"数组"的值在Vue实例中定义3.进阶使用3.1

文章目录1.阶段小结2.目标简介和分析3.实践3.1.创建Vue实例3.2.设置被挂载的元素3.3.效果演示1.阶段小结列表数据使用数组保存起来v-bind指令可以设置元素属性，如:src、:alt等v-show和v-if都可以切换元素显示状态，出于性能考虑，优先使用v-show2.目标简介和分析 目标 分析 展示图片 v-bind指

文章目录1.概述2.v-bind的使用2.1.基础使用2.2.三目运算符3.实践进阶：搭配v-on指令修改悬停时样式3.1.定义正常/悬停时的css3.2.在js中创建Vue实例3.3.将Vue实例挂载到对应的元素上3.4.使用v-bind指令和v-on指令设置各属性3.5.效果展示1.概述v-bind指令的作用是：为元素绑定属性完整写法是v-bind:属性名简写为==:属性名==2.v-bind的使用2.1.基础使用老规矩，创建Vue实例并定义好属性，随后在被挂载的元素中使用v-bind

文章目录1.概述2.实践：年龄>18时显示黄图3.尽量不使用v-if1.概述v-if指令的作用是：根据表达式的真假，从DOM树中操作元素表达式为true，则将元素存放在DOM树中表达式为false，则将元素从DOM树移除从DOM树中操作，性能非常低，因此尽量使用v-show2.实践：年龄>18时显示黄图先创建Vue实例，设置好"age"用以判断设置被挂载的元素(将id设为"yellow")，并添加v-if属性未满18岁时：满18岁后：3.尽量不使用v-if

文章目录1.概述2.v-show指令3.进阶：搭配v-on切换元素展示状态1.概述v-show指令的作用是：根据boolean值切换元素的显示状态(不只是图片)原理是修改元素的display属性，实现显示/隐藏，隐藏为"display:none"指令后面的内容，最终都会被解析成boolean值(也可以写表达式)若没有Vue实例挂载在元素或其父元素上，单纯写v-show并没有效果2.v-show指令当Vue实例挂载在该元素或其父元素上以后，v-show便起作用了：3.进阶：搭配v-on切

文章目录1.阶段小结2.知识点传送门2.源代码1.阶段小结创建Vue实例时：el(挂载点)，data(数据)，methods(方法)v-on指令的作用是绑定事件，简写为@同一个对象中可直接用this.属性名调用属性不同对象中则用引用名.属性名调用属性v-text指令的作用是：设置元素的textContent，也可以用插值表达式{{}}v-html指令的作用是：设置元素的innerHTML，相比v-text可解析其中的HTML元素2.知识点传送门[07.本地应用

文章目录1.概述2.为元素绑定事件3.常用的事件名4.实践4.1.基础实践：单击按钮后弹窗4.2.进阶实践1：修改另一Vue对象的属性4.3.进阶实践2：传参1.概述v-on指令的作用是：为元素绑定事件事件名不需要写on指令也可以简写为==@==绑定的函数定义在methods属性当中2.为元素绑定事件先定义Vue实例new Vue({ //挂载到id名为app的元素 el: "#app", methods: { //定义方法

文章目录1.概述2.实践1.概述v-html指令的作用是：设置元素的innerHTML属性其中的html结构会被解析v-text指令只能将内容解析成最基本的文本2.实践

文章目录1.概述2.如何使用3.替换范围4.若替换内容包括html元素5.与原先插值表达式的区别1.概述v-text指令的作用：设置标签的内容(textContent)该写法会替换选中标签中的全部内容(包括其子元素)内部支持写表达式2.如何使用在需要替换文本值的标签中，为其添加"v-text"属性：在js中创建Vue实例，定义el属性以选定元素，定义data对象属性以设置替换文本效果如下3.替换范围替换范围是标签尖括号中的所有内容！换言之，如果其中有子元素，这些子

1.本章核心通过Vue实现常见的网页效果学习Vue指令，以案例巩固知识点Vue指令指的是以==v-==开头的一组特殊语法2.导航[07.本地应用 - v-text指令](07.本地应用 - v-text指令.md)[08.本地应用 - v-html指令](08.本地应用 - v-html指令.md)[09.本地应用 - v-on指令](09.本地应用 - v-on指令.md)[10.本地应用 - 计数器](10.本地应用 - 计数器.md)[11.本地应用 - v-show指令](11

文章目录1.概述2.实践1.概述Vue中用到的数据定义在data中data中可以写复杂类型的数据，如对象、数组等2.实践在js中定义Vue对象，并在data数据对象中定义几个复杂数据类型的数据：<script type="text/javascript"> new Vue({ el: "#app", data: { message: "hello world", person: {