冲锋

仓库地址:vue-vant-mobile,基础配置一套, 拿来直接进行页面开发,

临时帮朋友写个移动端的项目, 发现 它的项目中有个 pdf 文档的 签名功能, 也是折腾了一下签名组件签名组件原理: 利用原生canvas 配合 移动端的事件, touchstart, touchend, touchmove, 进行 在canvas 画布上画线, 最后,把生成的签名, 通过 toDataURL()方法 保存 为 base64 图片,就拿到签名了,实现效果如下:清空画布, ...

Vue响应式特点1.使用对象时,必须先声明,这个属性才是响应式的2. 给对象数据递归增加getter和setter3.数组里套对象,对象时支持响应式变化的,常量则没有效果4.修改数组的索引及长度,是不会导致视图更新5.如果是新增的数据(对象类型),vue 才会帮你监控vue 要监听的数据 可能是对象, 数组, 或者 其它基本值1. 首先 说基...

参考:vuex代码仓库,vuex官方文档关于vuex 的怎么使用,就不说了, 这次主要是通过自己实现一个vuex,来理解vuex 的原理及内部实现关于vuex 的工作流程, 就不再赘述了,官方的流程图(在vuex是什么?)这一节中画的很清楚(具体位置基本在最底部了)具体工作流程:1. 每个组件都共享Store中的数据, 以及每个组件都可以通过 $store.state...

参考文档自定义指令一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。...

需求：假如现在有个导航，第一个有默认样式，其它的点击谁谁有样式，而原先有样式要取消掉直接上代码了 style<style> .active { color: #f00 } ul li { float: left; padding: 10px }</style>html&l...

参考官方文档https://vuex.vuejs.org/zh-cn/Vuex 是什么？官方是这么解释的：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-tr...

好长一段时间没有关注vue脚手架了，昨天因为需要个后台模板，用脚手架搞了一下，竟然发现指令不能用了，看官方文档已经升级3.0，也是试的玩了一下，大致写写怎么玩的！1.先全局安装vue-cli3.0 检测安装：vue -V2.创建项目（这个就跟react创建脚手架项目比较像了） 这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是让你选...

vuecli3.0 创建项目步骤略过这里我选的是 (vue-router, vuex, stylus, babel, unit-mocha, e2e-cypress)进行测试项目安装完成后目录在目录里加入了3个文件 分别是本地，测试，和 开发的 环境接口 在.env文件下: 使用VUE_APP_URL = “接口url” 书写格式：VUE_APP_[z自定义nam...

组件基本需要这三部分组成props（属性）event（事件）slot（插槽）父子组件通信# App.vue (父组件)<template> <div id="app"> <Child :msg="messsage" :model=&a

输入框输入值之后，立马筛选下边符合条件的数据html <div id="app"> <input type="text" v-model="val"> <ul> <li v-for="(item,index) in dataSource"> {{item.name}}

写在前边注意开发环境的本地代理或者测试环境的代理，在部署到正式上时，一定要换成线上的IP地址，不然，数据拿不到哦代理配置easy mock 模拟接口地址 ， 就以第一个进行说明怎么配置和使用了, 只说代理配置部分，其它不再说明新建项目（略过le... ）ip地址配置成自动切换的首先在项目中 新建 vue.config.js (cli配置文件) ...

参考文档 $watch什么时候使用它？我们都知道，当父组件向子组件传值时，子组件通过props 可以接收到父组件传过来的值但这样只能接收父组件的静态值：比如以下代码:下边是个数字框组件展示这个问题:父组件<template> <div id="app"> <one v-model="value" :max='10' :min="0"...

参考文档 is 属性和内置组件 component代码实例:在父组件中 我现在在 app.vue中//首先准备你的切换的组件<template> <div id="app"> <!-- vue.js提供了一个特殊元素 component 用来动态挂载组件 使用is特性来选择挂载的组件--> <component ...

具体解释参考文档这个插槽啊 ，怎么说呢，如果你不开发组件，几乎很少用到，甚至用不到访问插槽呢，使用方法vm.$slots.插槽名字如果有的插槽没有名字。则使用vm.$slots.default 访问 打印得到都是数组得到dom 元素vm.$slots.插槽名字[索引].elmvm.$slots.default[索引].elm代码实例:在父组件中 我现在在 app...

template 模板<template> <div class="one"> <u> <li tag="div" v-for="(item,index) in sort" :key="index"> {{ item.name }

template模板<template> <div class="two"> <table border="1px solid #666" style="width:500px;"> <thead> <tr>

v-model @input 使用<template> <div> <input type="text" v-model="value"> <p>{{ value }}</p> <button @click="getval"&g

模板数据<template> <div> <!-- checkbox单独使用时，不需要绑定v-model，直接用v-bind绑定一个布尔值，为真时选中，为假时不选 --> <label>checkbox做单选使用</label> <br> <...

实际项目中我们获取选择的数据的id；这时候 需要配合使用v-bind，才能获取到选择的那条数据的id值，其实就是id赋值给value属性<template> <div> <select v-model="select" > <option v-for="(a,index) in arr" :key="in...

**在输入框中，v-model 默认是同步数据，使用 .lazy 会转变为在 change 事件中同步 ，也就是在失去焦点 或者 按下回车键时才更新**<template> <div> <p>.lazy修饰符</p> <input type="text" v-model.lazy="val"&amp

**首先我们准备一个父组件模板-------------**<template><template> <div id="app"> <!-- 使用子组件 --> <!-- 向子组件传值 需要在父组件中使用v-bind绑定一个名字 :outdata="arr" 其中outdata这个名字是

子向父组件通信，需要用到自定义事件，使用v-on:xxx 或@:xxx ，它除了监听DOM事件外，还可以用于组件之间的自定义事件子组件使用 $emit()来触发事件 父组件使用$on()来监听子组件的事件--------------------------------------除了用 v-on || @ 在组件上 添加自定义事件外，也可以监听DOM事件，这时需要用.navtiv...

首先借鉴官方文档有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：var bus = new Vue()// 触发组件 A 中的事件bus.$emit('id-selected', 1)// 在组件 B 创建的钩子中监听事件bus.$on('id-selected', function (id) { // ...})具体怎...

参考文档vm.$parent类型：Vue instance详细：父实例，如果当前实例有的话。 这种改法在组件嵌套时，子组件可以直接 修改它的父组件的值具体使用：父组件 app.vue<template> <div id="app"> {{ a }} <!-- 使用组件 --> <three/>...

参考文档子组件引用尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如：<div id="parent"> <user-profile ref="profile"></user-profile></div>var parent = new Vu...

参考vue2.0文档单个插槽使用除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空且没有要插入的内容时才显...

参考vue2.0文档具体解释参考文档简单理解就是 给每一个 slot 一个name属性， 父组件中 使用子组件标签时用的slot=“xxx”, 要跟子组件的name匹配上，才会渲染出来具名插槽和单个插槽可以共存具名插槽代码实例:在父组件中 我现在在 app.vue中<template> <div id="app"> ...

具体解释参考文档代码实例:在父组件中 我现在在 app.vue中<template> <div id="app"> <!-- 使用组件 --> <three> <!-- 作用域插槽 --> <!-- 具有特殊特性 slot-scope 的 <template&