前言在之前的篇章中咱们一起搭建了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阅读
上篇文章我们知道了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
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
组件的创建和patch过程 组件化组件化是vue的另一个核心思想,所谓的组件化,就是说把页面拆分成多个组件(component),每个组件依赖的css、js、图片等资源放在一起开发和维护。组件是资源独立的,在内部系统中是可以多次复用的,组间之间也是可以互相嵌套的。 接下来我们用vue-cli为例,来分析一下Vue组件是如何工作的,还是它的创建及其工作原理
转载 2024-06-28 21:44:38
315阅读
前言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阅读
<!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评论
vue入门下载安装node环境安装网址:https://nodejs.org/en/检查安装,输出版本号则安装成功 为了提高效率,可以使用淘宝镜像npm install -g cnpm -registry=https://registry.npm.taobao.org,输入即可安装npm 镜像 ,以后用到npm的地方就可以用cnpm来代替,搭建vue项目环境全局安装vue-clinpm
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阅读
好家伙,来补基础啦,补JS的基础 先来一些概念性的东西 1.什么是JavaScript? javaScript的简写形式就是JS,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能(其编写的程序可以被嵌入到HTML或XML页面中,并直接在浏览器中解释执行)。  组成部分:       核心(ECMAScri
转载 2023-11-12 11:22:03
66阅读
document.createElement()用法及注意事项 2008-11-25 20:24 document.createElement 用法及注意事项 2008-09-02 14:20 document.createElement()用法及注意事项 今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,
  • 1
  • 2
  • 3
  • 4
  • 5