随笔分类 - 前端框架
摘要:使用ReactDOM.render()重复渲染 function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); R
阅读全文
摘要:单元素/组件的过渡 提供了 transition 的封装组件,用于下列场景 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 过渡的类名: v-enter :定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除 .fade-enter { o
阅读全文
摘要:数据相关API Vue.set 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新 使用方法: Vue.set(target, propertyName/index, value) <div id="app"> <p v-for="(item, index) in items
阅读全文
摘要:插槽内容 简单的插槽:slot标签内会渲染出"插槽内容" <div id="app"> <p>{{message}}</p> <item-list :items='items'> 插槽内容 </item-list> </div> <script> Vue.component('item-list',
阅读全文
摘要:自定义事件 事件名字 组件上使用camelCase 名字的事件无法被kebab-case监听 this.$emit('myEvent'); <!-- 没有效果 --> <my-component v-on:my-event="doSomething"></my-componet> 始终使用 keba
阅读全文
摘要:模板里使用表达式 模板语法里使用表达式进行一些操作 <div id="app"> {{ message.split('').reverse().join('')}} </div> <script> const app = new Vue({ el:'#app', data() { return {
阅读全文
摘要:绑定class 对象语法:对象内联定义在模板里 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> <script> data: { isActive: true, hasE
阅读全文
摘要:react组件 概念 类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素 官方详细组件 API 组件的分类 无状态的函数式组件 import React from 'react'; import ReactDOM from 'r
阅读全文
摘要:元素是构成 React 应用的最小砖块:与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致 const element = <h1>Hello, world</h1>; 将一个元素渲染为 DOM 必须有一个根
阅读全文
摘要:React的JSX语法 概念 HTML语言直接写在JavaScript语言中,不加任何引号,这就是JSX语法。它允许HTML和JavaScript混写 const element = <h1>Hello, world!</h1>; 它是一个JavaScript的语法扩展。建议在 React 中配合使
阅读全文
摘要:初始化和安装依赖 建立项目文件夹 mkdir react-demo cd react-demo 在项目里执行命令:初始项目 npm init -y 安装相关依赖 # react是核心库 # react-dom是操作dom的库 # @label/standalone 是语法转换 npm install
阅读全文
摘要:一、介绍 ①React 是一个用于构建用户界面的 JAVASCRIPT 库。 ②React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。 ③React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。 ④React
阅读全文
摘要:一、自配的vue项目骨架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me
阅读全文
摘要:一、vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二、webpack加载第三方包 ①项目中,如果需要用到一些第三方包,比如vue.js,jQuery.js,bootstrap.js等等,如果使用一般的方法,直接
阅读全文
摘要:一、概念 ①常见的架构方式或者开发思想还有MVC、MVP和MVVM,参考文章:MVC,MVP 和 MVVM 的图示 ②MVC:视图(View),指用户界面;控制器(Controller),指业务逻辑;模型(Model),指数据保存 ③MVP:将 Controller 改名为 Presenter,同时
阅读全文
摘要:一、概述 ①Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得很简单 ②参考文档:Vue Router 二、使用 ①安装下载和引入 <script src="node_modules/vue/dist/vue.js"></script>
阅读全文
摘要:一、vue生命周期示意图 二、生命周期钩子 <div id="app"> <h1>{{message}}</h1> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', da
阅读全文
摘要:一、概况 ①vuejs中没有内置任何ajax请求方法 ②在vue1.0版本,使用的插件 vue resource 来发送请求,支持promise ③在vue2.0版本,使用社区的一个第三方库 axios ,也支持promise ④在HTML5时代,浏览器增加了一个特殊的异步请求方法 fetch,原生
阅读全文
摘要:一、概念 ①组件就是对局部视图的封装,组件思想就是把一个很大的复杂的 Web 页面视图给拆分成一块一块的组件视图,然后利用某种特定的方式把它们组织到一起完成完整的 Web 应用构建。 ②目前主流的前端框架angular,react、vue都是组件化开发思想,vue中的组件思想借鉴于react ③利用
阅读全文
摘要:一、内置指令 ①v-text:和 {{}} 一样,唯一的区别是,{{}} 会造成闪烁问题,而 v-text 不会有闪烁问题 <div id="app"> <h1 v-text='message'></h1> <h1 v-text='message'></h1> <h1 v-text='message
阅读全文