编程小透明的博客

laydate：Layui框架下的日期组件Bootstrap Table：基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。使用文档：laydate官方文档Bootstrap Table中文文档项目中出现了新需求，模块搜索条件中的日期条件需要进行默认设置，在每次请求当前模块页面时...

Home：首页根组件，用于管理子组件以及数据请求<template>：子组件管理引入所有子组件，并进行属性绑定(父组件向子组件传递数据的方式) <template> <div> <home-header :city=&quo

icons<template><script>采用vue-devtools浏览器工具插件查看此部分计算属性详情：Recommend<template><script>：通过props获

2.城市列表页开发功能点概述页面路由跳转(Home -> City): 点击首页城市选择按钮，即可跳转至城市列表页。用户可以在搜索栏中可输入信息进行城市信息的检索，检索结果以列表形式展现，选定城市后会进行首页的路由跳转。用户可以在热门城市、字母城市列表中选择城市信息，选定城市后会进行首页的路由跳转。用户可以在城市列表页右侧的字母导航条中进行点击具体字母项进行准确的城市信...

Header：城市信息选择标题展示在此组件中，主要做了向Home组件的页面路由跳转<template>：需要注意的是被<router-link>包裹的标签会使原标签样式无效，类似<a>。解决方案上篇文章已经给出：https://blog.youkuaiyun.com/Nerver_77/article/details/83586432 <template...

Search：城市选择信息输入检索 (增量式)功能点2：用户可以在搜索栏中可输入信息进行城市信息的检索，检索结果以列表形式展现，选定城市后会进行首页的路由跳转。功能点2分析：用户故事角度 作为用户，我想在搜索栏中输入信息后会有结果信息以列表形式展现，并且列表内的内容选择后可以进行页面的跳转，依次来实现城市信息的变更。具体实现：组件data初始化： name: 'CityS...

Alphabet：字母表导航条 (增量式)组件data初始化： name: 'CityAlphabet', props: { cities: Object }, data() { return { touchStatus: false, startY: 0, timer: null } },父组件通过属...

3. 景点详情页开发功能点概述用户首页点击热销推荐景点，即可跳转景点详情页面。详情页面包括三部分内容：顶部图片展示、景点门票详情、隐藏页面头。(拖动至下方会出现)用户点击顶部图片展示，进入图片轮播区域(全屏)，可左右滑动进行图片浏览，点击图片区域外进行返回景点详情页，过渡动画的使用，图片轮播区域配置首页返回按钮。用户向下拖动景点详情页，即可看见隐藏页面头部，同时具备返回按钮，可以...

Header：隐藏页面头(动态Style)写在开头，Header组件主要包括两个细节点：1. Banner、Header点击返回按钮路由跳转2. 当用户拖动该部分向下移动时，隐藏页面头的渐变展示细节1：返回按钮均属于Header组件细节2：该部分向下进行拖动时，隐藏表头渐变显示，采用ShowAbs进行内容展示控制，采用钩子函数以及全局变量window进行实现data数据初始化：...

项目实战1. 首页开发环境搭建开发环境：node.js、Vue-cli脚手架工具开发IDE：VScode版本控制工具：Git关于Vue-cli： Vue提供的官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟可创建并启动一个带热加载、保存时静态检查以及可用于生产环境的构件配置的项目： # 全局安装 vue-cli ...

8.动画特效CSS过渡动画原理在Vue底层中，通过**<transaction>标签包裹的内部元素会进行自动构建动画流程。即：Vue是通过更换元素上的class**来进行过渡动画效果的呈现的。下图是CSS过渡动画(入场动画)的执行流程，离场动画同理。在过渡动画流程中可以看出：被<transaction>包裹的内部元素会在该流程中进行class的添加和去除。

7.插槽插槽slot父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就要用到插槽slot了。换句话说：当子组件所渲染的内容部分来自于父组件DOM的时候，建议使用插槽slot进行DOM结构的插入。详情见下图：TIPS：子组件中采用<template>模板占位符无效，务必使用<div>进行DOM结构包裹。具名插槽...

BootStrapTable的动态表格在我们构建BootStrapTable(下文中均称：BsTable)，其中columns参数作为表格列的内容存储，我们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。columns参数格式：类似下文columns: { { field: 'Id', title: '编号', ...

TableExport数据导出插件的使用要想实现表格数据的导出，我们可以使用bootstrap的扩展插件Table Export来实现我们的需求。 即：bootstrap-table-export.js由于数据导出功能是BootStrapTable的功能的扩展，而且插件依赖于tableExport.jquery.plugin中的tableExport.js。关于tableExport...

Vue入门    MVVM框架：观察者双向绑定        model - viewModel - view        Js对象    观察者     DOM    Vue.js        轻量级MVVM框架        数据驱动 + 组件化前端开发    核心思想：        数据驱动：DOM是数据的一种自然映射        组件化：拓展HTML元素，封装可...

JQuery通过ajax实现select动态加载option<script type="text/javascript">//jquery采用ajax对select动态加载option$('#productId').change(function () { //清空select框中数据 $('#accountId').empty(); $.ajax({ ...

一、Vue实例生命周期1.Vue实例声明周期钩子函数(根据官方文档列举常用的八个钩子函数)beforeCreate：在实例初始化之后，数据观测和event/watcher事件配置之前被调用。created：在实例创建完成后立即被调用。挂载阶段还没开始，$el属性目前不可见。beforeMount：在挂载之前被调用：相关render函数首次被调用、mounted：el被新创建的vm.$e...

###二、Vue基础语法1.模板语法：Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。插值 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 e.g：<span>Message...

4.条件渲染：根据条件进行元素展示v-if：v-if、v-else-if(2.1.0新增)、v-else三大指令必须紧贴使用，否则指令将不被识别。指令举例 <!-- 切换时DOM元素被移除 , v-if、v-else-if和v-for指令紧贴使用--> <div v-if="show === 'a'"> This is A &a

6.组件 - 计数器Demo为例组件使用细节全局组件 and 局部组件全局组件： // 全局组件(子组件) Vue.component('row', { template: '<tr><td>{{ content }}</td></tr>',

关于标题，想不出什么好的叙述方式，在使用图表ECharts这个JS库的时候，相信很多时候都需要对数据动态处理后，加载到图表中。这个时候，通用的方式就是基于ECharts的setOption(Object, true)方法了。最近在用vue-cli脚手架工具想构建一个多种图表的展示页，主要的功能上就是发送数据请求，接收数据，渲染图表。官网关于ECharts的案例都是基于原生语法，首要工作就是将原生的...