Vue
从小白小菜开始
我是一只孤独的小蚂蚁,喜欢啃骨头。
展开
-
vue组件通信----父传子(超详细)
vue 父传子详细。转载 2022-08-21 09:40:05 · 72 阅读 · 0 评论 -
Vue之Router之编程式路由(045)
Vue之Router之编程式路由一、项目结构二、main.js文件import Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'import router from './router/index.js'Vue.use(VueRouter)Vue.config.productionTip = falsenew Vue({ router:router, render: h =&g原创 2021-11-16 23:09:33 · 262 阅读 · 0 评论 -
Vue之Router之parmas传参(044)
Vue之Router之parmas传参一、文件结构同上篇一样二、main.js上篇一样import Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'import router from './router'Vue.use(VueRouter)Vue.config.productionTip = falsenew Vue({ router:router, render: h =&原创 2021-11-14 16:30:47 · 713 阅读 · 0 评论 -
Vue之Router路由传参之一query(043)
Vue之Router路由传参之一query一、目录结构注:pages文件夹里为路由组件,route文件夹里为路由配置二、main.jsimport Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'import router from './router'Vue.use(VueRouter)Vue.config.productionTip = falsenew Vue({ rout原创 2021-11-14 11:47:34 · 1071 阅读 · 0 评论 -
Vue之VueRouter之多级路由(042)
Vue之VueRouter之多级路由一、更改上篇文件结构。components 为pages。同时添加新组件,News,Foods。二、更改home组件<template> <div> <h1>HOME</h1> <div> <router-link to="/home/news">NEWS</router-link><br>原创 2021-11-07 11:45:38 · 178 阅读 · 0 评论 -
Vue之VueRouter入门(041)
Vue之VueRouter入门一、文件结构二、安装:npm install vue-router三、在main.js文件里引入import Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'import router from './router/index.js'Vue.use(VueRouter)Vue.config.productionTip = falsenew Vue({原创 2021-11-06 22:06:33 · 64 阅读 · 0 评论 -
Vue之共享Vuex之简单入门(040)
Vue之共享V之简单入门一、项目结构二、store文件下index.jsimport Vue from "vue"import Vuex from "vuex"Vue.use(Vuex)const actions = { //定义奇数再加法 xPlusBySumOdd(context, value) { if (this.state.sum % 2) context.commit("XPlus", value) }, /原创 2021-11-02 22:55:47 · 104 阅读 · 0 评论 -
Vue之组件通信之消息订阅与发布(039)
Vue之组件通信之消息订阅与发布一、安装 pubsub-jsnpm i pubsub-js二、新建两个组件 VcA,VcB,并导入pubsubA发布,B订阅<template> <div class="vca"> <h1>VcA</h1> <button @click="sendMessage">发送消息</button> </div></template><scri原创 2021-10-04 10:54:28 · 283 阅读 · 0 评论 -
Vue之组件之事件总线(038)
Vue之组件之事件总线创建新项目G:\myvue>vue create vcbus选择第二项。开启事件总线import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({ beforeCreate() { Vue.prototype.$bus=this; }, render: h => h(App),}).$mount('#app')在原创 2021-10-03 21:33:15 · 144 阅读 · 0 评论 -
跟着官方指南学webpack之loader(037)
跟着官方指南学webpack之loaderwebpack 开箱即用,可以无需使用任何配置文件。然而,webpack 会假定项目的入口起点为 src/index.js,然后会在 dist/main.js 输出结果,并且在生产环境开启压缩和优化。通常你的项目还需要继续扩展此能力,为此你可以在项目根目录下创建一个 webpack.config.js 文件,然后 webpack 会自动使用它。1.目录结构2.项目初始化F:\myVue\webpack-loader>npm initThis ut原创 2021-07-06 17:39:44 · 260 阅读 · 0 评论 -
webpack实战入门(036)
webpack实战入门1.新建项目2.项目初始化npm init3.安装 webpack webpack-cli4.项目结构在项目下添加src文件夹,并在文件src内新建index.js文件;在项目内新建build文件夹。5.index.js文件function add(x,y){ return x+y;}console.log(add(1000,999))6.打包index.js文件开发模式:webpack ./src/index.js -o ./build --m原创 2021-06-27 16:41:59 · 65 阅读 · 0 评论 -
webstorm创建vue项目(035)
webstorm创建vue项目一、版本webstorm版本 2021.1.1node 版本 14.16.0vue.cli 版本 4.5.13 二、新建1.create选择自定义配置选项。(按上、下健切换选项,按空格键选择选项,按i键反选)选择安装插件,说明。() Babel // 是否使用babel做转义( ) TypeScript // 是否使用class风格的组件语法( ) Progressive Web App (PWA) Support // 支持PWA() Rout原创 2021-05-24 18:57:25 · 1759 阅读 · 1 评论 -
Vue-cli4图形化界面创建和管理项目(034)
Vue-cli4图形化界面创建和管理项目一、通过 vue ui创建成功最后注意:终止网络端口填:8000。插件:依赖:配置:任务:下一步进入深入的学习。原创 2021-05-20 15:51:05 · 230 阅读 · 0 评论 -
体验vue-cli4(033)
体验vue-cli4一、安装Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。哈,一定要安装了node。两个命令是一样的,一个短命令,一个长命令。安装这个新的包npm install -g @vue/cli# ORyarn global add @vue/cli检查其版本注意长短命令格式: 短命令是大写。V如需升级全局的 Vue CLI 包,请运行:npm update -g @vue/cli# 或者yarn global upg原创 2021-05-20 11:41:22 · 130 阅读 · 3 评论 -
Vue-Cli构建项目(032)
Vue-Cli构建项目前面我已经安装好了cnpm.1.安装Vue-Cli.cnpm install vue-cli -g检查是否成功,vue --version在项目所在的文件目录里,打开控制台,输入ps:win10,在目录下打开控制台。在目录下。1.按住Shift键,鼠标右键快捷方式,先打开Powershell窗口。2.输入 start cmd 回车另:使用vue-cli在控制台创建项目时出现乱码时,在控制台输入:chcp 65001,即可解决问题。2.项目初始化。vue原创 2021-05-14 19:50:24 · 77 阅读 · 0 评论 -
npm,cnpm安装实战(031)
npm,cnpm安装实战一、npm和cnpmnpm(node package manager):nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)。cnpm:。“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”----来自淘宝的镜像。二.前提是安装 Node.js简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript原创 2021-05-14 15:29:16 · 162 阅读 · 4 评论 -
Vue之Componet之作用域slot(030)
Vue之Componet之作用域slot1.组件内有插槽,且插槽内有默认值,不用作用域插槽时,会按组件原样展示。完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>slot02</title> </head> <body&g原创 2021-05-05 09:43:44 · 107 阅读 · 0 评论 -
Vue之componet之初识slot(029)
Vue之componet之初识slot本人理解在组件内预留的类似占位符。便于功能扩展。1.默认插槽。即不具名。完整示例。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>component-slot</title> </head> &原创 2021-05-03 23:31:48 · 297 阅读 · 13 评论 -
Vue之componet之$ref(028)
Vue之componet之$ref完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>componet-children</title> </head> <body> <div id="app">原创 2021-04-29 14:06:49 · 566 阅读 · 0 评论 -
Vue之componet之$children(027)
Vue之componet之$children完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>componet-children</title> </head> <body> <div id="app"&g原创 2021-04-29 10:39:25 · 443 阅读 · 0 评论 -
Vue之子组件向父组件传值之$emit(026)
Vue之子组件向父组件传值之$emit完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>componet05</title> </head> <body> <div id="app"> <原创 2021-04-27 23:03:12 · 81 阅读 · 1 评论 -
Vue之父组件通过props向子组件传值(025)
Vue之父组件通过props向子组件传值完整代码:<head> <meta charset="utf-8"> <title>component04</title> <script src="../js/vue.js"></script></head><body> <div id="app"> <father></father><br> <原创 2021-04-26 18:22:57 · 108 阅读 · 0 评论 -
Vue之props对象形式静态传值(024)
Vue之props对象形式静态传值完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>componet03</title> </head> <body> <div id="app"> <ch原创 2021-04-24 18:36:06 · 277 阅读 · 0 评论 -
Vue之Prop静态传值(023)
Vue之Prop静态传值完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>componet02</title> </head> <body> <div id="app"> <child c原创 2021-04-24 11:10:18 · 198 阅读 · 0 评论 -
Vue之组件分离写法(022)
Vue之组件分离写法完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>component03</title> </head> <body> <div id="app"> <cpn1>原创 2021-04-20 22:27:34 · 122 阅读 · 0 评论 -
Vue之组件初识(021)
Vue之组件初识组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树:二. 注册组件.全局注册<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>compone原创 2021-04-19 23:36:58 · 146 阅读 · 3 评论 -
Vue之v-for基本用法(020)
Vue之v-for基本用法1. 遍历基本数组完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>v-for</title> </head> <body> <div id="app"> <u原创 2021-04-18 14:42:44 · 223 阅读 · 1 评论 -
Vue之v-show与v-if区别(019)
Vue之v-show与v-if区别完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>v-show</title> </head> <body> <div id="app"> <div v-原创 2021-04-17 17:28:28 · 63 阅读 · 0 评论 -
Vue之v-if之细节(018)
Vue之v-if之细节完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>v-if</title> </head> <body> <div id="app"> <span v-if="log原创 2021-04-17 12:07:15 · 93 阅读 · 4 评论 -
Vue之vm.$el是什么?(017)
Vue之vm.$el是什么?在实例挂载之后,元素可以用 vm.$el 访问。完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>el02</title> </head> <body原创 2021-04-16 17:29:27 · 4811 阅读 · 0 评论 -
Vue之选项之el(016)
Vue之选项之el官方解释id选择器形如 “#id”。完整代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>el</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <styl原创 2021-04-15 18:21:11 · 201 阅读 · 0 评论 -
Vue之v-model修饰符(015)
Vue之v-model修饰符v-model.lazy完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-model</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head&原创 2021-04-14 20:37:58 · 98 阅读 · 0 评论 -
Vue之v-model基本使用多选框(014)
Vue之v-model基本使用多选框完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-model</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <bod原创 2021-04-13 17:11:34 · 326 阅读 · 0 评论 -
Vue之v-model基本使用(013)
Vue之v-model基本使用完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-on</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body>原创 2021-04-12 18:23:03 · 67 阅读 · 0 评论 -
Vue之v-model基本原理(012)
Vue之v-model基本原理原理1.完整代码之一<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body>原创 2021-04-12 16:36:55 · 73 阅读 · 0 评论 -
Vue之v-on修饰符之按键修饰符(011)
Vue之v-on修饰符之按键修饰符按键事件有:@keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起)常用按键修饰符别名别名修饰符键值修饰符对应按键.delete.8/46回格/删除.tab.9制表.enter.13回车.esc.27退出.space.32空格.left.37左.up.38上.right.39右.down.40下还其它,一般我们不用原创 2021-04-11 22:47:21 · 160 阅读 · 0 评论 -
Vue之v-on修饰符once(010)
Vue之v-on修饰符once未加once修饰符,完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>v-on(once)</title> </head> <body> &l原创 2021-04-11 16:35:48 · 507 阅读 · 0 评论 -
Vue之v-on修饰符self(009)
Vue之v-on修饰符self加self到最里层div上,完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>v-on(capture)</title> </head> <body&g原创 2021-04-11 15:41:47 · 211 阅读 · 0 评论 -
Vue之v-on修饰符capture(008)
Vue之v-on修饰符capture未加capture修饰符完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>v-on(capture)</title> </head> <body原创 2021-04-11 12:59:33 · 325 阅读 · 1 评论 -
Vue之v-on之修饰符prevent(007)
v-on未加修饰符prevent完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>v-on(prevent)</title> </head> <body> <div原创 2021-04-11 10:28:30 · 341 阅读 · 0 评论