编程小透明的博客

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

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

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

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

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

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

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

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

项目实战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结构包裹。具名插槽...

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

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

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

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

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