vue
月屯
学会做夜空中那颗最亮的星
展开
-
vue 之axios
安装npm install axios --savemain.js写法一:写法二:原创 2021-05-16 15:39:19 · 86 阅读 · 0 评论 -
vue之vuex
vue中data中的数据都加入到响应式系统里了单页面到多页面状态切换安装npm install vuex --savesrc/store/index.jssrc/main.js在src/store/index.js store中的state加入 counter: 1000,在其他组件中引入counter <h2>{{$store.state.counter}}</h2>安装Devtools切换vuexdevtools和muta原创 2021-05-13 22:11:05 · 153 阅读 · 1 评论 -
vue promise
在build/webpack.base.conf.js中可以给路径起别名'use strict'const path = require('path')const utils = require('./utils')const config = require('../config')const vueLoaderConfig = require('./vue-loader.conf')function resolve (dir) { return path.join(__dirname,原创 2021-05-12 12:35:38 · 110 阅读 · 0 评论 -
vue路由router
运行vuecli改变url不刷新1.URL的hash2.HTML5的history模式:pushState 它相当于一个栈3.HTML5的history模式:replaceState4.HTML5的history模式:gorouter使用路由router例子:index.js// 配置路由相关的信息import VueRouter from 'vue-router'import Vue from 'vue'import Home from '../comp原创 2021-05-09 14:48:39 · 223 阅读 · 0 评论 -
vuecli
前言安装vuecli全局安装 -g原创 2021-05-07 17:30:53 · 144 阅读 · 0 评论 -
vue plugin、搭建本地服务器、配置文件分离webpack
基本插件1.配置webpack.config.js打包html的plugin参考视频1.通过node安装插件2.配置webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin')//在module.exports中 plugins: [ new webpack.BannerPlugin('最终版权归aaa所有'), new HtmlWebpackPlugin({原创 2021-05-06 21:25:18 · 369 阅读 · 3 评论 -
webpack使用vue组件化
上一篇这里写目录标题引入vueel templatevue的改善.vue 文件使用引入vue1.安装vue2.配置webpack.config.js3.npm run build 打包el template两者区别例子:main.js增加vue的改善main.js重新编译接着我们还可以建立一个app.jsexport default { template: ` <div> <h2>{{message}}</h2&原创 2021-05-06 16:56:28 · 1174 阅读 · 6 评论 -
vue webpack 起步、配置、loader
认识简单来说,webpack就是将模块化的编程打包webpack是一个现代的JavaScript应用的静态模块打包工具。安装基本使用参考视频总结:你可以先写.js文件,随便引入和导出(模块化),然后将最终的js 文件打包,在.html文件中引入打包好的文件即可配置webpack.config.js配置package.json配置当使用node相关东西时npm init生成package.json后如果有所依赖,则 npm install然后打包的话 直接 webpack原创 2021-05-06 15:10:20 · 535 阅读 · 7 评论 -
vue模块化导入和导出
CommonJS原创 2021-05-05 09:10:44 · 446 阅读 · 0 评论 -
vue slot(插槽)
目录标题基本使用具名插槽编译作用域作用域插槽组件的插槽:组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--1.插槽的基本使用原创 2021-05-04 17:14:27 · 92 阅读 · 0 评论 -
vue父子组件相互访问
父组件访问子组件 $ children $ refs$ children的缺陷:通过$ children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用$ refs$ refs的使用:$ refs和ref指令通常是一起使用的。首先,我们通过ref给某一个子组件绑定一个特定的ID。其次,通过this.$refs.ID就可以访问到该组件原创 2021-05-04 16:20:34 · 112 阅读 · 0 评论 -
vue 父子组件双向绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <cpn :number1="num1" :number2="num2" @num1change="num1change"原创 2021-05-04 15:53:09 · 86 阅读 · 0 评论 -
vue组件化编程、父子组件通信
步骤例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <!--3.使用组件--> <my-cpn></my-cpn> <my-cpn></原创 2021-05-04 14:43:39 · 249 阅读 · 2 评论 -
vue 表单绑定 v-model、值绑定、修饰符
介绍v-model其实是一个语法糖,它的背后本质上是包含两个操作:1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app">原创 2021-05-03 18:44:31 · 309 阅读 · 0 评论 -
js高阶函数filter reduce map
// 编程范式: 命令式编程/声明式编程// 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)// filter/map/reduce// filter中的回调函数有一个要求: 必须返回一个boolean值// true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中// false: 当返回false时, 函数内部会过滤掉这次的nconst nums = [10, 20, 111, 222, 444, 40, 50]// let total =原创 2021-05-03 16:26:10 · 84 阅读 · 0 评论 -
vue购物车案例
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"></head><body><div id="app"> <div v-if="books.l原创 2021-05-03 15:41:43 · 88 阅读 · 0 评论 -
动态样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; } </style></head><body><div id="app"> <ul>原创 2021-05-03 15:09:52 · 82 阅读 · 0 评论 -
vue v-for 数组响应式方法
遍历数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <!--1.在遍历的过程中,没有使用索引值(下标值)--> <ul> <li v-for="item in n原创 2021-05-03 14:46:41 · 954 阅读 · 0 评论 -
vue v-if v-show案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <span v-if="isUser"> <label for="username">用户账号</label>原创 2021-05-03 10:17:33 · 344 阅读 · 0 评论 -
vue v-on事件监听
1.参数问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <!--1.事件调用的方法没有参数--> <button @click="btn1Click()">按钮1</bu原创 2021-05-03 09:28:36 · 191 阅读 · 0 评论 -
vue计算属性 computed1(ES6增强)
1. 基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstNa原创 2021-05-03 08:36:54 · 272 阅读 · 0 评论 -
v-bind动态绑定属性
这里写目录标题1.基本使用2.动态绑定class2.1对象语法v-bind数组语法v-bind 绑定style对象语法数组语法1.基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <!-- 错误原创 2021-05-02 20:14:00 · 184 阅读 · 0 评论 -
vue 插入操作
这里写目录标题1. v-oncev-html3 v-text4.v-prev-cloak1. v-once<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>{{message}}</原创 2021-05-02 16:03:18 · 241 阅读 · 0 评论 -
初学vue
1. Hello<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>{{message}}</h2> <h1>{{name}}</h1>原创 2021-05-02 11:14:27 · 81 阅读 · 0 评论