Black_stonenight的博客

原创 button按钮点击变色

原创 vue中超简单的方法实现点击一个按钮出现弹框，点击弹框外关闭弹框

View层<template> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal"> <button @click="showModal=false" class="btn">点击出现弹框</button> </d

原创 微信小程序商品详情页的弹出框

在wxml中的对应位置写入下列代码<view bindtap='showModal'>click me</view><code class="language-html"><!--屏幕背景变暗的背景 --><view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <!--弹出框 -->&lt

原创 WXML与HTML的区别

1、标签名字有点不一样2、多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式3、开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。4、组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码。5、没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关API。...

原创 如何让vue的样式只在当前页面起作用

在组件中style标签后面加上scoped就可以。如图：

原创 vue-router的运用

1、安装vue-router2、在src文件夹下新建router.js文件引用代码import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)3、在src中新建view文件夹，在view新建例如：Home文件夹，在文件夹中新建index.vue。<template> <div id="home"> <Content /> </div>&lt

原创 vue-router的安装

1、安装vue-router：在vscode的终端中输入：npm install vue-router或cnpm install vue-router或yarn add vue-router进行安装。2、安装完成后在node_modules工作区确保有3、在终端输入yarn serve确保项目正常运行。...

原创 Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

Vue常见的三种传值方式：1、父传子2、子传父3、非父子相传1、父组件向子组件进行传值//父组件<template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName="name"></child> </div&

原创 vue生命周期的阶段注意事项

一、mounted1 .在mounted里面修改data里面的数据，并不是想要的直接就拿mounted里面的修改过的值渲染界面，而是还会先拿data里面的初始值进行渲染，然后走beforeUpdate这里拿新的数据进行渲染2 .这是不是说如果想要修改data里面的数据，要在beforeMounted的时候修改呢3 .其实beforeMounted也是先按照默认值进行渲染，如果beforeMounted里面修改数据比较慢的话，他是不会等着的，还是会直接执行下一个生命周期函数。也就是说所有的生命周期函数之

原创 vue的生命周期

一、vue的生命周期共分为8个阶段、4个时期1、beforeCreate（创建前）2、created（创建后）3、beforeMount（载入前）4、mounted（载入后）5、beforeUpdate（更新前）6、updated（更新后）7、beforeDestroy（销毁前）8、destroyed（销毁后）二、vue第一次页面加载会触发四个钩子函数分别是：beforeCreate、created、beforeMount、mounted。三、DOM渲染在mounted（载入后）这个周

原创 Vue声明式渲染、条件与循环、事件绑定、双向绑定

1、声明式渲染Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。在app.vue中的template里在app.vue中的export default中效果图：2、条件与循环在template中用v-if定义seen在下方的export default中的return中添加seen=true，（显示）或seen=false，（隐藏）v-for 指令可以绑定数组的数据来渲染一个项目列表：在return中添加效果图：3、事件绑定下方注释为简写

原创 ECharts引用组件案例

1、app.wxss中的固定应用代码：/app.wxss/.container {position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex; /* flex布局 // 注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 /flex-direction: column; /决定主轴的方向（即项目的排列方向） // column：主轴为垂直方向，起点在上沿。/al

原创 ECharts在微信小程序中的使用

1、首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。2、在创建项目之后，可以将下载的 ecomfe/echarts-for-weixin 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。3、4、5、app.wxss中的固定应用代码：/app.wxss/.container {position: absolute;top: 0;bottom: 0;left: 0;right: 0;d

原创 vue与vue脚手架的安装

vue的安装及vue cli的安装：1、安装git工具2、安装node,检查node安装是否成功，在git工具中输入node -v3、检查npm是否安装成功，在git工具中输入npm(npm一般随node一起安装在电脑中，node如果成功了，npm基本都会没问题)4、cnpm安装参考网站：https://developer.aliyun.com/mirror/NPM?from=tnpm在git工具中输入：npm install -g cnpm --registry=https://registry

转载 小程序js距离代码

在小程序js中下列数据为固定数据，可直接应用：onLoad: function (options)wx.getLocation({type: ‘gcj02’,success: (res) => {const distance_new=this.getDistance(res.latitude,res.longitude,this.data.latitude2,this.data.longitude); let distances=this.data.productAll.map((