vue 常用功能和命令
1. vue-cli 构建项目
2. 项目模板中使用 less 方法
首先安装 less 和 less-loader ,在项目目录下运行如下命令
# npm安装
$ npm install less less-loader --save-dev
# 或者使用 yarn
$ yarn add less less-loader --dev
- 安装成功后,打开
build/webpack.base.conf.js
,在 module.exports = 的对象的 module.rules 后面添加一段:
module.exports = {// 此处省略无数行,已有的的其他的内容module: { rules: [ // 此处省略无数行,已有的的其他的规则 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", } ] } }
- 最后在代码中的 style 标签中 加上 lang="less" 属性即可
<style scoped lang="less"> </style>
3. 在 router 下的路由文件里设置格式,将页面上路由中默认显示的 #/
给去掉
const router = new VueRouter({ mode: 'hash', routes});
// 去掉路由中自带的 #/ 这种东西mode: 'history',
- 需要注意的是使用了
history
之后需要在服务器部署时增加一些配置,具体方法插件下面官方写的配置方法
文档链接 https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
4. 引入 jquery
- 安装
npm install jquery --save
main.js中
或者
main.js中
5、:class 使用表达式
:class="{'想要改变的类名': 判断条件}/
6. vue-router 单页之间如何在 js 中跳转
this.$router.push({ path: '/setPayPwd', query: { forgetPassword: 1 }}) 行内
7. vuex 实现组件之间数据的传递
npm install vuex --save
- 在 src 文件夹中新建一个 stroe 文件夹,并在目录下新建一个 index.js 文件(已有的话请忽略),index.js 文件编辑如下
import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); let store = new Vuex.Store({ state: { formData: {} // 企业提交数据表单对象 } }); export default store;
在main.js实例化对象时中添加
8. 通过 watch 动态的监测路由跳转(跳转时)和 APP.vue 中设置 created 方法实时监测 path (刷新时),来实现 header 文字的改变
- header.vue
watch: {'$route' (to, from) {// 检测路由改变 header 内容if (to.name === 'Index') { this.$store.state.PageTitle = '预约领号'; this.$store.state.isShowBack = false; } else if (to.name === 'PreferentialDescription') { this.$store.state.PageTitle = '优惠说明'; this.$store.state.isShowBack = true; } else if (to.name === 'RuleIntroduction') { this.$store.state.PageTitle = '规则简介'; this.$store.state.isShowBack = true; } else if (to.name === 'ReservationSuccess') { this.$store.state.PageTitle = '预约排号'; this.$store.state.isShowBack = true; } } }
9. 给 vue
挂载全局方法
- 找到
main.js
文件进行编辑,这里以axios
为例演示
import Vue from 'vue'
import axios from 'axios' Vue.prototype.axios = axios
- 使用方法 某个
.vue
文件的sccript
中如下编辑
Vue.axios.post('url', { name: '' })
.then(response => { console.log(response) }) .catch(response => { console.log(response) })
转载于:https://www.cnblogs.com/shuihanxiao/p/9930135.html
vue 常用功能和命令相关推荐
- 达梦数据库操作记录_达梦数据库常用功能及命令记录 -- 持续更新
达梦数据库常用功能及命令记录 -- 持续更新 达梦数据库常用功能及命令记录 达梦数据库语句的使用总体来说跟 oracle 很接近的, 这篇文章主要是把常用的情况和语句做了记录, 并且后续还会不断的持续 ...
- Vue Router路由常用功能总结
Vue Router路由常用功能总结 一.前言 二.安装 1. vueCLI安装 2. npm安装 三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航 五.重 ...
- Java 开发常用的 Linux 命令知识积累
来源 | siye1982.github.io/2016/02/25/linux-list/ 写在前面 基本操作 Linux关机,重启 查看系统,CPU信息 建立软连接 rpm相关 sshkey 命令 ...
- Linux常用20条命令
Linux常用20条命令 假装这里有个标题 1.cd 2.ls 3.grep 4.find 5.cp 6.mv 7.rm 8.ps 9.kill 10.kill all 11.file 12.tar ...
- Python零基础入门(2)——常用的快捷命令、数据类型、输入输出格式、变量介绍
1.常用快捷名命令 pycharm设置界面(ctrl + alt + s) 快速创建文件(alt + insert) 格式化python代码(ctrl + alt + l) 快速注释代码(ctrl + ...
- 常用的linux命令与示例,linux常用命令及用法示例
一. 帮助命令 1. 常用快捷键 快捷键 功能 ctrl + c 停止进程 ctrl+l 清屏:彻底清屏是:reset ctrl + q 退出 tab键 提示(更重要的是可以防止敲错) 上下键 查找执 ...
- 常用的stsadm命令行参数
常用的stsadm命令行参数有: 1.installfeature.uninstallfeature: feature部署和卸载: 安装feature:stsadm -o installfeature ...
- [转]WebPack 常用功能介绍
概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...
- JVM:常用调优命令
Jvm堆内存的划分结构和优化,垃圾回收详解(详细解答篇) 调试参数列表: 参数及其默认值 描述 -XX:-CITime 打印消耗在JIT编译的时间 -XX:ErrorFile=./hs_err_pid ...
最新文章
- 姜子上:利用BiLSTM-CRF进行命名实体识别
- 高效编程之互斥锁和自旋锁
- 开发转运维有什么好点的理由_企业微信SCRM哪家好点?
- Dataset之MNIST:MNIST(手写数字图片识别+ubyte.gz文件)数据集简介、下载、使用方法(包括数据增强)之详细攻略
- Java中的List接口实现类LinkedList
- Tomcat 详解 一
- SQLite—homework
- concurrentarraylist_java多线程学习七::::并发下ArrayList和HashMap
- 软件测试跟踪工具Bugzilla的安装 - Linux版本
- 谈学习:合格的编程自学者必须知道的几点
- NOR Flash的原理与操作
- Android 进程的五种生命周期学习
- 从pdf提取图片,有两个库可以提取fitz(要install pymupdf)、pdfminer(install pdfminer3k)
- Codeforces 918D MADMAX 图上dp 组合游戏
- ios弧形进度条_iOS圆形进度条
- python解魔方程序_写一个解二阶魔方的程序
- Django項目部署到Ubuntu服務器
- html时间戳转日期
- 关于新冠肺炎(COVID-19)论文解读集合
- Q-Learning 、Sarsa与 DQN算法
热门文章
- Linux 命令之 iostat 命令-监视系统输入输出设备和 cpu 的使用情况
- IntelliJ IDEA for Mac 彻底卸载/彻底删除
- mvc @html.editorfor,在MVC中,@Html.EditorFor(m = ( )_CSharp_开发99编程知识库
- 创建进程(CreateProcess)
- c语言创建字符树,使用C语言构建基本的二叉树数据结构
- linux 内存一直在增加,linux – 缓存内存和共享内存总和超过总内...
- js实现数组降维算法[不准用Array.prototype.flat的api]
- python socket编程_Python学习记录-socket编程
- POE交换机产品如何设计防雷保护?
- [渝粤教育] 广东-国家-开放大学 21秋期末考试计量经济学10551k1