前言在之前篇章中咱们一起搭建了vue开发环境,接下来开始创建第一个vue+element项目吧(vue:前端JavaScript框架 element:前端UI框架)vue开发环境搭建请参考【vue】在windows中搭建vue开发环境(全网最详细)创建vue项目一、开发工具vs code1、创建一个存放项目的文件目录,如:C:\Project\VUE2、在文件目录空白处,右键点击“通过code打
转载 2024-07-23 11:31:57
35阅读
摘要        简单来说插槽就是一个占位标签,当父组件传递进来内容后就会把这个占位标签替换掉。插槽是由于有时组件要求不一样,为了组件更多扩展性而进行一种功能。        插槽主要分为三种:普通插槽(匿名插槽)、具名插槽和作用域插槽。今天主要记录普通插槽和具名插槽;
一、创建组件创建组件方式: 1、全局创建 利用“Vue.extend”创建全局vue组件,语法为’Vue.component(‘组件名’,创建出来组件模板对象); 2、局部创建 利用template元素,定义组件HTML模板结构。第一个 全局创建: 在vue生效区间内都可以任意使用 但有点消耗资源,组件内部都可以封装对应功能,组件 相当于新增标签 直接在#app里用就行了 如下代码:&
方式一:使用Vue.extend来创建全局Vue组件1.1 使用Vue.extend来创建组件模板对象var com1 = Vue.extend({ template:'<h3>这是使用Vue.extend创建组件</h3>' //通过template属性,制定了组件要展示html结构 })1.2 使用 Vue.componen
转载 7月前
29阅读
组件创建和patch过程 组件化组件化是vue另一个核心思想,所谓组件化,就是说把页面拆分成多个组件(component),每个组件依赖css、js、图片等资源放在一起开发和维护。组件是资源独立,在内部系统中是可以多次复用,组间之间也是可以互相嵌套。 接下来我们用vue-cli为例,来分析一下Vue组件是如何工作,还是它创建及其工作原理
转载 2024-06-28 21:44:38
315阅读
上篇文章我们知道了vue通过实例调用_render函数 最终通过createElement方法创建 VNode 接下来我们来看看createElement怎么创建虚拟dom//src/core/vdom/create-element.js export function createElement (...省略){ ...对参数做一些处理省略 //normalizationType如果是用户
转载 2024-10-09 21:28:41
115阅读
1.Vue使用1.创建vue文件夹安装vue: npm install -g @vue/cli1.创建一个vue基础文件指令: vue create student-system 然后选择vue2或者vue3或者根据自己选择更多配置2.进入文件夹:cd student-system3.npm run serve2.使用elementUI4.安装饿了么ui: npm i element-ui -S
vue入门下载安装node环境安装网址:https://nodejs.org/en/检查安装,输出版本号则安装成功 为了提高效率,可以使用淘宝镜像npm install -g cnpm -registry=https://registry.npm.taobao.org,输入即可安装npm 镜像 ,以后用到npm地方就可以用cnpm来代替,搭建vue项目环境全局安装vue-clinpm
DOM允许你创建自己元素和文本节点,并把它们添加大文档树中。理论上上说,你可以从树中移除所有的元素,创建新元素,或者重整文档树,从而完全改变页面。但是在实践中,这个特性用起来有些限制。DOM也允许你克隆现有的元素,已便你能方便地复制文档某一部分并在文档中分发副本。 51CTO推荐阅读:JavaScript DOM本质及操作方法 createE
转载 2024-06-05 05:36:45
66阅读
自定义指令除了核心功能默认内置指令,Vue 也允许注册自定义指令。自定义指令可以定义全局指令,也可以定义局部指令。使用 directives 选项来自定义指令。定义全局指令:<div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <input v-focus> </div> <s
前言vue绝大多数情况下都是使用<template>模板来创建HTML,但是也可以使用渲染函数render来生成HTMLrender函数作用 render函数其实就是用来代替<template>来生成html render函数通过返回一个 createElement()方法生成template模板,这个方法是render函数自带createElement参数传递给它
转载 2024-04-29 19:25:07
66阅读
重学Vue源码,根据黄轶大佬vue技术揭秘,逐个过一遍,巩固一下vue源码知识点,毕竟嚼碎了才是自己,所有文章都同步在 公众号(道道里前端栈) 和 github 上。 这个函数在初次挂载和之后更新都用到了,而 _render() 方法最终会调用 $option.rend…
原创 2022-04-28 16:09:58
141阅读
一、在动态组件上使用keep-alive:我们之前曾经在一个多标签界面中使用 is 特性来切换不同组件:<component v-bind:is="currentTabComponent"></component>当在这些组件之间切换时候,你有时会想保持这些组件状态,以避免反复重渲染导致性能问题。有时候重新创建动态组件行为是非常有用,但是在
转载 2024-03-23 12:06:14
203阅读
Vue项目中,大多数情况我们都可以通过模板来创建HTML, 有些场景需要使用JavaScript来动态创建HTML,这种情况我们可以使用render函数来实现,下面我们来看下详细使用方法。函数调用简写render: function (createElement) { return createElement(App) }按照ES6语法简写函数render (createElement) {
转载 2024-09-24 13:44:15
50阅读
这是vue生命图示一共有八个生命周期函数。new Vue()创建Vue实例 相当于以下代码var vm = new Vue({})之后就是init Event 和 LifeCycle 初始化事件和生命周期函数beforeCreate()首先字面意思在创建之前,那么Vue会发生什么呢?初始化data里面的数据初始化方法事件将data里面的数据交给观察者实例 (watch)此时若在代码中打印data
大家好,我是你们导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈)。上次老师跟大家分享了JS之正则表达式知识,今天跟大家分享下JS之 jsonp原理与实现知识。 1 JS之 jsonp原理与实现 1、概述 jsonp是一种跨域通信手段,它原理其实很简单: 首先是利用script标签src属性来实现跨域。通过将前
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var $meta = document.createElement('meta') $meta.se
转载 2015-09-18 15:54:00
178阅读
2评论
document.createElement()用法 下面,举例说明document.createElement()用法。<div id="board"></div> 例1: <script type="text/javascript"> var board = document.getElementByI
转载 2024-05-10 19:56:46
46阅读
原生js表单生成列表实现原理这里用到一些方法有insertBefore()createElement()appendChild()removeChild()and so on~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&
1:ReactElement说到ReactElement,不得不提到就是在React中,用来替代JavaScript(JS)语言,JSX。 JSX 作为React官方指定语法,JSX允许用户在JS代码中插入HTML代码。但是,这种写法浏览器是无法解析。他们需要一个转换器,Babel就充当了这样一个角色,他在JSX代码编译时候将其转换成JS文件,这样浏览器就能解析了。 怎么转换呢,我们知道,
转载 2024-07-31 15:59:25
50阅读
  • 1
  • 2
  • 3
  • 4
  • 5