【Vue+TS 开发 海康威视 Web3.0控件】教程文章相关的互联网学习教程文章

vue组件中使用iframe元素【代码】

需要在本页面中展示vue组件中的超链接,地址栏不改变的方法:<template><div class="accept-container"><div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul><li v-for="item in webAddress"><a :href="item.link" target="showHere" @click="showIframe">{{item.name}}</a></li> </ul> <iframe v-show="iframeState" id="show-iframe" frameborder=0 name="showHere" scrolling=auto src=""></iframe></...

vue 项目文件介绍

bulid webpack配置相关 config webpack配置相关node_modules nmp install 安装的依赖代码库 src 存放项目源码static 第三方静态文件.babelrc es6编译es5 编译转换 配置.editorconfig 编译器的配置.eslintignore 忽略语法检查的目录文件.eslintrc.js eslintrc的配置文件 debug在开发环境true 上线时要 flaseindex 入口文件package.json 项目配置文件原文:http://www.cnblogs.com/xyc211/p/7...

Vue render函数【代码】

render函数使用 1.介绍:我们可以使用javascript动态的插件元素模板,不使用template使用js来创建// child.vue <script> export default {props: {myData: Array },// render函数:第一个参数是html标签,或者是一个对象,或者是一个函数,第二个参数是元素的相关配置。render: function (h) {return h(‘h1‘, {// class属性‘class‘: {foo: true,bar: false},// 组件的props props: {myData: Array},// style属性 sty...

解决 vue 使用 element 时报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf【代码】

在 webpack.config.js 中加入这个依赖{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader: ‘file-loader‘ } 原文:https://www.cnblogs.com/carriezhao/p/11791204.html

vue.js存储--localStorage【图】

//list例子:绑定从localStorage中读取的数据,动态添加list并监听将数据变化存储在localStorage中,绑定点击事件改变样式,页面 data数据: input_name:‘‘, items:locaStorage_work.fetch(),locaStorage_work为引用的组件js主要方法 监听存数据取数据:样式:.class-b{ text-align:center;}.class-a{ color:red;} 原文:http://www.cnblogs.com/wpsyp/p/6186434.html

vue 音频问题【代码】

技术点:在weakpack配置音频文件:{ test: /\.mp3(\?.*)?$/, loader: ‘url-loader‘, options: { limit: 15000, name: utils.assetsPath(‘media/[name].[hash:7].[ext]‘) }},一定注明音频大小限制(微信崩溃);在static中建个audio文件放音频;技术点二:微信背景音乐自动播放:function audioAutoPlay() { ground.load(); ground.play(); document.addEventListener("WeixinJSBridgeReady", funct...

在vue项目中,执行 npm run dev 时提示 { parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }【图】

这个不是报错,而是需要将babylon 换成babel解决办法是:找到modules包里面的:node_modules\vue-loader\lib\template-compiler\index.js将{ parser: "babylon" } 换成?{ parser: "babel" } 即可;如下图所示: 在vue项目中,执行 npm run dev 时提示 { parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }原文:https://www.cnblogs.com/ruilin/p/11177873.html

六、vue cli 调试【代码】

一、VS code中断点调试Vue CLI 4项目1、Debugger for Chrome插件2、配置vue.config.js文件(如果没有,在根目录下新增一个)module.exports = {configureWebpack: {devtool: ‘source-map‘} };3、配置babel.config.js 文件module.exports = {"env":{"development":{"sourceMaps":true,"retainLines":true, }},presets: [‘@vue/app‘] }4、配置launch.json文件 点击F5选择Chorem配置,即可查看Launch.json文件并替换{"version": "0....

linux搭建vue框架部署环境【代码】

1、下载安装包,具体版本根据自己需要。wget https://nodejs.org/download/release/v6.12.3/node-v6.12.3-linux-x64.tar.gz2、解压到指定目录tar -xzvf node-v6.12.3-linux-x64.tar.gz.2 -C ~/app3、配置环境变量#nodejs export NODEJS_HOME=/home/hadoop/app/node-v6.12.3-linux-x64 export PATH=$NODEJS_HOME/bin:$PATH4、刷新source /etc/profile5、检测node -v此时node.js已经完成。下面是打包有关安装6、安装webpackagenpm in...

Vue与Django前后台分离跨域配置【代码】【图】

一、跨域:简单来说:如果前端向后端请求数据,前后端的的ip和端口都是不一致的,就是不在统一域名下,就出现了CORS跨域问题。二、后台处理跨域在django后台环境目录下安装插件:>: pip install django-cors-headers插件参考地址:https://github.com/ottoyiu/django-cors-headers/在django里的settings.py进行项目配置# 注册app INSTALLED_APPS = [...'corsheaders' ]# 添加中间件 MIDDLEWARE = [...'corsheaders.middleware.Cors...

vue(版本2.xx) + 环信web sdk(版本1.8.3)【代码】【图】

1.准备工作npm引入sdk及 strophe.js(坑:刚开始下载的最新版的sdk,但是下载下来总是少文件src,挣扎半天,换了1.8.3版本的sdk好了,可能跟我项目的哪些东西的版本有不兼容的吧)(1)cnpm i easemob-websdk@1.8.3 --save(2)cnpm i strophe.js@1.2.16 --save(3)下载webim.config.js: https://gitee.com/weimingye/web-im/blob/master/demo/javascript/dist/webim.config.js#2.修改sdk的connection.js文件(注意新增代码的位...

解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题【代码】

一般的解决方法Html<input id="file" type="file" accept=".map" onchange="upload()"/>JSdocument.getElementById(‘file‘).value = null;// document.getElementById(‘file‘).onchange = function () { // alert(this.value); // this.value = null; // };?Vue中Html<input ref="referenceUpload" @change="referenceUpload" type="file" accept=".map" multiple/>JS methods: {referenceUpload(e) {this.$refs.refe...

vue项目 使用Hbuilder打包app 设置沉浸式状态栏【代码】【图】

使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar..... "plus": {"statusbar": {"immersed": true},......}, ..... 效果 此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。 原文:https://www.cnblogs.com/huangenai/p/9826123.html

vue 开发小技巧【图】

1,程序化的事件侦听器 2,手动挂载组件在一些需求中,手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件,最理想的用法是通过命令式调用,就像 elementUI 的 this.$message 。而不是在模板中通过状态切换,这种实现真的很糟糕。先来个最简单的例子:import Vue from ‘vue‘import Message from ‘./Message.vue‘// 构造子类let MessageConstructor = Vue.extend(Message)// 实例化组件let messageInstance = new Messa...

vue-路由守卫【代码】

import Vue from ‘vue‘ import Router from ‘vue-router‘ import Home from ‘@/components/Home‘ Vue.use(Router)const router = new Router({mode: ‘history‘,routes: [{path: ‘/‘,// name: ‘Home‘,// component: Homeredirect:‘/login‘},{path:‘/login‘,component:Login},{}] }) router.beforeEach((to,from,next)=>{ //导航守卫//to将要访问的路径//from代表冲哪一个路径跳转过来//next 是一个函数 表示放行...