文章目录 1.el与data的两种写法 1.1.基础知识 1.2.代码实例 1.3.页面效果 2.MVVM模型 2.1. 基础知识 2.2 .代码实例 2.3.页面效果 3.数据代理 3.1. 基础知识 3.2. 回顾Object.defineProperty方法 3.2.1. 代码实例 3.2.2. 测试结果 3.3. 何为数据代理 3.3.1 .代码实例 3.3.2.测试结果 3.4.Vue中的数据代理 3.4.1.代码实例 3.4.2.测试结果 1.el与data的两种写法 1.1.基础知…
源码地址:     https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config 配置目录,包括端口号默认配置. node_modules npm 加载的项目依赖模块 src 我们的开发目录,基本上绝大多数工作都是在这里开展的 assets: 放置一些图片,如logo等. components: 目录里面放了一个组件文件,可以不用. App.vue: 项目入口文件,我们也可以直…
什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量到页面一块内容到整个页面,最终大到整个项目,东可以用vue框架来实现 vue可以干哪些事 将数据渲染到指定区域(数据可以是后台获取,也可以由前台自己产生) 可以与页面完成基于数据的交互方式 为什么学习Vue 1.整合了Angular React框架的优点(第一手API文档是中文的) 2.单页面应用(…
一.基本理解 首次接触"生命周期"这个名词,是比较晦涩的,Vue中又有生命周期钩子,而Blazor则是虚方法重写,容易蒙.所以,我尝试从初学者的角度来阐述一下. 1.我们在基础部分已经知道,组件有两部分组成,一是逻辑层,有数据和方法(方法本质上也是数据):二是视图层,虽然有自定义组件,但拆到底,还是HTML原生标签. 2.组件的初次呈现,可以先简单的理解为两个过程,第一步,完成逻辑层的实例化,类似于一个类的实例化,为视图层准备数据:第二步,完成视图层DOM的渲染,会使用到逻辑层的数据.…
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图: 3.查看版本,如下图: 4.在成功安装node.js(即能够成功查看版本如上图)的前提下,再安装淘宝npm(http://npm.taobao.org/),命令如下: npm install -g cnpm --registry=https://registry.npm.taobao.org 执…
在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x  实例的生命周期图示: Vue.js 1.x 的生命周期钩子 1. init  在实例开始初始化时同步调用.此时数据观测.事件和Watcher都尚未初始化. 2. created 在实例化创建之后同步调用.此时实例已经结束解析选项,已建立:数据绑定.计算属性.方法.Watcher/事件回调,但是还没有开始DOM编译,$el还不存在. 3.…
前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发中子组件的异步加载和其生命周期进行一些探讨.阅读本文需要对 Vue.js 有一定的了解. 注意:本文中的一些例子代码,是以 vue-cli 采用 webpack 模板初始化的项目为基础. 异步组件 讨论异步加载,需要先了解下异步组件.Vue.js 的异步组件是把组件定义为一个工厂函数,在组件需要渲染…
生命周期的理解 beforeCreate 创建前 数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象 没有数据也没有方法 created 在创建后 数据和方法已经 data数据已经绑定好了 数据已经绑定到了对象实例,但是还没有挂载对象 el模板 然后判断是否有el 没有就结束周期 如果有el 就继续编译模板 beforeMount 已经编译好了模板  根据数据和模板生成一个对象 Mount 将$el的内容挂载在el上  生成真正的dom页面 现在我们就可以获取数据和操作dom befo…
参看:视频地址 简单搭建一个react-cli: 2. React.createElement() 将object转化为 React语法 import React from 'react' import ReactDOM from 'react-dom' /** * React.createElement() * 参数1: 标签名 * 参数2: 标签属性 * 参数3: 标签内容 * 参数4: 其他节点 */ // 需要 babel loader 解析jsx语法 const myH1 = <div…