![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
头发多多程序媛
请努力
展开
-
vue按键修饰符的使用 监听键盘事件的实现
有没有很疑惑每次按回车输入便会被监听到是怎么实现的?键盘按下回车,被监听到并弹出消息框提示代码实现示例:(以及别的键盘事件补充)输入框绑定事件@keyup @mousedown为鼠标事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2020-09-28 15:00:53 · 426 阅读 · 0 评论 -
Vuex入门必须了解的知识点
介绍:vuex也是vue.js的核心插件,vue专门开发的状态管理模式,它采用了集中式存储管理,应用所有的组件的状态(data),并以相应的规则保证状态以一种可预测的方式发生变化我们先看看他如何安装:(两种方式)1.cdn引入(必须先引入vue 后引入vuex) <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https:原创 2020-09-28 14:45:04 · 125 阅读 · 0 评论 -
vue-router路由入门
vue-router介绍:是vue的一个插件,用来提供路由功能,vue官方的路由管理器他与vue的核心深度集成,所以构建单页应用十分简单。功能:嵌套的路由基于模块化的、基于组件的路由配置路由参数、查询、通配符HTML5中history和hash模式自定义的滚动行为基于vue过度系统的视图过渡效果细粒度的导航控制使用:·安装1.cdn <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-r原创 2020-09-28 14:25:27 · 279 阅读 · 1 评论 -
vue可复用技术-混入入门
可复用技术混入:mixin为组件提供可复用的功能一个混入对象可以包含任意组件选项当组件使用混入对象时,所有混入对象的选项就会被混入到组件本身组件就可以使用混入对象中的选项主要用于插件的开发使用/注册·局部注册 var mixin={ data(){ return { message:"这里是混入对象的message" } }原创 2020-09-27 17:40:38 · 80 阅读 · 0 评论 -
vue的插槽你了解多少
插槽允许我们在调用子组件时为子组件传递模板当组件渲染的时候,插槽会被替换为我们的自定义文本插入自定义内容 template:` <div><h2>标题:{{title}}-{{typeofTitle}}</h2></div> <slot></slot> <div>自定义组件,计数器:{{count}}</div>原创 2020-09-27 17:38:30 · 284 阅读 · 0 评论 -
vue动态渲染组件
component 动态渲染组件使用<component v-bind:is="xxxComponent"></component>来动态渲染组件使用方式: <keep-alive><component :is="myComponent"></component></keep-alive> Vue.component("briup-success",{ template:`原创 2020-09-27 17:36:22 · 968 阅读 · 0 评论 -
vue计算属性及监听器
计算属性{{js表达式}}当双大括号中的表达式过于复杂的时候,我们会使用计算属性用法methods:{reversedMessage(){return this.message.split(’’).reverse().join(’’)}},// 计算属性computed:{reversedMessage(){return this.message.split(’’).reverse().join(’’)}}computed 和 methods的区别计算属性依赖内部的缓存机制,原创 2020-09-27 17:33:59 · 81 阅读 · 0 评论 -
Vue值之事件的概念
1.事件三要素事件源 事件对象 事件驱动程序2.事件绑定在DOM元素上直接绑定在JavaScript代码中绑定绑定一个事件监听函数3.事件流事件在元素节点与根节点之间特定的传播顺序,经过的所有节点都会收到该事件,这个过程就是DOM事件流分类:冒泡型事件流:事件传播是从最特定的事件目标—>最不特定的事件目标DOM树的叶子节点->根节点捕获型事件流:事件传播是从最不特定的事件目标—>最特定的事件目标DOM树的根节点->叶子节点DOM标准规定的事件流:包括三个阶原创 2020-09-27 17:32:36 · 163 阅读 · 0 评论 -
Vue声明周期详解
生命周期 钩子函数初始化阶段beforeCreate()在初始化的时候会调用,完成vue实例的生命周期相关属性的初始化,以及事件的初始化。这个时候还不能访问实例中data中的属性以及methods中的方法created()初始化完毕,完成了vue数据的注入以及数据监听操作这个时候,意味着vue实例创建完毕,可以访问数据挂载阶段brforeMount()挂载前,vue会判断 有没有el属性,完成模版解析,但是数据并没有绑定到模版中mounted()挂载完成,vue会创建vm.$el原创 2020-09-27 17:28:55 · 183 阅读 · 0 评论 -
Vue安装步骤(详细)
有三种方法: 1. cdn加速服务器,这种方式更加便捷,当项目部署以后,服务器直接从cdn上获取资源,要比从自己的服务器上获取资源快很多bootcdn网址: https://www.bootcdn.cn或者https://staticfile.org/vue引入:https://cdn.staticfile.org/vue/2.6.12/vue.min.js// 引入网络资源<script src="https://cdn.staticfile.org/vue/2.6.12/vue原创 2020-09-27 17:27:32 · 4934 阅读 · 0 评论 -
Vue模版语法之绑定(示例代码)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue模版语法</title> <script src="https://cdn.bootcdn.net/原创 2020-09-27 17:24:10 · 116 阅读 · 0 评论 -
Vue生命周期的代码学习实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue生命周期</title> <script src="../vue.min.js"></sc原创 2020-09-27 17:20:59 · 103 阅读 · 0 评论 -
vue入门 模板渲染代码实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue起步</title> <script src="https://cdn.bootcdn.net/aja原创 2020-09-27 17:18:45 · 189 阅读 · 0 评论 -
Vue自定义组件父组件实现@click点击事件绑定的方法(实现计数器)
自定义组件的实现中,是实现一个计数器编程,原本是绑定在子元素上的@click事件,尝试绑定在自定义组件的父元素上进行实现。原来的子元素绑定实现计数器代码如下:<body> <div id="app"> <briup-info>{{count}}</briup-info> </div></body> Vue.component("briup-info",{ template:`原创 2020-09-11 12:10:39 · 3263 阅读 · 0 评论