08 2021 档案
摘要：一、过渡的简介 Vue在插入、更新或移除DOM的时候，提供多种不同方式的应用过渡效果。本质上还是使用CSS3动画：transition、animation。 二、基本用法 使用transition组件，将要执行动画的元素包含在该组件内。 <transition> </transition> 说明：t
阅读全文
摘要：一、需求 实现方块在屏幕上任意拖拽的功能。 二、代码实现 自定义指令drag，实现拖动功能。div绑定自定义指令v-drag，实现div的拖动功能。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <t
阅读全文
摘要：一、简介 vue可以自定义指令。自定义指令分为：全局指令和局部指令。 二、自定义指令 1、自定义全局指令 使用全局API中的Vue.directive 来实现自定义全局指令。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=
阅读全文
摘要：一、简介 vue实例方法（数据）包括3个：vm.$set()、vm.$watch()、vm.$delete()。 分类 vue实例方法名称 方法用户 备注说明 数据 vm.$set(object,key,value) 为对象object添加属性key，并指定属性值value vm.$delete(o
阅读全文
摘要：一、vue实例方法分类 vue实例方法可以分类：数据、事件、生命周期。 分类 vue实例方法名称 方法用户 备注说明 数据 vm.$set(object,key,value) 为对象object添加属性key，并指定属性值value vm.$delete(object,key) 删除对象的属性key
阅读全文
摘要：一、vue实例属性 vue实例的属性整理如下： 序号 vue实例名称 类型 详细 是否只读 备注 1 vm.$data Object Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。 2 vm.$props Object 当前组件接收到的 props 对
阅读全文
摘要：一、计算属性get和set 计算属性由两部分组成，get和set。默认只有get。get和set的功能说明如下： get：获取计算属性。 set：设置计算属性。 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=
阅读全文
摘要：一、计算属性和方法区别 将计算属性的get函数定义为方法，也可以实现类似的功能。不过计算属性和方法有本质的区别。计算属性和方法的区别： 计算属性是基于他的依赖进行更新的，只有在相关以来发生改变时才能更新变化 计算属性是有缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存存的计算结果，不
阅读全文
摘要：一、基本用法 计算属性也是用来是存储数据的，但是具有以下几个特点： 数据可以进行逻辑处理操作。 对计算属性中的数据进行监视。 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>
阅读全文
摘要：一、简介 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 二、钩子函数 vue实例生命周期中共包含8个钩子
阅读全文
摘要：一、需求分析 开发百度搜索功能。技术要求：使用vue-resource发送JSONP请求，实现跨域请求百度搜索列表的功能。 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>百
阅读全文
摘要：一、简介 vue本身不支持发送ajax请求，需要使用vue-resourse（vue1.0官方推荐使用）、axios（vue2.0官方推荐使用）等插件来支持发送ajax请求。 axios是一个基于Promise的请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resourse
阅读全文
摘要：获取指定github账户信息并显示 一、需求分析 需求分析：github和自己的项目不在一个域里面，需要跨域查询。 跨域常见有两种实现方式： 一是JSONP（客户端） 二是CORS（服务端） 跨域的实现原则： 如果某网站的服务端是允许跨域的，客户端直接请求即可。 如果某网站的服务端不允许跨域，则需要
阅读全文
摘要：一、简介 vue本身不支持发送ajax请求，需要使用vue-resourse（vue1.0官方推荐使用）、axios（vue2.0官方推荐使用）等插件来支持发送ajax请求。 axios是一个基于Promise的请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resourse
阅读全文
摘要：1、vue过滤器简介 vue过滤器就是用来过滤模型数据，在显示之前进行数据处理和筛选。 2、vue过滤器语法 语法：{{ data | filter1(参数) | filter2(参数) }} 3、vue内置过滤器 vue1.0中有很多过滤器，例如currency，uppercase，lowerca
阅读全文
摘要：1、vue模板简介 vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据。模板就是{{}}，用来数据绑定，显示在页面上，也称为Mustache语法。 2、数据绑定的方式 a.双向绑定 v-model b.单向绑定 方式1：使用两对大括号{{}}，页面上可能会出现闪烁的问题（可
阅读全文
摘要：1、属性绑定和属性的简写 v-bind 用于属性的绑定。写法：v-bind:属性=" " （简写为 :属性=" "）。 v-bind:src=" " 简写为 :src=" " 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=
阅读全文
摘要：1、快捷键ctrl+shift+p调出面板 2、输入package 3、在自动弹出的下拉选项中选择【list Packages】，就可以看到已安装的插件列表。
阅读全文
摘要：一、事件 1、事件的简写 v-on:click=“” 简写方式为： @click=“” 2、事件对象$event 包含事件相关的信息（事件源target、事件类型type、偏移量offset等） 3、事件冒泡 阻止事件冒泡，有两种方式： 1）原生js方式，依赖于事件对象。 1 <!DOCTYPE h
阅读全文
摘要：一、vue的使用案例 1、效果展示 2、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用户管理</title> 6 <!--引入vue--> 7 <script src="..
阅读全文
摘要：一、进入Key Buildings 打开【sublimeText】>【Perferences】>【Key Buildings】，进入Key Buildings面板。 二、设置打开浏览器 将谷歌浏览器和默认浏览器的打开快捷键分别设置为f2和f3。 [ //默认浏览器 { "keys": ["f3"],
阅读全文
摘要：一、sublime Text简介 Sublime Text 是一个文本编辑器（收费软件，可以无限期试用，但是会有激活提示弹窗），同时也是一个先进的代码编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。 Subli
阅读全文
摘要：一、安装jquery 由于bootstrap中js插件依赖于jquery，所以在这之前必须安装jquery。 1、在package.json中添加一行代码：“jquery”: “^2.2.3” 2、在build文件webpack.base.conf.js中添加代码： 头部插入代码： const we
阅读全文
摘要：一、谷歌浏览器安装vue-devtools 安装vue-devtools的目的：很简单，便于vue的调试。下载安装google浏览器中vue调试插件的方法： 方法1：手动下载vue-devtools并在vue-tools中手动处理。 1、进入github官网https://github.com/vu
阅读全文
摘要：一、打开运行面板 用管理员身份运行cmd打开命令行。运行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 注意：要检查在系统变量path下是否添加该路径。经检查，已添加（在安装npm的时候已添加） 二、查看cnpm的信
阅读全文
摘要：一、常用指令 v-model 双向数据绑定（常用于表单元素） 1 <div id="app1"> 2 3 用户名：<input type="text" v-model="name"><br> 4 {{name}}<br> 5 {{age}}<br> 6 {{flag}}<br> 7 {{nums}}
阅读全文
摘要：通过安装node.js和npm的方法来安装vue 在用 Vue 构建大型应用时推荐使用 npm 安装。npm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。 npm: Nodejs下的包管理器 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的
阅读全文
摘要：CDN 进入vue官网，下载最新核心库。https://unpkg.com/vue@next
阅读全文
摘要：一、功能需求 1、点击我的订单，跳转到订单tab页 二、代码实现 1、me.js(代码片段) 1 //点击我的订单，跳转到订单页面 2 toOrder(){ 3 wx.switchTab({ 4 url: '/pages/order/order', 5 }) 6 },
阅读全文
摘要：一、功能需求 反馈建议采用button组件 消除button组件的默认样式，美化页面样式 button按钮的open-type微信开放能力的应用 反馈建议的后台查看 二、代码实现 1、me.wxml 1 <view class="item"> 2 <!-- 给button添加open-type实现反
阅读全文
摘要：一、功能需求 在线客服采用button组件 消除button组件的默认样式，美化页面样式 button按钮的open-type微信开放能力的应用 在线客服的后台查看 二、代码实现 1、me.wxml 1 <view class="item" > 2 <!-- 给button添加open-type实现
阅读全文
摘要：一、功能需求 未登录和登录界面区别显示 点击授权登录，获取用户授权 登录成功后，将个人信息存入缓存 点击已登录成功后用户的微信头像，弹出退出登录 退出登录后，清空缓存 页面在onShow的时候，判断是否有缓存，优先从缓存获取信息 二、代码实现 1、me.wxml 1 <!-- 个人信息展示 -->
阅读全文
摘要：一、功能需求 1、不同状态下的订单信息展示 2、取消订单 3、订单评价 4、删除订单 5、再来一单 二、代码实现 1、order.wxml 1 <!--导航条--> 2 <view class="navbar"> 3 <lable wx:for="{{navbar}}" data-idx="{{in
阅读全文
摘要：一、功能需求 1、购物车固定显示在点餐页面底部 2、实时统计购物车总数量和总金额 3、已选菜品展示在购物车 4、添加菜品到购物车（菜品列表增加和购物车内增加同步） 5、减少菜品到购物车（菜品列表减少和购物车内减少同步） 6、购物车蒙层的显示和隐藏 7、购物车列表加载缓存菜品信息、已点菜品总数量、总金
阅读全文
摘要：一、功能需求 1、订单结算带出门店名称和门店地址信息 2、用户选择用餐方式 3、带出购物车所选的菜品信息 4、小计和合计 5、订单备注 6、点击提交订单弹窗选择支付方式 7、模拟支付 二、代码实现 1、orderPay.wxml 1 <!--导航条--> 2 <view class="navbar"
阅读全文
摘要：一、功能需求 1、用户在【首页】输入搜索关键词，点击【搜索】按钮： 携带搜索关键词跳转到【搜索菜品】页面 在【搜索菜品】页面显示关键词 在【搜索菜品】页面显示搜索出来的菜品列表 2、用户在【搜索菜品】页面 接收【首页】传递过来的关键词并显示到页面 根据传递过来的关键词正则查询出符合条件的菜品列表 用
阅读全文
摘要：一、功能需求 显示门店的信息（地图定位信息、门店名称、门店地址、联系电话、微信号） 点击地图定位点/气泡，自动调取手机中的地图软件，进入导航 二、代码实现 1.shopDetail.wxml 1 <map longitude="{{markers[0].longitude}}" latitude="
阅读全文
摘要：一、功能需求 显示当前位置 从数据库获取所有门店的信息 各个门店：点击对应按钮实现打电话联系，导航到门店 与其他页面交互 点击门店信息，携带门店信息跳转到门店详情页 shopDetail 点击【选这家】按钮，携带门店信息跳转到首页 home 二、代码实现 1.shop.wxml 1 <!-- 用户当
阅读全文
摘要：一、功能需求 页面展示默认门店（门店名称、门店电话、导航地址） 点击联系电话，调取拨打默认门店的联系电话 点击【导航前往】，调取手机地图软件进行导航 与其他页面交互： 点击默认门店名称，跳转到选择门店页面 二、代码实现 1.home.wxml 1 <!-- 选择门店 --> 2 <view clas
阅读全文
摘要：一、实现思路 编写热门推荐的页面 home.wxml 美化热门推荐的显示 home.wxss 新建云函数getHotFood() 获取热门推荐菜品列表 home.js 调用云函数获取热门推荐菜品 home.js 将获取到的热门推荐菜品数据渲染到页面上 home.js + home.wxml 菜品名称
阅读全文
摘要：一、实现思路 编写九宫格的页面 home.wxml 美化九宫格区域（弹性盒flex的应用）home.wxss 新建跳转页面 app.json 编写点击事件 home.js 二、代码实现 1.home.wxml 1 <!-- 九宫格 --> 2 <view class="categoryRoot">
阅读全文
摘要：一、实现思路 编写搜索框的页面wxml 美化搜索区域wxss 获取用户输入的内容 搜索词为空时候的提示 正则表达式实现模糊搜索 手机键盘触发搜索事件 携带搜索词跳转页面 二、代码实现 1.home.wxml 说明：confirm-type="search" bindconfirm="goSearch
阅读全文
摘要：一、首页轮播图的主要功能点 1.使用swiper和swiper-item组件 2.动态获取后台的轮播图照片 3.改变小程序默认的swiper显示高度 二、首页轮播图的代码 1.home.wxml 1 <!-- 首页轮播图 --> 2 <swiper indicator-dots="true" ind
阅读全文
浙公网安备 33010602011771号