vue

写在前面， window.resize 需要事件监听。 报错如下： 需要再 watch 中监听事件，或者直接绑定事件写法： 以下为网上找的 watch 监听写法： ---------------------------------------------------------------------------------------------------------------- Vuejs 本身就是一个 MVVM 的框架。 但是在监听 window 上的 事件 时，往往会显得 力不从心。 比如 这次是 window.resize 恩，我做之前也是百度了一下。看到大家伙都为这个问题而发愁。 问题： 今天我也 遇到了这样一个问题， 是关于canvas 自适应。 根据窗口的变化去变化 canvas 的宽度 备注： 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版本 （这里用的 Vue 2.x 、ES6） 解决方案： 第一步： 先在 data 中去 定义 一个记录宽度是 属性 data: { screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要） } 第二步： 我们需要 讲 reisze 事件在 vue mounted 的时候 去挂载一下它的方法 mounted () { const that =

基本概念 vue-chartjs ：vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Chart.js ： Chart.js 是一套简单、干净并且有吸引力的基于 HTML5技术的 JavaScript图表工具。 Chart.js 为你提供了完整的易于集成到你的网站的生动、交互的图表。 官网地址 https://vue-chartjs.org/ GitHub https://github.com/apertureless/vue-chartjs DEMO http://demo.vue-chartjs.org/ API vue-chartjs的API参考Chart.js的API： 注：vue-chartjs官方的文档只介绍了如何创建和使用插件部分，详细的属性配置还是需要去chart.js的文档里面找。 https://www.chartjs.org/docs/latest/ npm npm install vue-chartjs chart.js --save 组件 图表组件： Bar:柱状图 HorizontalBar:水平条形图 Doughnut:圆环图 Line:折线图 Pie:饼图 PolarArea:极地区域图 Radar:雷达图

一、打包vue项目 　　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。 　　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。 二、获取nginx 镜像 　　 nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。 　　在终端输入： docker pull nginx 　　即可以获取到nginx镜像。 　　Docker镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。 镜像不包含任何动态数据，其内容在构建之后也不会被改变。 　 在终端输入如下命令，可以看到nginx的镜像 docker image ls 　　镜像结果如下所示： 三、创建 nginx config配置文件 　　在项目根目录下创建 nginx 文件夹，该文件夹下新建文件 default.conf server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/nginx/host.access

这期跟大家分享的，是 v-bind 指令。它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。 绑定属性 最简单的例子，我们有一张图片，需要定义图片的 src 。我们可以直接在元素的属性里面定义： <div id="app"> <img src="https://cn.vuejs.org/images/logo.png" alt=""> </div> <!-- ... ... --> <script type="text/javascript"> var app = new Vue({ el: '#app' }); </script> 但是在实际工作中，我们通常会遇到的情况是，图片地址是从数据里返回的，这个时候 v-bind 指令就派上了用场。当然，我们可以同时绑定各种属性： <div id="app"> <img v-bind:src="imgSrc" v-bind:alt="imgAlt" v-bind:title="imgTitle"> </div> <!-- ... ... --> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { imgSrc: 'https://cn.vuejs.org/images/logo.png', imgAlt: 'vue-logo'

Vue的生命周期 1.Vue生命周期的概念 从Vue实例开始创建,然后运行,最后销毁的整个生命过程中,会伴随着各种各样的事件,这些事件统称为Vue的生命周期. 所谓的生命周期函数和生命周期钩子,其实就是生命周期事件. 2.Vue生命周期函数分类 1.创建期间的生命周期函数 beforeCreate(){} created(){} beforeMount(){} mounted(){} 2.运行期间的生命周期函数 beforeUpdate(){} updated(){} 3.销毁期间的生命周期函数 beforeDestroy(){} destroyed(){} 3.Vue生命周期图解(对照第四节的代码更容易理解) 4.Vue生命周期各阶段对应的代码示例 < ! DOCTYPE html > < html lang = "en" xmlns : v - on = "http://www.w3.org/1999/xhtml" > < head > < meta charset = "UTF-8" > < title > Title < / title > < / head > < body > < div id = "app" > < input type = "button" value = "修改data中数据" @click = "msg='我是修改后的data数据'" > <

前言 本章我们来学习Vue组件通信中的可以算是所有内容，在此之前，您最好掌握Vue的基础语法、指令等内容，同时也建议您查看我其他的文章进行补充。 组件通信 父子组件关系 通过上图顺带给大家说明了父子组件的实现原理，以及组件间传值传DOM的实现思路，那么我们看看Vue的代码来感受一下 父向子传值 模板部分(此处传值也能使用组件内的变量) <div id="app"> <!-- 传递一个字符串常量haha --> <son v-bind:text="'haha'"/> </div> js部分 // 子组件 var Son = { // 要接收的字段名称 props:['text'], template:` <div> {{ text }} </div>` }; Vue.component('son',Son); // 父组件 new Vue({ el:'#app' }); 显示结果很显然是子组件的haha 子向父通信 试想一种情况，由父组件控制子组件的显示，而从子组件中点击X来实现子组件的隐藏，那么实际的控制权确实在父组件 要处理这个问题，大家第一反应应该就是相当通过子组件的点击事件，拿到父组件内控制显示与隐藏的变量并更改就可以了 代码如下 // 隐藏按钮点击函数 methods:{ clickChild(){ this.$parent.isShow = false; } }

< template > < div class = "container" > < div class = "box" > < div class = "header" > 小米闪购 < / div > < el - row : gutter = "20" > < el - col : span = "6" > < div class = "product-area" > < div class = "con-tit" > 抢购 < / div > < img class = "img" src = "./imgs/lightning.png" > < div class = "desc" > 距离结束还有 < / div > < div class = "time-wrapper" > < div class = "time-box" > { { hour } } < / div > < i class = "ii" > : < / i > < div class = "time-box" > { { minute } } < / div > < i class = "ii" > : < / i > < div class = "time-box" > { { second } } < / div > < / div > < / div > < / el - col > <

在Vue项目中获取视频的时长 传入参数为视频文件对象，js的代码如下： getVideoDuration(file) { var url = URL.createObjectURL(file); var audioElement = new Audio(url); var self = this; var result; audioElement.addEventListener("loadedmetadata", function() { // 视频时长值的获取要等到这个匿名函数执行完毕才产生 result = audioElement.duration; //得到时长为秒，小数，182.36 self.ruleForm.videoDuration = parseInt(result); //转为int值 }); } 来源： CSDN 作者： 看门猫 链接： https://blog.csdn.net/qq_36272282/article/details/104558939

最近一直在写前端,写得我贼难受,从能看懂一些基础的代码到整个前端框架撸下来鬼知道我经历了啥(；´д｀)ゞ 项目中所用到的下拉菜单的值全部都是有数据库中的数据字典表来提供的,显示给用户的是的清晰的意思,但是很多实体类中保存的数据都只是"1"或者"0" 下拉菜单部分渲染 <el-col :xs="12" :sm="12" :md="12" :lg="12"> <el-form-item :label="$t('i18n.flag')"> <el-select v-model="form.flag" :placeholder="$t('i18n.pleaseSelect')"> <el-option v-for="(v, i) in dictionary.flag" :label="v.dicttypeName" <!-- 后端保存的是String类型,前端这边手动转换成字符型 --> :value="v.dicttypeCode + ''" :key="i"/> </el-select> </el-form-item> </el-col> 在前端那边查询出来之后显示的结果就是"1"或"0",这样用户体验感会比较差,类似下图,意思表达得不清不楚 之前的写法是全部在前端页面中写死的固定值,但是当页面越来越多,有时候需要修改就得一个一个页面去翻,去改,感觉自己在划水的路上是越来越顺畅了

在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，以滴滴为例，可以是这样竖向滚动的列表，如图所示： 也可以是横向滚动的导航栏，如图所示： 可以打开“微信 —> 钱包—>滴滴出行”体验效果。 我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll。 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在 这里 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 better-scroll 的滚动原理 不少同学可能用过 better-scroll，我收到反馈最多的问题是： 我的 better-scroll 初始化了， 但是没法滚动。 不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。 那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构： <div class=