vue
文章平均质量分 71
深入学习
苏Sue酥
今天的你比昨天更博学了吗
展开
-
VueRouter基础知识记录1
学习笔记记录有点乱,凑合看VueRouter定义路由的规则,是一个数组对象实例化路由对象, 使用new VueRouter()生成一个 router 实例let router = new VueRouter({ // 路由实例的配置项,主要是一个 routes 选项,这个选项就是路由规则})实例化Vue根组件时,也就是 new Vue() 的时候,需要配置 router 选项,选型的值 就是上一个步骤中生成VueRouter的实例 这时访问页面会发现url地址就会出原创 2022-04-22 10:56:47 · 369 阅读 · 0 评论 -
vue2 自定义事件 v-model .sync
vue-将原生事件绑定到组件 <div id="app"> <base-input v-on:focus="onFocus" v-model="message" label="姓名"></base-input> </div> <script> Vue.component('base-input', { inheritAttrs: false, prop原创 2022-04-19 11:15:14 · 1178 阅读 · 0 评论 -
vue2、vue3 v-model
vue2 vue3vue2vue2-官网 <!-- 原生组件 --> <input v-model="val" /> <input :value="val" @input="val = $event.target.value"> <!-- 自定义组件 --> <my-component v-model="val" /> <my-component :value="val" @input="原创 2022-04-18 16:41:41 · 1253 阅读 · 0 评论 -
手写Vue-cli
1.实现自定义指令1.通过npm init --y初始化一个node项目2.创建一个JS文件, 并且在JS文件的头部通过#! /usr/bin/env node告诉系统将来这个文件需要在 NodeJS环境 下执行3.在package.json中新增bin的key, 然后这个key的取值中告诉系统需要新增什么指令, 这个指令执行哪个文件"bin": { "nue-cli": "./bin/index.js"}4.通过npm link将本地的包链接到全局2.编码规范检查原创 2021-09-23 17:04:16 · 526 阅读 · 1 评论 -
手撕Vue-Router
1.原创 2021-09-15 08:49:54 · 157 阅读 · 0 评论 -
手写vuex
1.Vuex特点1使用Vuex的时候需要用到Vue的use方法我们都知道use方法是用于注册插件的所以VueX的本质就是一个插件所以实现VueX就是在实现一个全局共享数据的插件2.Vuex特点2在使用Vuex的时候我们会通过Vuex.Store创建一个仓库所以还需要在Vuex中新增Store属性, 这个属性的取值是一个类import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.S原创 2021-09-13 17:09:23 · 567 阅读 · 0 评论 -
手写vue---部分实现
let CompileUtil = { getValue(vm, value){ // 切割 time.h ==> time h return value.split('.').reduce((data, currentKey) => { // 第一次执行:data = $data, currentKey = time // 第二次执行:data = time, currentKey = h原创 2021-09-08 16:04:46 · 223 阅读 · 0 评论 -
Vue-Plugin开发插件
1.Vue.use()做了什么事情?Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用2.什么时候需要定义插件?当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件例如: 网络加载指示器3.如果自定义一个插件?开发插件...原创 2021-08-30 16:07:24 · 352 阅读 · 0 评论 -
vue识别不了.ico后缀的图片,显示[object Module]
1.vue识别不了.ico后缀的图片,显示[object Module]报错如下:2.vue.config.js配置module.exports = { chainWebpack: config => { config.module .rule('images') .test(/\.(png|jpe?g|gif|ico)$/i) .use('url-loader') .loader('url-loader') .t原创 2021-08-15 15:17:59 · 820 阅读 · 2 评论 -
vue的ref
<div class="lyric" ref="lyric"></div>直接通过this.$refs.lyric.offsetHeight拿到的是undefined,因为this.refs.lyric拿到的vue组件,从组件中拿到原生的元素this.refs.lyric拿到的vue组件,从组件中拿到原生的元素 this.refs.lyric拿到的vue组件,从组件中拿到原生的元素this.refs.lyric.$el.offsetHeight...原创 2021-08-03 10:25:12 · 291 阅读 · 0 评论 -
vue-transition过渡动画
钩子函数实现transitions-js推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。<transition :css="false" @enter="enter" @leave="leave" > </transition>实现npm install velocity-animatevelocity插件中文文档 metho.原创 2021-08-02 16:59:37 · 510 阅读 · 0 评论 -
脚手架中敲template,自动生成模板
脚手架中敲template,自动生成模板原创 2021-07-24 15:04:52 · 250 阅读 · 0 评论 -
vue-slot插槽
1.什么是插槽?默认情况下使用子组件时在子组件中编写的元素是不会被渲染的如果子组件中有部分内容是使用时才确定的, 那么我们就可以使用插槽插槽就是在子组件中放一个"坑", 以后由父组件来"填"2.什么是匿名插槽没有名字的插槽, 会利用使用时指定的能容替换整个插槽注意点:如果有多个匿名插槽, 每一个匿名插槽都会被指定的内容替换虽然写多个匿名插槽不会报错, 但是在企业开发中推荐只能有一个匿名插槽插槽可以指定默认数据, 如果使用者没有填这个坑, 那么就会显示默认数据如果使用者填了这个原创 2021-07-20 09:33:46 · 313 阅读 · 0 评论 -
Vue组件相关的知识
一、引子Vue两大核心:1.数据驱动界面改变2.组件化二、组件、组件化1.什么是组件? 什么是组件化?在前端开发中组件就是把一个很大的界面拆分为多个小的界面, 每一个小的界面就是一个组件将大界面拆分成小界面就是组件化2.组件化的好处2.1 可以简化Vue实例的代码2.2 可以提高复用性3.创建全局组件3.1创建组件构造器3.2注册已经创建好的组件3.3使用注册好的组件Vue-component// 注册组件,传入一个扩展过的构造器Vue.componen原创 2021-07-19 15:18:56 · 109 阅读 · 0 评论 -
Vue.directive自定义指令
1.自定义指定1.1 自定义全局指令自定义全局指令的特点:在任何一个 vue 实例控制的区域中都可以使用1.1.1 自定义全局指令的语法格式vue.directive("自定义指令名称", { 生命周期名称: function (el) { 指令业务逻辑代码; },});具体运用directive 方法接收两个参数第一个参数:指令的名称第二个参数:对象注意点: 在自定义指令的时候, 在指定指令名称的时候, 不需要写 v-注意点: 指令可以在不同的生命周原创 2021-05-07 21:09:21 · 222 阅读 · 0 评论 -
vue中vm.$set函数的使用
vm.$set函数的使用转载 2021-01-13 15:52:50 · 1529 阅读 · 0 评论 -
prop的双向绑定
VUE-(.SYNC)真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源推荐以 update:myPropName 的模式触发事件取而代之。 this.$emit('update:title', newTitle)父组件<father-vue v-bind:title="doc.title" v-on:update:title="doc.title = $event"></father-vue>缩写-----原创 2021-01-12 18:00:06 · 268 阅读 · 0 评论