Vue2 学习笔记
关注
分享
扫一扫
记录学习Vue2的过程
白怀宇
这个作者很懒，什么都没留下…
展开
-
1. Vue 快速上手
Vue 快速上手概述<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue测试</title></head><body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.ne原创 2020-06-12 16:07:13 · 223 阅读 · 0 评论 -
1. v-model原理
v-model原理概述v-model 相当于:value和@input的结合使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model原理</title></head><body><div id="app"> <label for=""> v-model：原创 2020-06-12 16:16:41 · 1020 阅读 · 0 评论 -
2. v-model结合checkbox使用
v-model结合checkbox使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model结合checkbox使用</title></head><body><div id="app"> <h2>单选框</h2> <label><input t原创 2020-06-12 16:18:50 · 255 阅读 · 0 评论 -
3. v-model结合radio使用
v-model结合radio使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model结合radio使用</title></head><body><div id="app"> <input type="radio" name="gender" value="男" v-model="原创 2020-06-12 16:19:27 · 375 阅读 · 0 评论 -
4. v-model结合select使用
v-model结合select使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model结合select使用</title></head><body><div id="app"> <h2>单选</h2> <select v-model="fruit">原创 2020-06-12 16:20:00 · 534 阅读 · 0 评论 -
1. Vue 过滤器的使用
Vue 过滤器的使用全局过滤器<div id="app"> <h3>全局过滤器：{{ dateTime | dateFormat }}</h3></div>Vue.filter('dateFormat', function(dateStr){ let dateTime = new Date(dateStr); let year = dateTime.getFullYear(); let month = dateTime.getMon原创 2020-06-12 16:21:11 · 185 阅读 · 0 评论 -
1. Vue stop修饰符
Vue stop修饰符概述stop修饰符用于阻止事件的冒泡传递用法<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,原创 2020-06-12 16:22:20 · 539 阅读 · 0 评论 -
2. Vue prevent修饰符
Vue prevent修饰符概述prevent修饰符用于阻止默认事件的触发用法<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale原创 2020-06-12 16:23:01 · 1192 阅读 · 0 评论 -
3. Vue native
Vue native修饰符概述在我们需要监听一个组件的原生事件时，必须给对应的事件加上.native修饰符，才能进行监听。使用<template> <div id="app"> <h1>基本程序已运行</h1> <MyButton @click.native="buttonClicked">自定义组件按钮</MyButton> </div></template><原创 2020-07-09 15:31:07 · 1940 阅读 · 0 评论 -
1. Vue $refs使用
Vue $refs使用概述$refs可用于获取html对象，或Vue实例对象使用<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scal原创 2020-06-12 16:24:12 · 255 阅读 · 0 评论 -
1. Vue-cli 使用
Vue-cli 使用vue-cli 安装npm install -g @vue/clivue-cli 常用命令vue create {项目名称} #创建vue项目vue ui #打开图形化操作界面npm run serve #打开开发服务器npm run build #编译工程 注意需先配置公共路径(ui界面中->配置->Vue CLI->公共路径)工程主要文件夹和文件说明...原创 2020-06-12 16:28:53 · 191 阅读 · 0 评论 -
1. Vue 组件的使用
Vue 组件的使用组件的两种命名方式使用 kebab-caseVue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。使用 PascalCaseVue.component('MyComponentName', { /* ... */ })当使用 PascalCase (首字母大写命名) 定义一个组件时，原创 2020-06-13 11:24:16 · 216 阅读 · 0 评论 -
2. Vue 向子组件传递参数
Vue 向子组件传递参数Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：<div id="app"> <blog-info v-for="info in infos" v-bind:info="info" ></blog-info>&l原创 2020-06-13 11:22:40 · 413 阅读 · 0 评论 -
3. Vue 监听子组件(事件抛出值)
Vue 监听子组件(事件抛出值)<div id="app"> <div :style="{ fontSize: font_size+'px'}"> <blog-post v-for="(post, index) in posts" :key='index' :post="post" @set-font-size="setFontSize" ></blog-post> </div&g原创 2020-06-13 12:58:23 · 1264 阅读 · 0 评论 -
4. Vue 监听子组件(v-model方式)
Vue 监听子组件(v-model方式)1 缺点：只能实现1个数据的绑定<div id="app"> <input-mod v-model="inputVal"></input-mod> <div>{{ inputVal }}</div></div>Vue.component('input-mod', { props: ['value'], template: ` <div>原创 2020-06-13 11:25:32 · 834 阅读 · 0 评论 -
5. Vue 父子件数据传递
Vue父子件数据传递概述假设需要父组件传递数据至子组件，且子组件数据修改时需将父组件的数据同步修改，有如下两种修改方式。通过自定义v-model方式实现将父组件数据通过props传入至子组件；子组件内创建变量复制props数据；通过v-bind将子组件的变量绑定至子组件的value上；绑定@input时间函数a. 将输入框的数据幅值至子组件数据上；b. 通过$emit()函数给父组件发送事件；父组件监听子组件触发的事件，并获取数据幅值至父组件数据。通过v-model方法配原创 2020-06-13 11:27:39 · 189 阅读 · 0 评论 -
6. Vue 动态组件
Vue 动态组件<div id="app"> <button @click="component='com_1'">组件1</button> <button @click="component='com_2'">组件2</button> <button @click="component='com_3'">组件3</button> <component :is="component"></原创 2020-06-13 11:28:22 · 169 阅读 · 0 评论 -
7. Vue 单文件组件
Vue 单文件组件概述在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：全局定义 (Global definitions) 强制要求每个 component 中的命原创 2020-06-13 11:32:05 · 228 阅读 · 0 评论 -
1. Vue 简单插槽
Vue 简单插槽将组件中间的内容添加至组件中的位置，可以插入html代码<div id="app"> <navigation-link url="http://wwww.baidu.com"> 百度 </navigation-link> </div> Vue.component('navigation-link', { props: { url: '' }, template:`原创 2020-06-13 13:07:08 · 162 阅读 · 0 评论 -
2. Vue 插槽后备
Vue 插槽后备插槽后备是在插槽中没有提供内容时，显示默认内容<div id="app"> <submit-button></submit-button> <br> <submit-button>保存</submit-button> </div>Vue.component('submit-button', { template:` <button type="sub原创 2020-06-13 13:08:11 · 438 阅读 · 1 评论 -
3. Vue 具名插槽
Vue 具名插槽具名插槽实现一个组件的多个插槽的功能。一个不带 name 的 <slot> 出口会带有隐含的名字“default”。v-slot 可缩写成 #。<div id="app"> <base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </te原创 2020-06-13 13:08:53 · 607 阅读 · 0 评论 -
4. Vue 作用域插槽
Vue 作用域插槽作用域插槽可在数据渲染时，父组件调用子组件数据进行重新排版渲染。<div id="app"> <current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user><current-user></current-user></div><script src="https://c原创 2020-06-13 13:09:45 · 210 阅读 · 0 评论 -
1. Vue 路由的安装
Vue 路由的安装输入如下命令进行安装npm install vue-router路由配置src文件夹内创建router文件夹router文件夹内创建index.js文件router/index.js做如下配置import Vue from "vue"import VueRouter from "vue-router"import Home from "../views/Home"import Info from "../views/Info"Vue.use(原创 2020-06-13 13:12:47 · 205 阅读 · 0 评论 -
2. Vue 简单路由
Vue 简单路由<router-link> 标签用于路由的跳转<router-view> 标签用于渲染路由界面<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"> <原创 2020-06-13 13:13:55 · 172 阅读 · 0 评论 -
3. Vue 动态路由匹配
Vue 动态路由匹配动态路由匹配可通过URL进行参数的解析<div id="app"> <p> <router-link :to="/user/+user_id">get user id</router-link> </p> <router-view></router-view></div> <script src="https://unpkg.com/vue/dist/vu原创 2020-06-13 13:14:36 · 436 阅读 · 0 评论 -
4. Vue 路由命名
Vue 路由命名路由name属性对路由进行命名，实现路由跳转的反向解析<div id="app"> <router-link to="/first">Go to First</router-link> <router-link :to="'second'">Go to Second</router-link> <router-view></router-view></div> <s原创 2020-06-13 13:15:12 · 271 阅读 · 0 评论 -
5. Vue 路由嵌套
Vue 路由嵌套<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"> <h1>Hello App!</h1> <p> <router-link to="/p原创 2020-06-13 13:15:47 · 230 阅读 · 0 评论 -
6. Vue 编程式导航与历史记录
Vue 编程式导航与历史记录<div id="app"> <button @click="pageFirst">Page First</button> <button @click="pageSecond">Page Second</button> </br><button @click="goBack">Go Back</button><button @click="goForward"原创 2020-06-13 13:16:22 · 364 阅读 · 0 评论 -
7. Vue 路由参数传递
Vue 路由参数传递url路径传递方式（Vue动态路由匹配）：www.xxx.com/user-url/123url参数传递方式: www.xxx.com/user-query?id=123vue params参数传递方式: 不改变url路径，采用vue内部参数传递方式<div id="app"> <h3>URL路径方式传递参数</h3> <router-link to="/user-url/111">字符串—URL路径方式传递参数<原创 2020-06-13 13:17:07 · 489 阅读 · 0 评论 -
8. Vue 路由的重定向与别名
Vue 路由的重定向与别名重定向当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b别名/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样示例<div id="app"> <router-link :to="'first'">Go First</router-link> <br/> <router-link :to="'secon原创 2020-06-15 08:51:14 · 348 阅读 · 0 评论 -
9. Vue 路由的命名视图
Vue 路由的命名视图有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。<div id="app"> <button @click="pageFirst">Page First</button> <bu原创 2020-06-13 13:18:23 · 239 阅读 · 0 评论 -
10. Vue 路由懒加载
Vue 路由懒加载一. 概述路由懒加载实现不同路由界面js文件在需要时再进行加载。解决不同路由代码在一个js文件中，js文件过大导致首次加载等待时间较长的问题。二. 使用const Home = ()=> import("../views/Home")三. 示例...原创 2020-06-13 13:19:30 · 203 阅读 · 0 评论 -
11. Vue 全局前置守卫
全局前置守卫官网解释你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})当一个导航触发时，全局前置守卫按照创建顺序调用（可以创建多个前置守卫类似于后端中的中间件）。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。to: Route: 即将要进入的目标 路由对象原创 2020-06-16 08:48:10 · 696 阅读 · 0 评论 -
12. Vue 路由元信息
路由元信息官网解释定义路由的时候可以配置 meta 字段：const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAu原创 2020-06-16 08:49:03 · 244 阅读 · 0 评论 -
13. Vue keep-alive用法
Vue keep-alive用法官方说明Props：include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。用法：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现原创 2020-06-16 13:37:37 · 239 阅读 · 0 评论 -
2. Vue input控件复用问题
Vue input控件复用问题问题现象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue input控件复用问题</title></head><body><div id="app"> <ul> <li v-for="item in list">{{ item原创 2020-06-21 17:20:49 · 277 阅读 · 0 评论 -
1. Vue 通用TabBar组件实战
Vue 通用TabBar组件实战一、概述实现通用化的bBar组件tab-bar 组件用于创建TabBar1.可通过 color 属性设置TabBar颜色；tab-bar-item 组件用户创建TabBar内的项目1.通过 to 属性设置跳转路径；2.通过 iconfont-name 属性设置图标；3.通过 color 属性设置颜色；4.通过 hover-color 属性设置鼠标悬停颜色；5.通过 active-color 属性设置激活颜色二、使用概述<tab-bar col原创 2020-06-21 22:16:48 · 299 阅读 · 0 评论 -
0. Vuex 概述与安装
Vuex 概述与安装Vuex 概述Vuex 可以简单的理解为用于存放全局变量的地方。虽然可以在Vue的 prototype 原型对象中定义一个用于存储全局变量的类，实现类似的操作，但无法做到数据的响应式。Vuex 安装与配置Vuex 安装npm install vuex --saveVuex 配置src 文件夹内创建 store 文件夹store 文件夹内创建 index.js 文件store/index.js 做如下配置import Vue from原创 2020-06-28 21:16:46 · 376 阅读 · 0 评论 -
2. Vuex 简单使用
Vuex 简单使用概述实现不同组件对同一个变量的调用与修改；项目结构 文件代码main.jsimport App from './App.vue'import store from "@/store";Vue.config.productionTip = falsenew Vue({ render: h => h(App), store}).$mount('#app')App.vue<template> <div原创 2020-06-28 21:30:14 · 181 阅读 · 0 评论 -
3. Vuex State
Vuex State概述State 用于存储全局的变量，类似于组件中的 data 属性，不过 State 是可以全局进行访问的。使用基础使用// 创建一个 Counter 组件const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } }}mapStat原创 2020-06-29 10:48:47 · 298 阅读 · 0 评论