Vue
文章平均质量分 68
gaearon
立志要做计算机大牛
展开
-
vue2 使用 CompositionAPI
Vue3 新出的 CompositionAPI 可以以更优雅的姿势聚集零散代码,自定义的 hook 函数使逻辑可以更好的复用,之前老旧的 Vue2 项目也可以体验 CompositionAPI 了。安装 @vue/composition-api:yarn add @vue/composition-api在 main.js 中引入:import Vue from 'vue'import VueCompositionAPI from '@vue/composition-api'Vue.use(V原创 2021-07-05 01:36:08 · 2739 阅读 · 0 评论 -
Vue watch 监听地址栏的变化
watch: { // 监听地址栏变化 $route(to, from) { console.log(to, from) }}原创 2021-04-30 15:20:33 · 930 阅读 · 1 评论 -
Vue 子组件的 created 不能拿到 props 的问题
SPA 应用,所有的数据都需要依靠 ajax 获取,这就导致子组件已经创建了,但是父组件所请求的 ajax 还没有返回,父组件无法传递最新的 props 数据,这就导致子组件不能正常加载。看下我的错误代码:父组件:<template> <singleComments :singleComment="singleComent"></singleComments></template><script>export default { m原创 2021-04-30 03:53:51 · 2145 阅读 · 2 评论 -
【Vue 开发小技巧】给组件路径配置别名
前几天在 GitHub 参考一位阿里大佬的项目源码,大佬的写法令我眼花缭乱,代码写得简直太 6 了。其中一种写法让我大呼牛逼~。来看看:这个 @ 是个什么操作?我发现它的 @ 指向的是 src 目录,我傻傻的尝试了一下,果不其然,报错了……在网上搜啊搜,它是通过改写 vue.config.js 文件实现的。但是网络上给出的答案有些老旧了。阿里大佬的写法:const path = require('path')const resolve = (dir) => path.join(__dirn原创 2021-04-12 22:46:32 · 307 阅读 · 0 评论 -
vant 使用 font-class 方式引入第三方图标
阿里图标库:https://www.iconfont.cn/选择需要的图标,添加至购物车,一定要点击下载代码,否则无法生成所需要的css等文件,解压至assets目录下,将其中的iconfont.css文件引入项目中。然后打开解压目录中的 demo_index.html 文件,图标的名称有三个选项点击 font-class ,上图中框出的就是 icon 的 name 属性,如果想要引入微信图标:<van-icon class="iconfont" class-prefix="icon"原创 2021-04-01 14:41:27 · 1140 阅读 · 0 评论 -
vuex 核心概念 state、mutations、actions、getters
核心概念statemutationsactionsmodules手动引入vuex如果在vue脚手架中没有引入vuex需要进行手动配置。在main.js中添加如下代码:import store from 'vuex'// 在创建vue实例时,将store挂载进去new Vue({ render: h => h(App), store}).$mount('#app') statestate中设置数据源,页面中所有在vuex中存放的数据都要放到store的state原创 2021-03-02 01:40:44 · 499 阅读 · 0 评论 -
vuex 的基本使用
vuex官方教程:https://vuex.vuejs.org/zh/guide/vuex概述学习vue 的时候组件之间的传值太让人头疼了,有以下三种情况:父向子传值:v-bind子向父传值:v-on兄弟之间的数据共享:$on$emit以上三种情况只适合小范围的传值对于全局数据共享太麻烦了,vuex就是实现组件全局状态管理的一种机制。使用vuex与不使用vuex的情况如下:vuex中的数据都是响应式的,在一个组件中修改了值,其他组件中的值同样被更改。创建项目原创 2021-03-02 01:35:26 · 191 阅读 · 2 评论 -
基于 vue 实现的电商后台管理系统
源码地址:https://github.com/Hero601/vue_shop后端接口:https://goal.lanzous.com/b01c5hhsb密码:5ees免费的小星星点一个吧~原创 2021-02-26 17:21:41 · 1004 阅读 · 3 评论 -
Vue-CLI3 脚手架搭建教程(全都是图)
脚手架是什么Vue 脚手架用于快速生成 Vue 项目基础架构,网址:Vue CLI安装脚手架:npm install -g @vue/cli使用命令行创建项目在终端中输入如下命令进入交互式命令行:vue create project这个界面让你选择创建的模式,按上下键可以移动,分别为:默认:vue2默认:vue3手动选择如果选择手动,会变成下面界面:按下 a 选择所有,按下 i 反向选择,按下空格选择当前,选择完毕按下回车确认。弹出下面界面:这个界面让选择使用的 v原创 2021-01-27 00:20:51 · 6081 阅读 · 0 评论 -
vue 单文件组件
单文件组件是什么在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。存在以下问题:全局定义 强制要求每个 component 中的命名不得重复字符串模板 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \不支持 CSS 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏没有构建步骤 限制只能使用 HTML 和 ES5 JavaScrip原创 2021-01-27 00:15:41 · 189 阅读 · 0 评论 -
这么完整的 webpack 使用教程,不来看看吗?
webpack 的安装和基本使用终端运行下面命令安装相应的包npm i webpack webpack-cli -D安装成功的话,应该输出下面文本:npm notice created a lockfile as package-lock.json. You should commit this file.npm WARN Vue@1.0.0 No descriptionnpm WARN Vue@1.0.0 No repository field.+ webpack@5.16.0+原创 2021-01-27 00:13:12 · 264 阅读 · 1 评论 -
vue 编程式导航与动态路由匹配
编程式导航页面导航具有两种方式,第一种方式为声明式导航,就是通过 <a> 标签或者 <router-link> 标签,点击链接进行页面的跳转第二种方式为编程式导航,通过调用 JavaScript 的 API 实现页面的跳转。例如通过 location.href。Vue 中常见的编程式导航 API 如下:this.$router.push():跳转到形参中的 hash 地址this.$router.go():参数为正时,与前进按钮相同;参数为负时,与后退按钮相同。原创 2021-01-27 00:09:39 · 272 阅读 · 0 评论 -
vue 组件传参与命名路由
路由组件传参上面代码使用 $route.params 获取了路由中传递的参数,但是耦合度较高,不够灵活,可以使用 props 将组件和路由解耦。props 值为布尔类型当 props 的值为布尔类型时,代表使用 : 捕获的属性可以传递给模板中使用,同样的模板中使用 props 数组进行接受。如下代码所示:路由组件:const user = { props: ['id'], template: `<h1>你好用户 {{ id }}</h1>`}路由对象:con原创 2021-01-27 00:07:26 · 179 阅读 · 0 评论 -
vue 路由重定向与嵌套路由
路由重定向路由重定向是指:用户访问 A 地址时,强制用户跳转到 B 地址,例如访问 localhost 强制跳转到 localhost/index 页面。主要通过路由规则的 redirect 属性,属性值为要跳转的重定向地址,如下代码所示:// 配置路由规则,创建路由实例const router = new VueRouter({ // 路由规则数组 routes: [ // { path: '/', redirect: '/list' }, { path: '/index'原创 2021-01-27 00:04:54 · 585 阅读 · 0 评论 -
vue路由基础
前端路由的概念早期的路由通过后端渲染,使用后端渲染存在性能问题,随之出现了 ajax 技术实现了局部刷新,但是 ajax 并不支持浏览器的前进和后退。SPA(Single Page Application)中文名为单页面应用程序应运而生,所谓单页面应用程序就是指整个网站只有一个页面,内容的变化通过 ajax 的局部刷新,并且支持浏览器的前进和后退。SPA 的实现原理:基于 URL 地址的 hash,hash 值的变化会导致浏览器历史记录的产生,但是不会触发新的 url 请求。要想实现 SPA 最核心原创 2021-01-27 00:02:18 · 193 阅读 · 2 评论 -
vue组件插槽
组件插槽如下代码所示:Vue.component('fun-div', { template: ` <div> <strong>before</strong> <slot></slot> <strong>after</strong> </div> `})上面组件的模板中,使用 <slot> 标签声明了一个插槽,当使用 <fun原创 2021-01-25 01:11:45 · 112 阅读 · 0 评论 -
vue组件之间的传值
父组件向子组件传值子组件接受父组件传递的值,需要使用 props 参数,也就是在子组件定义时,引入 props 数组。如下数组所示:props: ['title', 'str'],如果在一个子组件定义是添加了上面代码,意味着该组件可以接受两个参数:title 、str ,可以通过属性的形式将参数传递过来。在 template 中可以使用这两个参数。如下组件中接受了一个父级组件传递来的 title 参数:let div_inner = { data: function () { ret原创 2021-01-25 00:56:02 · 272 阅读 · 0 评论 -
vue组件基础与命名规范
组件化开发思想MDN 上关于组件化开发 web components 的解释Vue 实现了部分 Web Components 的规范。Vue 官网对于组件的解释组件示例可以使用如下所示代码创建一个组件:/* 使用 Vue 对象的 component 方法创建一个组件 第一个参数为组件名称,在 HTML 结构中可以使用该名称创建标签。 第二个参数为组件的配置选项,为对象的形式 */Vue.component('button_count', { // 一个组件的 data 选项必原创 2021-01-24 22:58:08 · 937 阅读 · 0 评论 -
vue侦听器与过滤器
侦听器和 addEventListener 事件监听器一样,当元素中某个事件被触发时,侦听器中绑定的方法自动被调用。Vue 中的侦听器通常在 Vue 实例中声明一个 watch 属性,来响应数据的变化。如下代码所示:<div class="container"> <input type="text" v-model="uname"></div>let vm = new Vue({ el: '.container', data: {原创 2021-01-24 22:51:33 · 227 阅读 · 0 评论 -
vue自定义指令和计算属性
自定义指令Vue 自带的指令无法满足开发需求,这时需要自定义一些指令。指令可以注册为全局指令或者局部指令。全局指令使用 Vue 对象下的 directive 方法定义,局部指令在 Vue 实例中设置 directives 属性。如下代码所示:// 注册为全局指令Vue.directive('focus', { inserted: function (el) { // 获取焦点事件 el.focus() }})// 注册为局部指令let vm =原创 2021-01-24 22:48:42 · 499 阅读 · 0 评论 -
vue操作表单
表单操作操作文本框操作文本框使用双向数据绑定来操作文本框中的内容,如下代码所示:<div class="container"> <form action="#" method="POST"> <!-- 双向数据绑定,可以通过 this 获取其中的值 --> <label for="uname"><input v-model="uname" type="text" name="uname"></la原创 2021-01-24 22:46:32 · 310 阅读 · 0 评论 -
vue模板语法分支与循环
分支与循环条件语句可以使用下面指令进行条件的判断:v-ifv-else-ifv-elsev-show通常在这些指令的后面会等于一个判断语句,就像下面一样:<div v-if="score > 90">优秀</div><div v-else-if="score < 90 && score > 80">良好</div><div v-else-if="score < 80 && s原创 2021-01-24 01:59:58 · 331 阅读 · 0 评论 -
vue属性绑定与样式操作
属性绑定属性绑定需要使用 v-bind 指令,简写形式为 :。如下代码所示:<body> <div class="container"> <a v-bind:href="url1">链接</a><br> <a :href="url2">链接</a> </div> <script src="../lib/vue.js"></script原创 2021-01-24 01:58:11 · 322 阅读 · 0 评论 -
vue双向数据绑定的实现原理
双向数据绑定的实现原理可以使用属性 + 事件来实现双向数据绑定,如下代码所示:<body> <div class="container"> <input type="text" @input='input' v-bind:value='msg'> <button @click='show'>显示值</button> <button @click='change'>修改值<原创 2021-01-24 01:56:10 · 180 阅读 · 0 评论 -
vue事件
事件事件绑定Vue 中的事件绑定可以使用 v-on 指令进行处理,可以把 v-on 绑定事件简写为 @。语法结构如下:<button v-on:click='num++'>加一</button><button @click='num++'>再加一</button>第一行代码使用 v-on 进行事件的绑定、第二行代码使用 @ 进行事件绑定。如下代码所示:<body> <div class="container">原创 2021-01-24 01:54:29 · 1760 阅读 · 0 评论 -
vue插值表达式和数据绑定
插值表达式Vue 中的插值表达式类似模板引擎中的写法,通过 {{ value }} 的形式在打括号内填充数据。如下代码所示:<body> <!-- 插值表达式,类似模板引擎中的待填充数据 --> <div class="container">{{msg}}</div> <script src="../lib/vue.js"></script> <script> let v原创 2021-01-24 01:50:41 · 1332 阅读 · 2 评论