同是mvvm框架,他们之间是很相似的,如何你已经熟悉其中的一个,那么另一个也就基本上也就会的差不多了. 一.动态属性.值.事件绑定 vue中使用v-bind:或者之间分号:进行绑定 ng中左括号[]进行绑定 v-model –--->[(ngModel)] @click ---->(click) 二.条件判断 v-if----->*ngIf 三.显示隐藏 v-show------> [hidden] 四.遍历一组数组进行渲染 v-for="item in items&qu…

前言:因为现成的tree组件没有找到.亦或是其依赖的其他东西太多,不太合适引入我们的项目,所以自己做了一个.大概样式: 在线例子: https://hamupp.github.io/t-vue-tree/examples/dist/#/basicDemoAndApi 属性: 1.data {类型Object} 树的全部数据,格式参考下例,其中的各个字段的说明也看示例中的注释.在此基础上你当然可以追加自己的字段. [ { title: 'parent 1', expanded: true, che…

和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 React,实现细节参考官方文档. 学院拥抱的是 Vue.js 框架,所以后续前端相关教程都会基于 Vue.js 编写,有关 Vue.js 的入门教程,可以阅读官方文档,值得一提的是,Vue.js 的作者尤雨溪是中国人,所以该框架从文档角度对中文很友好,关于如何快速入门 Vue.js 框架,作者在知乎…

最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手实现一下呗. 定义使用方式 想实现一个组件的前提,一定要想好你的需求是什么,还要自己去定义一个舒服的使用方法,这其中也是有原则的,对使用者来说,使用方式越简单越好.那么对应的代价就是写这个组件的复杂度会变高. 我想要的使用方式是这样的:可以在任意的地方去调用到这个方法,可以随时控制其状态. 看下对应…

自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合vue.js 就不需要webpakc这种构建工具了,可以直接在页面内使用,下面以 ‘yyl-npm-practice’ 这个包为例 第一步:使用 vue init webpack-simple yyl-npm-practice   初始化项目 提示: 不要用 vue init webpack npm…

如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许外部环境传递数据给组件 event 允许从组件内触发外部环境的副作用 slot 允许外部环境将额外的内容组合在组件中 prop 组件具有自身状态,当没有相关 porps 传入时,使用自身状态完成渲染和交互逻辑:当该组件被调用时,如果有相关 props 传入,那么将会交出控制权,由父组件控制其行为 仅…

相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 –一个组件小于 1Kib (实际打包完不到0.8k) 1. 一般都是多处使用 –需要解决每个页面重复引用+注册 2. 一般都是跟js交互的 –无需 在<template>里面写 <toast :show="true" text="弹窗消息"…

简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含多个独立发布的模块/包. ps.本文涉及到的工具配置其实在平时开发中一般都不需要自己配置,我们使用的各种脚手架都帮我们搞定了,但是我们至少得大概知道都是什么意思以及为什么,说来惭愧,笔者作为一个三四年工龄的前端老人,基本没有自己动手配过,甚至没有去了解过,所以以下大部分工具都是笔者第一次使用,除了介…

之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好在浏览器里以手机模式浏览) 在讲具体实现前,我想先分享下自己认为的理想的公用组件是什么样的: 1. 黑盒性,即除了你自己以外,其他的开发者在快速阅读使用文档之后可以立刻上手,而不用关心你的内部实现: 2. 独立性,即做好解耦,不与父组件有过多关联: 3 自定义性,适当地暴露一些输入接口或者方法给外部…

git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 better-scroll 的实现. 在线例子 起步 安装 npm i --save vue-sliding-button 引入 import Vue from 'vue' import SlidingButton from 'vue-sliding-button' Vue.use(SlidingButt…