![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE学习笔记
ICanWin_lll
这个作者很懒,什么都没留下…
展开
-
VUE程序运行过程-runtime-complier和runtime-only的区别
一.VUE程序运行过程当把template传递给vue实例的时候,vue实例会把该模板内容保存到vm.options,然后对该template解析成ast(抽象语法树)将ast编译为render()函数,通过render函数翻译成虚拟DOM将虚拟DOM渲染成真实的DOM二.Runtime-Compiler和Runtime-only1.Runtime-Compiler:选择Runtime-Compiler创建的项目main.js:import Vue from 'vu原创 2022-01-26 17:10:09 · 735 阅读 · 0 评论 -
VUE声明周期详解
VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁四个模块。注:在组件的整个生命周期内,钩子函数都是可被自动调用的,且生命周期函数的执行顺序与书写的顺序无关参考:百度安全验证https://baijiahao.baidu.com/s?id=1668393188098846185&wfr=spider&for=pc...原创 2022-03-26 16:38:58 · 1318 阅读 · 0 评论 -
vue双向数据绑定原理详解(附源码)
vue的响应式原理1.vue内部如何监听数据的改变的?Object.defineProperty 监听对象属性的改变Object.keys(obj).forEach(key=>{ let value = obj[key] obj.defineProperty(obj,key,{ //当value值被修改的时候,执行set()方法 set(newValue) { //可以监听到key的改变了,谁用?告诉谁 value=newValue原创 2022-03-04 16:49:33 · 1183 阅读 · 0 评论 -
VUE 如何将一个组件封装成一个插件
vue中的组件可以以普通的方式封装,也可以以插件的方式封装:vue中插件的封装举例封装一个toast插件:1.创建toast组件创建一个toast文件夹./toast,里面建index.jsimport Toast from './toast'const obj = {}obj.install=function (Vue) { //1.创建组件构造器 const toastConstrstor = Vue.extend(Toast) //2.new的方式,根据组件构造器原创 2022-03-02 19:41:44 · 1804 阅读 · 0 评论 -
路由懒加载
vue项目实现路由按需加载(路由懒加载)的3种方式_xm1037782843的博客-CSDN博客_路由懒加载转载 2022-02-14 16:45:01 · 121 阅读 · 0 评论 -
VUE中vue-router的安装与使用
一.vue-router 安装vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。我们可以访问其官方网站对其进行学习: Vue Router1.安装vue-routernpm install vue-router --save2.在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)第一步:导入路由对象,并且调用 Vue.use(VueRouter)第二步:创建路由实例,并且传入路由映射配..原创 2022-02-12 18:28:32 · 2362 阅读 · 0 评论 -
vue-cli 超详细教程
一.什么是Vue-cli?CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架. Vue CLI是一个官方发布 vue.js 项目脚手架 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置二.Vue-cli 的使用前提node环境webpack三.vue-cli的使用1.安装npm install @vue/cli -g注意:上面安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目原创 2022-01-27 15:32:38 · 1505 阅读 · 0 评论 -
VUE中的模块化和Node.js中的模块化的区别
一.VUE中的模块化1.导出 export 和 expore default// aaa.jslet name = '小明'function sum(num1, num2) { return num1 + num2}// 1.导出方式一:export { flag, sum}// 2.导出方式二:export let num1 = 1000// 3.导出函数/类export function mul(num1, num2) { return num1 *原创 2022-01-21 16:29:49 · 265 阅读 · 0 评论 -
VUE中插槽slot的基本用法,具名插槽,插槽作用域
1.插槽的基本使用//父组件<div id="app"> <cpn></cpn> <cpn><span>哈哈哈</span></cpn> </div>//子组件<template id="cpn"> <div> <h2>我是组件</h2> <p>我是组件, 哈哈哈</p>//插槽内部的内容为插槽默认原创 2022-01-20 18:33:35 · 1220 阅读 · 0 评论 -
VUE-为什么组件中的data必须是函数?
1.为什么data在组件中必须是一个函数呢?组件中的data是一个函数,每次组件调用的时候,会调用组件中data对应的函数,生成一个新的对象,这样同一个组件多次调用每次调用都会生成一个新的对象,不同对象之间数据是独立的互不影响。上图中,组件中的data是抽象好的一个数据,多次调用组件,每次调用都使用的是同一个对象,会互相影响Vue让每个组件对象都返回一个新的对象,因为如果是同一个对象的,组件在多次使用后会相互影响。2.组件data中的函数不能返回已经抽象过的对象 cons原创 2022-01-19 18:29:39 · 346 阅读 · 0 评论 -
Vue-组件详解(基础用法,全局组件,局部组件,父子组件传递数据)
VUE组件详解一.基础用法注意:组件必须在vue实例中使用以上这种写法在Vue2.x的文档中几乎已经看不到了,下面是创建组件语法糖:主要是省去了调用Vue.extend()的步骤,而是可以直接使用一个对象来代替。模板的分离写法:将组件中的HTML分离出来写,然后挂载到对应的组件上,结构会变得非常清晰。 Vue提供了两种方案来定义HTML模块内容:使用<script>标签和使用<template>标签二.全局组件和局部组件全局原创 2022-01-19 17:53:58 · 613 阅读 · 0 评论 -
Vue-v-model 修饰符 lazy number trim
v-model 修饰符1.lazy默认情况下,v-model默认是在input事件中同步输入框的数据的。也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变。 lazy修饰符可以让数据在失去焦点或者回车时才会更新2.number默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。 number修饰符可以让在输入框中输入的内容自动转成数字类型3.trim如果输入的内容首尾有很多空格,通常我们希望将其去除 trim修饰符可以过滤内容左右两边.原创 2022-01-19 16:48:08 · 341 阅读 · 0 评论 -
Vue-数组中的响应式方法-push pop shift unshift splice sort resourse
一、vue中数组中的响应式的方法push pop shift unshift splice sort resourse1.push() 数组尾添加一个元素letters: ['a', 'b', 'c', 'd']this.letters.push('aaa')this.letters.push('aaaa', 'bbbb', 'cccc')letters:['a', 'b', 'c', 'd','aaaa','bbbb','cccc']2.pop() 删除数组中的最后一个元素原创 2022-01-18 18:36:23 · 2867 阅读 · 1 评论 -
Vue-虚拟DOM相关(未)
1.虚拟DOM是什么2.优先服用已使用过的元素的问题3.v-for中绑定key:(对对应数组进行增删操作的时候)给每个节点做标识,diff算法可以正确识别该标识,插入到正确的位置,可以更高效的更新虚拟DOM...原创 2022-01-18 17:53:15 · 46 阅读 · 0 评论 -
Vue-v-if和v-show的区别
1.v-if当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中2.v-show当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none开发中如何选择?当元素在显示与隐藏之间切换频繁的时候,用v-show当只切换一次的时候,用v-if...原创 2022-01-18 17:48:28 · 177 阅读 · 0 评论 -
Vue-事件绑定v-on的修饰符
1.stop修饰符阻止事件冒泡:点击 按钮只会触发btnClick ,不会触发divClick<div @click="divClick"> <button @click.stop="btnClick">按钮</button></div>2.prevent修饰符阻止默认事件:点击提交的时候,只会触发submitClick,不会触发默认事件<form action="baidu"> <input typ原创 2022-01-18 16:24:08 · 224 阅读 · 0 评论 -
VUE - 计算属性computed的用法详解
一.基本用法当需要对数据进行某些加工的时候推荐用计算属性:<div id="app"> <h2>{{fullName}}</h2></div><script> const app = new Vue({ el: '#app', data: { firstName: 'Lebron', lastName: 'James' }, // computed: 计算属性()原创 2022-01-17 17:07:56 · 1497 阅读 · 0 评论 -
VUE - v-bind 动态绑定class和style
一.动态绑定class1.对象语法可以绑定到一个对象,方法或者计算属性中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; } </style></head><原创 2022-01-17 15:32:00 · 59 阅读 · 0 评论 -
VUE生命周期
VUE生命周期原创 2022-01-17 10:42:44 · 52 阅读 · 0 评论 -
vue学习笔记-MVVM模式
M-modelV-viewvm:viewModule1.数据绑定:将modle中用js定义的数据绑定到vue中,解析model中的数据,绑定到真实的DOM中,并且是响应式的,当modle中的数据发生改变,2.DOM事件监听原创 2022-01-16 18:58:18 · 102 阅读 · 0 评论 -
vue父子组件之间双向数据绑定的三种方式(vue2/vue3)
在做项目的过程中,经常遇到父子组件通信的问题,现在对3种通信方式总结一下:一、prop向下传递,emit向上传递初始版本父组件通过prop将数据传递给子组件,子组件通过emit事件将子组件数据传递给父组件//父组件<template> <div> <child :value='value' @getChildData='getChildData'></child> 来自子组件的数据:<.原创 2021-11-12 18:05:52 · 18969 阅读 · 4 评论 -
VUE-vue-router,路由跳转传递参数,params和query传递参数的区别
vue-router传递参数主要有两种方式:1.params:配置路由格式:/details/:id 传递的方式:在path后面拼接上对应的值,'/details/'+id 传递后在浏览器上形成的路径:/details/123声明式导航普通跳转<router-link to='/details'></router-link>跳转时传递参数<router-link :to='{path:'/details',params:{}}'><原创 2021-09-08 11:19:55 · 498 阅读 · 0 评论 -
VUE vuex、localStorage和sessionStorage的区别
一、vuexvuex是vue中的状态管理机制,用于组件之间共享数据,数据保存在内存中一个组件的数据变化会映射到使用这个数据的其他组件。再说localstorage刷新页面的话,之前存在vuex里的数据会被初始化掉,vuex里面的数据会丢失掉。二、localStoragelocalstorage(本地存储)则以文件的方式存储在本地,永久保存localStorage会持久化存储,而且在多页面可以共享 localStorage无法和Vue很好的结合,修改之后不会触发View的响应式变化原创 2021-08-16 18:13:35 · 730 阅读 · 0 评论 -
VUE2,VUE3中Vuex的使用详解
文章目录 一、Vuex是什么 二、State 数据源 2.1 通过 this.$store.state.全局数据名称 访问 2.2 mapState 映射为计算属性 三、Mutations 变更store中的数据 3.1 this.$store.commit() 触发 mutations 3.1.1 触发 mutations 时传递值 3.2 MapMutations 映射为方法 四、Actions 专门处理异步操作 .转载 2021-08-16 16:50:08 · 1657 阅读 · 0 评论