参考绑定方法有：.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.rightDemo.vue<template> <div class="demo"> <input v-on:keyup.delete="deleted" v-on:keyup.enter="submit" v-on:keyup.esc="esc" placeholder="按键检测"> </div> </template> <script> export default
先看效果模板文件<transition name="myfade"> <router-view></router-view> </transition>样式文件/* myfade */ .myfade-enter, .myfade-leave-to { opacity: 0; } .myfade-leave, .myfade-enter-to { opacity: 1; } .myfade-enter-active { transition: opacity .5s; transition-delay: .3s; } .myfade-leave-active { transition: opacity .3s }../../md/Vue/
<!DOCTYPE html> <html> <head> <div id='div1' v-bind:title="div_title"> {{hello_message}} </div> </head> <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var v1 = new Vue({ el: "#div1", data: { hello_message: "Hello,
data() { return { clientHeight: 0, // 声明data } }, methods: { // 设置页面高度 setClientHight() { var _this = this; _this.clientHeight = `${document.documentElement.clientHeight}px`; // 控制台打印 console.log(_this.clientHeight); }, }, mounted() { var _this = this; // 挂载读取页面高度 _this.setClientHight(); // 窗口
总结v-if 的初始化较快，但切换代价高，如果不是经常变更，用v-ifv-show 初始化慢，全部渲染，用 display 切换是否隐藏，但切换成本低手段v-if 是动态的向 DOM树 内添加或者删除 DOM元素；v-show 是通过设置 DOM元素 的 display 样式属性控制显隐；编译过程v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内
图标参考地址https://fa5.dashgame.com/#/%E5%9B%BE%E6%A0%87Demo 地址https://justineo.github.io/vue-awesome/demo/项目地址https://github.com/Justineo/vue-awesome安装yarn add vue-awesomemain.js// font-awesome import 'vue-awesome/icons' import Icon from 'vue-awesome/components/Icon.vue' Vue.component('v-icon', Icon)使用<!-- 基础用法 --> <v-icon name="beer"/> <!-- 添加选项 -
在根目录新建文件vue.config.jsmodule.exports = { publicPath: "./", };../../md/Vue/
1. 目录结构/src--src --pages --app --index.html --index.vue --main.js --home --index.html --index.vue --main.js2. 新建配置文件/vue.config.jsmodule.exports = { pages: { home: { entry: './src/pages/home/main.js', template: './src/pages/home/index.html', filename: 'home.html', title: '家', }, app: { entry: './src/pages/app/main.js', temp
官方：https://cli.vuejs.org/zh/guide/installation.html安装关于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。npm install -g @vue/cli # OR yarn global add @vue/cli版本查看vue --version创建文件vue create hello-worldCLI服务package.json{
因为通过 axios 解析后的 post数据 不是正规的，所以需要 qs 进行转换安装 qsyarn add qsApp.vue import axios from "axios"; import qs from "qs"; ... let qsData = qs.stringify({login: _this.loginPwd,}); axios .post("/api.php", qsData) .then(function(res) { console.log(res); }) .catch(function(error) { console.log(error); });../../m