在过去十年,我们网页变得更加动态化强大了,多亏了JavaScript,我们已经把很多传统服务端代码放到了浏览器中。这样就产生了成千上万行JavaScript代码,它们连接了各式各样HTMLCSS文件,但缺乏正规组织形式,于是各种JavaScript框架——Angular.js、Vue.js、React.js应运而生。   VUE是一款友好、多用途且高性能JavaSc
转载 4月前
20阅读
vuetemplatereactjsx有什么区别呢,来整理下。1:追求理念不一样react认为现在浏览器追求jscsshtml这三种文件分工协作方式效率低下,他认为jscsshtml应该是一个整体,而不是像现在这样分这么清楚,协作时候造成了很多麻烦,所以他们推荐一个组件所有代码都写在一个jsx当中,这样更有利于组件化开发。jsx本身也是js一种扩展,可以完全写js没问题,基本上一个
原创 2019-07-26 14:37:41
2878阅读
大多数 Vue 开发者都习惯使用 template 模板语法,因为 template 模板语法 具有如下优点:熟悉类 HTML 结构模板语法可以像 HTML 一样进行布局设计,上手快、学习成本比低更简洁写法例如,可以在模板中使用各种 修饰符 来达到简化编写代码过程结构与逻辑分离元素结构逻辑并没有杂糅在一起,因此结构上更
原创 精选 5月前
230阅读
什么是JSX? JSX就是JavascriptXML结合一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析. 我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因为近期在学习react,在里面体验了
转载 2019-08-08 11:18:00
644阅读
2评论
key 特殊 attribute 主要用在 Vue 虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue使用一种最大限度减少动态元素并且尽可能尝试就地修改/复用相同类型元素算法。而使用 key 时,它会基于 key 变化重新排列元素顺序,并且会移除 key 不存在元素。有相同父元素子元素必须有独特 key。重复 key 会造成渲染错误。
转载 1月前
41阅读
JSX 是一种 Javascript 语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 这个特性,所以它既具备了 Javascript 灵活性,同时又兼具 html 语义化直观性。
推荐 原创 2021-10-14 10:32:54
3080阅读
1点赞
1评论
局部组件使用:如果实例化对象Vue对象中既有el,又有 template,并且 template 中定义了模板内容,那么 template 模板优先级大于el 。示例代码:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v
vue项目中使用jsx语法1、官方文档传送门2、github上插件传送门一、环境搭建步骤1、使用vue-cli构建一个项目2、安装依赖包yarn add babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env...
原创 2021-06-15 16:04:31
776阅读
在接触 React 时候,我只了解到通过 babel 可以把 JSX 转成 VNode(通过调用 React.createElement 方法),但是对其具体是如何转换却不了解。很明显,回答失败。通过 github 上搜索 template+vnode 关键词,让我搜到了htm库,发现简直就是我想要。让我们看下用法:const htm = require("htm"); function h
        Vue 使用一种基于 HTML 模板语法,使我们能够声明式地将其组件实例数据绑定到呈现 DOM 上。所有的 Vue 模板都是语法层面合法 HTML,可以被符合规范浏览器 HTML 解析器解析。        在底
转载 1月前
34阅读
JSX 是什么JSX 是一种 Javascript 语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 这个特性,所以他即具备了 Javascript 灵活性,同时又兼具 html 语义化直观性为什么要在 Vue 中使用 JSX有时候,我们使用渲染函数(render function)来抽象组件,渲染函数不是很清楚参见官方文
JSX 是什么JSX 是一种 Javascript 语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 这个特性,所以他即具备了 Javascript 灵活性,同时又兼具 html 语义化直观性为什么要在 Vue 中使用 JSX有时候,我们使用渲染函数(render function)来抽象组件,渲染函数不是很清楚参见官方文
转载 2023-08-10 09:38:38
259阅读
1、 什么是CSS预处理器CSS 预处理器用一种专门编程语言,进行 Web 页面样式设计,然后再编译成正常 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程特性,无需考虑浏览器兼容性问题。CSS预处理语言有SCSS (SASS) LESS等等,总之都是用来实现样式。2、lang因此lang属性可选:scss(sass)、less等等即:<style lang
转载 3月前
170阅读
vue.js 具有简单 API 几个选项,可用于在我们组件中定义html模板。 我们可以使用<template>标签选项,在根组件实例上定义template属性,或者使用单文件组件。 上面的选项很棒并且可以完美地工作,但是,在您应用程序生命周期中,有时会感到笨拙,设计过度或非常不灵活。 那
转载 2020-10-17 14:41:00
83阅读
2评论
Vue 进阶系列
转载 2021-07-26 10:22:31
1119阅读
1安装在使用jsx之前我们需要安装一个babel插件(babel-plugin-transform-vue-jsx )安装方式:然后在.babelrc里面添加:2在vue里面编写jsx接着我们就可以愉快地在vue里面编写jsx了。Test.vue可以看到我们把jsx写在了render方法里面,render方法是vue2.0才支持,用来提供对虚拟DOM支持,也就是说只有vue2.0才支持jsx
转载 2023-08-17 17:56:03
232阅读
Vue组件另一个重要概念是插槽,它允许你以一种不同于严格父子关系方式组合组件。插槽为你提供了一个将内容放置到新位置或使组件更通用出口。这一节将围绕官网对插槽内容介绍思路,按照普通插槽,具名插槽,再到作用域插槽思路,逐步深入内在实现原理,有对插槽使用不熟悉,可以先参考官网对插槽介绍。10.1普通插槽插槽将<slot></slot>作为子组件承载分发载体,简
原创 2019-09-23 16:02:57
1151阅读
JSX语法如何在vue中使用 1、什么是JSX? JSX就是JavascriptXML结合一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到 { 就当JavaScript解析。vue中大部分场景是不需要用render函数,还是用模板更简洁 ...
转载 2021-08-20 14:13:00
596阅读
2评论
JSX语法如何在vue中使用 1、什么是JSX? JSX就是JavascriptXML结合一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到 { 就当JavaScript解析。vue中大部分场景是不需要用render函数,还是用模板更简洁 ...
转载 2021-08-20 14:13:00
1729阅读
2评论
Vue 中构建虚拟DOM可以直接使用渲染函数构建虚拟Dom,正常情况下用render函数参数createElement方法构建虚拟Dom语法比较繁琐,更方便是用更接近于模板JSX语法。Vue实例与组件入门 我vue脚手架是vue cli4,如果在新建项目时安装了babel,则自动安装了编译JSX需要babel插件babel.config.jsmodule.exports = { p
  • 1
  • 2
  • 3
  • 4
  • 5