随笔分类 - vue
摘要：效果图： 1、在App.vue页面 <template> <div id="app"> <div id="nav"> <router-link to="/home">Home</router-link> | <router-link to="/about">About</router-link> |
阅读全文
摘要：keep-alive 有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。 官网解释： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不
阅读全文
摘要：$route $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1、$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。 2、$route.params 一个 key/value 对象，包含
阅读全文
摘要：<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的 <a> 标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名 <router-link>组件的属性有： to 、repl
阅读全文
摘要：对象语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
阅读全文
摘要：一、v-model 表单输入绑定 使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 <template> <div> <input class="login-input" type="text" v-model="username" plac
阅读全文
摘要：@input实时监听输入数据 <input type="text" placeholder="实时监听" v-model="inputVal" @input="inputFn"> data: { inputVal:'' }, methods: { //实时监听 inputFn(e){ console
阅读全文
摘要：渲染数据时，有时候往往需要把最新的那条数据放在最上面，最简单的方法就是在渲染之前把数据先倒序排列好，再渲染到网页上。 这时就要用到reverse()。 <div class="list" v-for="(item,index) in reverseSum" :key="index> <ul > <l
阅读全文
摘要：效果图： 主要思路： 点击不同 tab 获取 tab 选项卡下标并为其动态绑定一个class(选中状态时的样式) 点击时使 tab 对应的内容下标与 tab 选项卡下标保持一致 使用 v-show / v-if 指令控制内容显示与隐藏 源码： <html lang="en"> <head> <met
阅读全文
摘要：ES6的模块化中，export与export default都可以用于导出常量、函数、文件、模块等，我们可以通过在其它文件或模块中import(常量、函数、文件、模块)的方式导入，但在一个文件或模块中，export、import可以有多个，export default仅有一个。 export的使用
阅读全文
摘要：在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。 ref介绍 ref被用来给元素或子
阅读全文
摘要：父传子 父组件 子组件 子组件props多种类型总结 子传父 子组件 父组件 子组件向父组件传递多个参数 子组件通过$emit触发父组件中的自定义函数，第一个值为自定义函数名，后面的参数是向父组件传的值 子组件 父组件
阅读全文
摘要：为什么要有hash 和history？ 对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于——改变试图的同时不会向后端发出请求。 为了达到这一目的，浏览器当前提供了一下两种支持： 1、hash - 即地
阅读全文
摘要：@input事件 ，当键盘输入时，触发input事件，event.detail = 场景 @input事件想要传递一个参数到方法中 但是同时还要保留原来返回的event 解决方法：$event @input="onKeyInput($event,123)" 运用 <view class="item"
阅读全文
摘要：搭建项目之前，请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。 如何安装node? 安装好node默认已经安装好npm了，所以不用单独安装了。 如何安装vue cli? 剧场环境已搭建好，开始表演！ 1. 进入一个目录，创建项目 对应命令： vue cr
阅读全文
摘要：1、安装node.js https://blog.csdn.net/qq_43285335/article/details/90696126 node -v 查看版本号 2、安装最新的vue-cli npm install -g @vue/cli # OR yarn global add @vue/
阅读全文
浙公网安备 33010602011771号