2020年07月_叫我 Add V

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创 Vue 路由 Vue-Router

Vue 路由 Vue-Router什么是路由Vue Router 是 Vue 官方提供的路由管理器，他和 Vue 的核心深度集成，让构建单页面应用变得非常简单，通过根据不同的请求路径，切换显示不同组件进行渲染页面。基本路由使用安装路由注意：使用路由首先要安装模块npm install vue-router引入 vue-router.js<script src="./node_modules/vue/dist/vue.js"></script><script

2020-07-29 11:30:01 191 1

原创 vue slot插槽

vue slot插槽作用：主要是用于父组件向子组件传递标签+数据（而 props 和自定事件只是传递数据）。场景：一般是某个位置需要经常动态谢欢显示效果（比如说：饿了么）。子组件定义插槽在子组件中定义插槽，当父组件向指定插槽传递标签数据后，插槽处就对渲染了，否则的话，插槽处就不会被渲染。<div>  <slot name="aaa" > 不确定的标签结构 1 </slot&

2020-07-28 17:42:38 218

原创 Vue props向子组件中传递数据

Vue props向子组件中传递数据声明组件对象中定义 props1、在声明组件对象中使用 props 选项指定const MyComponent = { template:'<div></div>', props: 此处值有以下3中方式, components:{ }}方式一：指定传递属性名，注意是数组形式。props:['id','name','sarlary','isPublished'] 方式二：指定属性名和数据类型，注意是对象形式。props:{

2020-07-28 17:23:19 381

原创 Vue 组件间的通信

Vue 组件间的通信组件间通信方式props ：父组件向子组件传递数据。$emit ：自定义事件。slot ：插槽分发内容，带上标签数据一起传输，主要是父组件想子组件传输。组件间通信规则不要在子组件中直接修改父组件传递的数据。数据初始化的时候，应当看初始化的数据是否用于多个组件中，如果需要被用于多个组件中，则初始化在父组件中；如果只在一个组件中使用，那就初始化在这个要使用的组件中。数据初始化在哪个组件，更新数据的方法（函数）就应该定义在哪个组件中。...

2020-07-28 16:56:45 119 1

原创 Vue 组件化注意事项

Vue 组件化注意事项组件可以理解为特殊的 Vue 实例，管理自己的 template 模板。组建的 template 必须有且只有一个根节点。组件的 data 选项必须是一个函数，且函数体返回一个对象。组件与组件之间是相互独立的，可以配置自己的一些选项资源 data 、 methods 、 computed 等等。思想：组件自己管理自己，不影响别人。组件示例<!DOCTYPE html><html lang="en"><head> &lt

2020-07-28 16:43:52 345

原创 VUE多个组件示例

VUE多个组件示例示例一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多个组件示例</title></head><body>

2020-07-28 16:35:36 561

原创 Vue组件化开发

Vue组件化开发组件的概念组件（component）是 Vue 最强大的功能之一，非常重要。Vue中的组件化开发就是把网页的重复代码抽离出来，分装成一个个可以复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。这个方式非常灵活，可以极大的提高我们的开发和维护效果。组件系统是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。简单来说，组件就是对局部视图的封装。抽离出来的组件，还是有三部分组成，分别是：HTML、JS、CSS。使用组件的好处，就一句话：提高开发效率，更

2020-07-28 16:05:41 286

原创 Vue 获取当前时间并格式化

Vue 获取当前时间并格式化现在的代码，一家原创，万家抄袭，嗯，我也是…直接就是大代码一顿狂粘！！啪啪啪！用去吧！/** * 获取当前时间 * 格式YYYY-MM-DD */Vue.prototype.getNowFormatDate = function() { var date = new Date(); var seperator1 = "-"; var year = date.getFullYear(); var month = date.getMonth() +

2020-07-28 14:16:54 4273 1

原创 VUE 过滤器以及插件

VUE 过滤器以及插件过滤器什么是过滤器过滤器对将要显示的文本，先进行特定格式化处理，然后在进行显示。注意：过滤器并没有改变原本的数据，只是产生新的对应的数据。使用方式定义过滤器全局过滤器Vue.filter( 过滤器名称 , function(value) ){ // 数据处理逻辑})局部过滤器在 vue 实例中使用 filter 选项，当前实例范围可用。new Vue({ filters : { 过滤器名称:function ( value ) { // 数据

2020-07-27 17:58:29 386

原创 Vue 表单数据双向绑定 v-mode

Vue 表单数据双向绑定 v-mode每一个Vue项目，每一个系统，肯定涉及到表单的双向数据绑定问题，这一部分是 vue 的重中之重，不是因为知识点复杂，而是因为只要参与 vue 项目的开发，那么就必不可少。单向绑定数据变，视图变；视图变（浏览器控制台上更新html），数据不变；这样的都是单向绑定。双向绑数据变，视图变；视图变（在输入框更新），数据变；基础用法v-model 指令，用于表单数据双向绑定，针对以下几种类型：text 文本testarea 多行文本radio 单选框c

2020-07-27 17:05:41 1883 1

原创 VUE 事件修饰符以及按键码

VUE 事件修饰符之前写了一篇关于事件处理的文章，这篇的时间修饰符主要就是来修饰之前事件处理的事件名的，目的是为了扩展事件的功能。事件修饰符.stop：阻止单击事件继续传播，event.stopPropagation().prevent：阻止事件默认行为 event.preventDefault().once：点击事件将只会触发一次...

2020-07-27 16:26:30 320

原创 VUE事件处理 v-on

VUE事件处理 v-on事件处理方法完整格式：v-on:事件名="函数名" 或者 v-on:事件名="函数名(参数...)"缩写格式：@事件 = "函数名" 或者 @事件名 = "函数名(参数...)"注意：@ 后面没有冒号。event ：函数中的默认形参，代表原生的DOM事件，当调用的函数，有多个参数传入的时候，需要使用原生DOM事件，则通过 $event 作为实参传入。作用：用于监听 DOM 事件。案例<!DOCTYPE html><html la

2020-07-27 13:37:53 161

原创 VUE 列表渲染 v-for

VUE 列表渲染 v-for列表渲染指令v-for 迭代数组v-for = " ( alias , index ) in array "alias：数组元素迭代的别名；index：数组索引值（从0开始（可选））；例如：<div v-for = " item in items " :key= " item.id "> </div><div v-for = "( item index) in items " :key= " item.id "> </d

2020-07-27 13:17:46 360

原创 VUE 条件渲染 v-if、v-show

VUE 条件渲染 v-if、v-show条件指令v-if 是否渲染当前元素v-elsev-else-ifv-show：与 v-if 类似，只是元素始终被渲染并保留在DOM中，只是简单的切换CSS属性display来显示或者隐藏。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width

2020-07-27 11:46:36 266

原创 VUE Class列表样式数绑定案例

VUE Class列表样式数绑定案例Class 与 Style 绑定 v-bind通过class列表和style指定样式是数据绑定的一个常见需求，他都是元素属性，都用 v-bind 处理，其中表达式结果的类型可以是：字符串、对象或数组。语法格式class 的表达式可以为： v-bind:class = '表达式' 或者 :class = '表达式' 字符串 :class = "activeClass" 对象 :class = "{ active : isActive , err

2020-07-27 11:21:43 356

转载 echarts属性的设置（完整大全）

// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’,// 默认色板color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700', '#6699FF','#ff6666','#3cb37

2020-07-25 14:26:38 2832

原创 vue计算属性和监听器

计算属性 computedcomputed 选项定义计算属性。计算属性类似于 methods 选项中的函数。比较：计算属性：会进行缓存，只在相关响应式依赖发生改变的时候才会重新求值。函数：每次都会执行函数体进行计算。需求：输入数学与英语的分数，采用 methods 与 computed 分别计算出总得分。使用函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g

2020-07-22 21:07:39 257

原创 vue.js核心技术开发

vue.js入门开发vue {{}} 双向数据绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>&lt

2020-07-21 20:44:51 256

原创 vue.js概要详解和框架比较

vue.js渐进式框架和应用场景教程https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88什么是渐进式渐进式简单的讲就是：用什么技术就引用什么技术到项目中使用，而不是把所有的东西全部引入到项目里面。使用的原因易用：入门简单，不需要太高深的技术灵活：可以在一个库和另一个库之间自如伸缩高效：超快虚拟DOM，省心优化，基本上不需要DOM操作在什么场景下使用一般是单页面应用程序（SPA）用单页面应用程序，如网易云

2020-07-21 18:19:47 206

原创 NPM包管理工具

NPM包管理工具NPM全程是Node Package Manager，他是JavaScript的包管理工具，是Node.js平台默认的包管理工具，通过NPM可以安装、共享、分发代码、管理项目依赖关系。可以从NPM服务器下载别人编写的第三方包到本地。可以从NPM服务器下载并安装别人编写的命令行程序到本地使用。可以自己编写的包或者命令行上传到NPM服务器供别人使用。可以吧NPM理解为前端的Maven，通过NPM很方便的下载使用js库，管理前端工程。最新版的Node.js已经继承了npm，所以首先

2020-07-21 13:01:39 555

原创 vue项目axios封装使用

vue项目axios封装使用现在十个人有六个是面向百度编程，还有三个是面向CSDN编程。博客乱的一笔。一家原创，万家抄袭。嗯，这篇博客也是抄的，但是我还是打了原创，就是这么下流。最近在编写vue项目的时候对于axios的使用表示非常随缘，安装完成之后就是简单的dome一粘匆匆了事，后期维护时候就难受的一笔，好早之前就想看一下正经情况下该怎么封装使用，看了好多博客，百度了好多案例，自己写点什么吧。其实实现axios封装的目的就是简化代码方便后期维护，不至于让以后接手项目的同行一边维护一边口吐芬芳。

2020-07-01 10:12:08 625