ycflymoon-CSDN博客

原创 CSS3基础

1.1 CSS基本用法1.1.1 CSS样式样式是CSS最小的结构单元，每个样式包含两部分内容：选择器和声明(规则)。选择器：匹配样式将作用于页面中哪些对象，这些对象可以是某个标签、指定Class或ID值的对象等。浏览器在解析这个样式时，根据选择器来渲染对象的显示效果。声明：声明可以是一个或者多个，浏览器将根据声明来渲染选择器指定的对象。声明必须包括两部分：属性和属性值，以分号标识...

2019-04-11 18:39:51 200

原创 HTML5学习—HTML5基础

HTML5文档基本结构HTML5文档省略了<html>、<head>、<body>等元素，使用HTML5的DOCTYPE声明文档类型，简化<meta>元素的charset属性值，省略<p>元素的结束标记，使用<元素/>的方式来结束<meta>元素，以及<br>元素等语法知识要点。例如：<...

2019-03-21 19:09:37 588

原创 Vue.js实战揭秘—路由

1.1 路由的模式传统意义上，路由是由多个URL或者URL规则组成的，对服务端而言，网页的访问是无状态的，称之为服务端路由。而浏览器的History API则给予了一种实现可状态化页面的可能，因为页面的跳转（URL的改变）并不会出现页面刷新，这样一来状态就被维护在浏览器的History的内部状态储存之中。vue-router有三种模式，history模式，hash模式，以及abstract...

2019-02-28 17:35:43 274

原创 Vue.js学习—单文件组件

1.1 关注点分离关注点分离（Separation of concerns，SOC）是对只与“特定概念、目标”(关注点)相关联的软件组成部分进行“标识、封装和操纵”的能力，即标识、封装和操纵关注点的能力。是处理复杂性的一个原则。由于关注点混杂在一起会导致复杂性大大增加，所以能够把不同的关注点分离开来，分别处理就是处理复杂性的一个原则，一种方法。关注点分离是面向对象的程序设计的核心概念。分离...

2019-02-21 17:11:28 1123

原创 Vue.js实战—iView经典组件剖析

iView是一套基于Vue.js2的开源UI组件库，主要服务于PC界面的中后台产品。它是深度封装40多个常用业务组件同时也是一整套前端解决方案，包括设计规范、基础样式、支持服务器渲染（SSR），同时也提供了可视化脚手架方便快捷构建项目。iView以高质量、细致漂亮的UI、事无巨细的文档等特点成为Vue.js组件库中最受欢迎的项目之一。1.1 级联选择组件Cascader级联选择是网页应用中...

2019-02-14 18:25:42 943

原创 Vue.js实战—插件

Vue.js提供了插件机制，可以在全局添加一些功能。它们可以简单到几个方法、属性，也可以很复杂，比如一整套组件库。注册插件需要一个公开的方法install，它的第一个参数是Vue构造器，第二个参数是一个可选的对象。例如： MyPlugin.install = function (Vue, options) { //全局注册组件（指令等功能资源类似） ...

2019-02-02 15:55:48 496

原创 Vue.js实战—使用webpack

1.1 前端工程化与webpack通常，前端自动化（半自动化）工程主要解决以下问题：· JavaScript、CSS代码的合并和压缩。· CSS预处理：Less、Sass、Stylus的编译。· 生成雪碧图（CSS Sprite）。· ES6转ES5.· 模块化。前端工程化工具webpack打包后的代码已经不只是你写的代码，其中夹杂了很多webpack自身的模块处理代码...

2019-01-31 10:29:58 305

原创 Vue.js实战—Render函数

1.1 什么是Virtual DomVirtual Dom并不是真正意义上的DOM，而是一个轻量级的JavaScript对象，在状态发生变化时，Virtual Dom会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。与DOM操作相比，Virtual Dom是基于JavaScript计算的，所以开销会小很多。在Vue.js 2中，Virtual Dom就是通过一种VNode...

2019-01-24 17:14:34 817

原创 Vue.js实战—自定义指令

基本用法自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册一个v-focus的指令，用于在<input>、<textarea>元素初始化时自动获得焦点，两种写法分别是： //全局注册 Vue.directive('focus',{ //指令选项 }); //局部注册 var app = new...

2019-01-17 17:01:53 286

原创 Vue.js实战—组件详解

1.1 组件与复用1.1.1 为什么使用组件Vue.js的组件就是提高重用性，让代码可已复用。1.1.2 组件的用法<div id="app"> <my-compoment></my-compoment></div><script> var Child = { template: '&..

2019-01-10 22:25:11 279

原创 Vue.js实战—表单与v-model

1.1 基本用法表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面的例子：<div id="app"> <input type="text" v-model="message...

2019-01-03 15:14:17 244

原创 Vue.js实战——内置指令

基本指令1.1 v-cloakv-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none；配合使用：&lt;div id="app" v-cloak&gt; {{message}}&lt;/div&gt;&lt;script&gt; var app = new Vue({ el: '#app'

2018-12-28 09:46:07 206

原创 Vue.js实战学习—v-bind及class与style绑定

Vue.js实战学习—v-bind及class与style绑定4.1、v-bind指令主要用于动态绑定更新HTML元素上的属性。4.2绑定class的几种方式4.2.1 对象语法给v-bind:class设置一个对象，可以动态地切换class，例如：<div id="app"> <div :class="{'active':isActive}"><...

2018-12-20 10:24:06 186

原创 Vue.js实战学习—计算属性

Vue.js实战学习—计算属性3.1 什么是计算属性在模板中双向绑定一些数据或表达式时，如果表达式过长，或逻辑更为复杂时，就会变得臃肿甚至难以阅读和维护，比如：<div> {{text.split(',').reverse().join(',')}}</div>上例可以用计算属性进行改写：<div id="app"> {{rever...

2018-12-13 18:24:53 177

原创初识Vue.js

初识Vue.js1、什么是Vue.js简单小巧的核心，渐进式的技术栈，足以应付任何规模的应用。2、生命周期created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。3、过滤器Vue.js支持在{{ }}插值的尾部添加一个管道符“|”对数据进行过滤，经常用于格式化文本，...

2018-12-06 10:07:09 235 3

u011229269的博客