Vue
关注
分享
扫一扫
jensonliu
第一次 是小白
展开
-
重温Vue数据绑定原理(幼儿园版)
<head></head><body> <div id="app"> <input id="editName" type="text"> <br /> name:<span id="name"></span> <div>------------------------------</div> age:<span id="age"></spa原创 2020-10-15 16:41:14 · 211 阅读 · 1 评论 -
SVG组件封装
SVG组件封装SvgIcon/index.vue<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName"></use> </svg></template> <script> export default { name: 'SvgIcon', pr原创 2020-09-25 15:52:54 · 424 阅读 · 0 评论 -
Vue 妙用渲染函数 & JSX
官方例子FlexiableSlot.jsexport default { render: function (createElement) { return createElement( 'h' + this.level, // 标签名称 this.$slots.default, // 子节点数组 ) }, props: { level: { type: Number, required: true, },原创 2020-09-23 17:07:59 · 301 阅读 · 0 评论 -
Vue3 | 初体验
项目搭建：1.安装/升级vue-cli (要求 version > 4)npm install -g @vue/cli2.创建项目vue create vue-next-test3.添加vue3依赖 (可在vue2项目中无破坏性的引入)vue add vue-nextAPI参考文档 ：vue-composition-api-rfc代码设计逻辑复用在项目中我们经常需要复用一些逻辑，官方给出了一个经典**「鼠标追踪」的案例。这个组合函数仅依赖它的「参数」**和 「Vue 全局导出的 A原创 2020-07-31 13:09:46 · 389 阅读 · 0 评论 -
Vue | 文字无缝滚动效果
触发过渡效果后：由于div设置了overflow:hidden，因此li1和li3的区域都会被隐藏，只显示li2过渡效果结束后又变回：数据部分，存放li数据的数组初始为[1,2,3]触发滚动： this.animateUp = true setTimeout(() => { this.listData.push(this.listData[0]) ...原创 2019-12-09 01:20:35 · 415 阅读 · 0 评论 -
Vue | 自定义指令 + Vuex 实现鉴权
需求：要求实现一个自定义指令，按钮使用了该指令后，点击时检查是否登录/是否有权限，从而决定下一步操作。自定义组件可以全局定义或组件内定义局部定义<el-button v-permission-click="goKeepAlive">keep-alive</el-button>directives:{ 'permission-click':{ ...原创 2019-12-04 17:52:50 · 1741 阅读 · 0 评论 -
Vue | 自定义组件数据双向流动
现有一个查询页面 index.vue ，组成架构如下需求：在表单组件中新增一个下拉框选项,对地区(area)进行选择，并做到数据能双向流动, 由于提交表单是在query，而下拉框数据放在A中，因此A中下拉框数据变化要更新到父组件的表单数据中。实现表单组件query.vue：<el-form :model="queryForm" :rules="rules" ref="queryFo...原创 2019-12-03 17:42:30 · 177 阅读 · 0 评论 -
Vue 2.6.x | 插槽
v-slotvue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 ：v-slot 指令。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中，这两个指令将会被废弃Example子组件：<template> <div class="my-card"> <!--...原创 2019-11-18 13:56:58 · 330 阅读 · 0 评论 -
Vue | Vuex集合
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);const store = new Vuex.Store({ state:{ count: 1, }, getters: { getCount:function(state){ console.log('...原创 2019-09-24 13:05:14 · 134 阅读 · 0 评论 -
Vue | 插槽
在父组件引入并使用了子组件，有时候会希望在其中插入一些元素等，就可以用到插槽普通插槽和具名插槽父组件<template> <div title="普通插槽"> <Child> <div> <ul style="background-color: red"> <...原创 2019-09-24 02:00:31 · 171 阅读 · 0 评论 -
Vue | Scoped
<style scoped> 中的scoped属性，主要影响着父子组件的样式。我自己在做项目的时候，被这个属性坑了一把。我在自己的组件中引入了ElementUi的组件，当我想去修改ElementUI的组件默认样式时发现无效：<template> <div style="margin: auto;width: 50%"> ...原创 2019-09-04 20:04:52 · 186 阅读 · 0 评论 -
Node | 搭建express项目并打包Vue
在编写页面的时候，可以在vue根目录中加入node服务(使用express/koa等)，用于开始时接入数据可以参考:https://github.com/liujiapeng/node-vue-module本文介绍利用express命令行引入express框架，并将vue项目打包1. 全局安装expressnpm install express -gnpm install...原创 2019-08-31 22:30:37 · 3403 阅读 · 4 评论 -
Vue | router-view传值
router-view传值也是父子组件传值父组件中： <div> <v-top></v-top> <router-view :data1="data1"></router-view> </div> data(){ return { ...原创 2019-08-30 15:56:56 · 7312 阅读 · 0 评论 -
Vue 双向绑定(2) : 观察者订阅者
上一篇https://blog.youkuaiyun.com/qq_38765789/article/details/99952976讲到数据劫持部分, 这一部分实现一个订阅者1.需要一个可以容纳订阅者的消息订阅器Dep function Dep(){ this.subs = []; } Dep.prototype = { addSub:funct...原创 2019-08-22 15:09:29 · 560 阅读 · 0 评论 -
Vue 双向绑定(1) : 数据劫持
关于Vue的双向绑定原理，网上说的大同小异，数据劫持，订阅者发布者模式，diff算法几个核心，这里先记录一下数据劫持部分。使用的是vue2的Object.defineProperty实现（vue3据说使用了es6的Proxy实现，这个到时候再研究）。1.劫持一个对象 let person = { name:'jiapeng', ag...原创 2019-08-21 19:10:24 · 237 阅读 · 0 评论 -
Vue | Axios封装
最终调用顺序如下：1. /js/axios.js封装axios方法：// 1.创建实例const service = axios.create({ // baseURL timeout: 30000 //设置超时时间 });// 2.添加拦截器// 添加请求拦截器service.interceptors.request.use(function (co...原创 2019-08-15 18:14:18 · 125 阅读 · 0 评论