Vue.js进阶教程
该教程针对有开发经验的程序员从0开始开发复杂完整项目
C++程序员Carea
十年一线开发经验,热爱 C++ ,热爱编程
展开
-
Vue Hello World
最简单的Vue代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script></head><body> <div id="原创 2020-12-15 11:32:27 · 200 阅读 · 0 评论 -
console.log 递归无法输出对象
Vue.js进阶文章列表使用下面的方式即可:console.log('路由跳转守卫 router.beforeEach to,from ', to, from)原创 2020-11-30 13:07:11 · 331 阅读 · 0 评论 -
内容安全策略CSP(Content-Security-Policy)解决XSS攻击
https://blog.csdn.net/u014465934/article/details/84199171原创 2020-11-25 13:27:39 · 1323 阅读 · 0 评论 -
JS 获取html元素宽高 及设置宽高
Vue.js进阶文章列表获取浏览器的宽高: var width = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var height = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;获取html元素宽高的两种方式// 首先是原创 2020-11-19 13:26:03 · 1400 阅读 · 0 评论 -
canvas获取摄像头并拍照显示
Vue.js进阶文章列表<!doctype html><html lang="en"> <head> <title>GET VIDEO</title> <meta charset="utf-8"> </head> <body> <input type="button" title="开启摄像头" value="开启摄像头" onclic原创 2020-11-19 11:33:15 · 1668 阅读 · 0 评论 -
HTML元素的大小
Vue.js进阶文章列表//test begin var div = document.getElementById("video_id"); var hc = div.clientHeight; //可视内容高度为283像素 var ho = div.offsetHeight; //占据页面总高度为400像素 var hs = div.scrollHeight; //展开滚动内容总高度为452像素 console.log("video_i.原创 2020-11-19 08:37:52 · 476 阅读 · 0 评论 -
使用 ref 直接访问元素
https://book.51cto.com/art/201901/590004.htm有时你会发现需要直接访问一个 DOM 元素;也许你正在使用一个不支持 Vue 的第三方库,或者希望做一些 Vue 自身不能完全处理的事情。可以使用 ref 直接访问元素,而不需要使用 querySelector 或者其他选择 DOM 节点的原生方法。使用 ref 访问一个元素,只需要将这个元素的 ref 属性设置为字符串,然后可以使用这个字符串访问元素:<canvasref="myCanvas">.原创 2020-11-18 16:37:28 · 476 阅读 · 0 评论 -
axios拦截器之axios.interceptors.request.use和axios.interceptors.response.use
https://blog.csdn.net/qq_42899245/article/details/107876734axios.interceptors.request.use(function(config){ //比如是否需要设置 token config.headers.token='wwwwwsdsdf' return config})axios.interceptors.response.use(res=>{ let data=res.data //比如响应一些报原创 2020-11-18 13:45:32 · 3767 阅读 · 0 评论 -
Vue.js进阶【0】 HTML5摄像头获取照片
Vue.js进阶文章列表<video class="videoClass" style="width: 100%; height: 100%" id="video_id" autoplay="autoplay"></video><canvas ref="myCanvas" id="canvas_id" class="canvas-vi" style="display: none"></canvas>.原创 2020-11-13 13:51:19 · 213 阅读 · 0 评论 -
Vue.js绑定内置CSS Style
Vue.js进阶文章列表官网示例:https://vuejs.org/v2/guide/class-and-style.html<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><div v-bind:style="styleObject"></div><div v-bind:style="{ display: ['-webkit-bo原创 2020-11-13 10:59:37 · 226 阅读 · 0 评论 -
http重定向
Vue.js进阶文章列表http重定向是http协议本身就支持的http重定向其本质是客户端请求服务端,服务端返回的内容标记是一个重定向的返回;客户端就根据http协议去访问重定向指定的网页。A(客户端)向B(服务端)借钱,B说没有,说你去问C要。A就去问C要了。...原创 2020-11-11 10:58:34 · 721 阅读 · 0 评论 -
Vue.js进阶【2-2】Vue单击任意位置全屏显示
实现代码如下: mounted() { // // 增加点击任意位置触发全屏显示功能; // addEventListener("click", function () { // var el = document.documentElement, // rfs = // el.requestFullScreen || // el.webkitRequestFullScreen || // el.原创 2020-11-10 11:00:57 · 184 阅读 · 0 评论 -
JavaScript正则表达式
JavaScript正则表达式验证用户名密码是否符合规范 // 密码的正则表达式:/[\d\w_]{6,30}/ 含义:数字,字母,下划线,6-30个字符 var passwordFormat = /^[\d\w_]{6,30}$/; if ( passwordFormat.test(this.formData.password.toString()) == false || passwordFormat.test(this.formDat原创 2020-11-09 17:30:56 · 193 阅读 · 0 评论 -
Vue.js进阶【5-1-1】element-ui el-table el-table-column
Vue.js进阶文章列表上代码<template> <div class="hello"> <el-table :data="tableData"> <el-table-column v-for="(item,index) in columnList" :key="index" :prop="item.prop" :label="item.prop"></el-table-column> </el-t原创 2020-11-06 14:33:08 · 490 阅读 · 0 评论 -
Vue.js进阶【7-1】Vue组件component传递父组件的成员函数给子组件 子组件emit调用父组件的函数
感谢前端大佬给我写的demo<template > <parentA> <childB v-if="showList1" @switch-tab="switchTab"> child B </childB> <childC v-else> child C </childC> </parent></template><script原创 2020-11-05 16:09:20 · 343 阅读 · 0 评论 -
Vue.js进阶【7】Vue components组件
Vue.js进阶文章列表Vue components组件是指一个Vue文件模块可以像一个button,一个div等HTML元素那样内嵌到另一个Vue文件中写法包括下面几个步骤:1 实现被当做组件的vue文件 componentA.vue2 在current.vue中引用componentA.vue<template> <div> <componentA> </componentA> </div>原创 2020-11-04 11:29:46 · 296 阅读 · 0 评论 -
vue项目打包部署
Vue.js进阶文章列表打包命令npm run build#或者cnpm run build原创 2020-10-28 09:37:15 · 378 阅读 · 0 评论 -
Vue.js进阶【9】vue使用debug日志库
https://github.com/visionmedia/debug安装:cnpm install debug --save原创 2020-10-27 17:18:10 · 634 阅读 · 0 评论 -
Javascript常用基础知识列表
对象类型Object创建对象创建对象:结构化创建var person ={name : "zhangsan",age : 29}创建对象:成员化创建var person = {};person.name = "zhangsan";person.age = 29;Json与Object互相转换var jsonObj = JSON.parse(jsonSt...原创 2020-02-18 22:08:06 · 261 阅读 · 0 评论 -
Vue.js进阶 cookie
Vue.js进阶文章列表原创 2020-10-22 17:56:09 · 413 阅读 · 0 评论 -
Vue.js进阶【2-3-0】vue-router 传参页面传参
Vue.js进阶文章列表post传参调用方传参:name paramsthis.$router.push({ name: 'news', params: { userId: 123 }})接受传递的参数:<template> <div> this is the news page.the transform param is {{this.$route.params.userId}} </div></template>原创 2020-10-22 10:30:14 · 345 阅读 · 0 评论 -
Vue.js进阶【7-0】Vue组件component使用props传递数据
Vue.js进阶文章列表调用Vue文件内部:1 patientCard是一个组件2 recentlyPatentinfo是被传递的数据3 关键代码是:<patientCard :dataList="recentlyPatientinfo"></patientCard>上面代码里,在调用代码中的<patientCard:dataList="recentlyPatientinfo"></patientCard>:da...原创 2020-10-21 17:00:16 · 760 阅读 · 0 评论 -
Vue.js进阶【1.1】Vue的基本语法
Vue.js进阶文章列表官网https://cn.vuejs.org/v2/api/#v-bind<!-- 绑定一个 attribute --><img v-bind:src="imageSrc"><!-- 缩写 --><img :src="imageSrc"><!-- style 绑定 --><div :style="{ fontSize: size + 'px' }"></div>...原创 2020-10-16 11:12:33 · 226 阅读 · 0 评论 -
Vue.js进阶【2-0-1】data数据模型绑定Vue语法
Vue.js进阶文章列表原创 2020-10-14 13:24:43 · 193 阅读 · 0 评论 -
JavaScript进阶 【3】操作摄像头
https://www.html5rocks.com/zh/tutorials/getusermedia/intro/原创 2020-09-22 17:06:21 · 214 阅读 · 0 评论 -
JavaScript进阶 【2】浏览器缓存对象sessionStorage和localStorage
菜鸟教程https://www.runoob.com/jsref/prop-win-sessionstorage.html介绍:localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。提示:如果你想在浏览器窗口关闭后还保留数据,可以使用localStorage属性, 该数据对象没有过期时间,今天、下周、明年都能用,除...原创 2020-09-07 14:34:29 · 451 阅读 · 0 评论 -
Vue.js进阶【8】vue使用echarts
Vue.js进阶文章列表命令行安装npm install echarts --savemain.js// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echartsHelloWorld.vue<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essentia原创 2020-09-03 15:21:28 · 202 阅读 · 0 评论 -
Vue.js入门【2-2】恶补JavaScript中的对象原型链
JavaScript语言的特点JavaScript不是面向对象的,所以引用语义:JavaScript是引用语义的语言,赋值会得到引用;对象继承与原型下面我们通过一个超级简化的例子来看看调试环境下原型继承的实际情况。我们定义了a对象,此时a对象就有了原型;我们定义了b对象,b的原型设置为a;我们定义了c对象,c的原型设置为b;var a = { a1:...原创 2018-09-11 22:19:06 · 760 阅读 · 0 评论 -
Vue.js进阶【4-1】Vue+Node+MongoDB+前后端分离实现登录界面
下面分三个部分来介绍:〇 根目录创建1 创建项目目录文件夹,我们的服务端和客户端都会以独立的文件夹形式存在于这个根文件夹中先在自己喜欢的位置 创建项目目录文件夹 classweb比如:D:\classweb注:打开命令行的简单方法:在文件夹中按住 shift 鼠标右键 点击“在此处打开命令行” / "在此处打开powershell窗口"一、服务端1安装cnpmc...原创 2018-09-13 12:22:50 · 6362 阅读 · 2 评论 -
Vue.js入门 恶补JavaScript的对象继承模型与this绑定
JavaScript是一个只有对象而没有类的语言,万物皆对象。函数也是对象实例。所以继承的时候是用对象来实现继承的,这个对象就是原型对象。对象自己的原型对象可以用prototype访问到记住不是类继承,而是对象继承!!!由于用对象继承,所以原型对象可以理解成静态的对象。而多重继承就自然而然的产生了原型链。下面的代码说明了这个问题: function Person(na...原创 2018-09-10 06:27:44 · 572 阅读 · 0 评论 -
Vue.js入门 恶补JavaScript
本文只收集在学习Vue.js的过程中遇到的基础JavaScript语法问题。重点收集JavaScript与其他语言不同的地方,以及最常用的地方。标识符标识符第一个字符可以是字母、下划线(_)、美元符($)例如,var $temp = {}; 不要觉得奇怪,只是定义了一个非常普通的变量$temp而已。 2018-11-04相等于不相等== != 这两个操作符在比较之前会...原创 2018-09-14 07:22:27 · 506 阅读 · 0 评论 -
Vue.js进阶【6】Vue官方示例vue-hackernews学习
项目地址:https://vuejs.org/v2/examples/hackernews.htmlGit下载:https://github.com/vuejs/vue-hackernews-2.0安装与运行:解压之后,在当前目录启动命令行Requires Node.js 7+# install dependenciesnpm install # or yarn# se...原创 2018-09-27 14:45:38 · 1720 阅读 · 0 评论 -
Vue.js进阶【5-4】axios入门
中文官方教程(推荐):https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html官方教程:https://www.npmjs.com/package/axiosaxios在vue1.x的时候,vue的官方推荐HTTP请求工具是vue-resource,但是在vue2.0的时候将推荐工具改成了axios。使用方式...原创 2018-09-26 15:54:17 · 672 阅读 · 1 评论 -
Vue.js进阶【5-3】mountebank入门(模拟http服务端一个json文件搞定)
mountebankmountebank(江湖骗子、江湖医生):是一个给前端测试用的API服务模拟工具,无需服务端,你就可以干活了。安装:C:\windows\system32>cnpm install -g mountebank运行:C:\windows\system32>mb帮助文档(运行之后本地浏览器访问):http://localhost:252...原创 2018-09-18 20:06:21 · 1894 阅读 · 0 评论 -
Vue.js进阶【5-2】bootstrap-vue入门
GitHubhttps://github.com/bootstrap-vue/bootstrap-vue元素背景颜色 variant可选值:success、info、warning、primary、danger、link,缺省灰色,light(白色透明背景)、dark<div> <b-button-group> <b-button&g...原创 2018-09-18 16:15:24 · 3897 阅读 · 0 评论 -
Vue.js进阶【5-1】element-ui入门
官方下载地址:https://github.com/ElementUI/element-starter一、介绍element提供了按钮、单选、日期、下拉、文本框等各种UI界面控件。该库可以很好的和Vue结合起来用。二、下载与使用下载到本地目录之后安装运行即可看到一个按钮的Demonpm installnpm run dev点击按钮弹出dialogDemo代码...原创 2018-09-17 10:46:44 · 551 阅读 · 0 评论 -
Vue.js进阶【4-1】vue-cli
使用vue-cli创建vue工程:https://blog.csdn.net/calmreason/article/details/82720355结论:本篇文章告诉你由vue-cli构建的单页面应用的工程结构和页面结构以及交互原理。本篇文章中不包括多组件传递数据需要的Vuex 2018-10-12更下面就来对这个典型的自动生成的工程进行介绍。这个工程可以说麻雀虽小五脏俱全,留给...原创 2018-10-10 13:47:08 · 2299 阅读 · 0 评论 -
Vue.js进阶【4-0】用vue-cli
https://blog.csdn.net/wulala_hei/article/details/80488674https://www.cnblogs.com/liaoanran/p/8042893.html上面的链接告诉你非常详细的步骤,下面我们只给出最粗粒度的几个步骤,方便你以后拿来就用。1 在一个空目录 shift + 右键 打开命令行vue-cli 2.02 全局...原创 2018-09-16 07:44:23 · 695 阅读 · 0 评论 -
Vue.js进阶【3】纯Vue实现单页面-列表增删改查
增删改查最能代表一个技术的完备性的,下面就展示Vue的增删改查,为了界面的美观实用了bootstrap仔细阅读下面的代码,即可领会其意思。不懂的标签和元素百度查一下一查一大堆。很快就可以理解了运行:直接右键HTML文件选择谷歌浏览器打开即可运行效果逻辑:全都是客户端自己提供数据,与服务端没有交互<html xmlns="http://www.w3.org/1999...原创 2018-09-09 15:46:36 · 9607 阅读 · 4 评论 -
Vue.js进阶【2-实例】vue + vuex + vue-router 超简单实现:电商商品列表和详情页面
本示例最大的特点就是足够的简单!!!网上有大量的各种项目的的模板,掺杂了很多业务代码,业务代码不适合初学者学习vue技术本身。学会了vue技术的典型应用只需要非常少的几行代码就足够了,学会了之后你可以随意做出你想做的任何应用。用到的主要技术:vue:https://blog.csdn.net/calmreason/article/details/82528220vue l...原创 2018-10-16 09:55:45 · 7256 阅读 · 2 评论