【vue使用国密(sm2)】教程文章相关的互联网学习教程文章

添加谷歌拓展程序 vue.js devtools过程中的问题【图】

在用vue做项目过程中,需要用到vue.js devtools,在从github上面clone下来代码,然后再npm install ,过程报错,然后更新npm包也是会有问题,以下是install的问题,npm cache clean --force 也是没用的,好在最后问同事,windows版本蓝灯下载重装,最后再谷歌应用商店添加了拓展程序。从昨天到今天上午,至此这个问题才搞定,用这个工具主要是为了方便整个项目 vuex的状态查看。 原文:https://www.cnblogs.com/tangjiao/p/9013281....

vue中rem的转换【代码】

1function rems(doc: any, win: any): void {2 let docEl = doc.documentElement,3 resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,4 recalc = function () {5 let clientWidth = docEl.clientWidth;6if (!clientWidth) return;7 docEl.style.fontSize = 20 * (clientWidth / 750) + ‘px‘;8 };9if (!doc.addEventListener) return; 10 win.addEventListener(res...

第一个vue程序【代码】

前置:nodejs vue-cli  初始化一个vue程序vue init webpack vuetest因为是第一个vue程序,所以全部手动创建  Vue bulid sandalone 运行时编译  是否安装Vue-router 不安装,手动安装  是否使用ESL检查你的代码 不  是否安装测试 NO  是否需要自动运行npm install No 手动 基础的vue目录   进入到新建的vue文件   npm install安装package.json里面的文件  报错的话比如typeerror可以试试cnpm i...

Vue中table合并单元格用法【代码】

<table><tr><th>地名</th><th>结果</th><th>人名</th><th>性别</th></tr><template v-for="(item, index) in list"><tr :key="index"><td :rowspan="item.groups.length">{{item.name}}</td><td :rowspan="item.groups.length" v-if="item.result === ‘1‘"><span>已完成</span></td><td :rowspan="item.groups.length" v-if="item.result === ‘0‘ || item.result === null"><span>未完成</span> </td><td>{{item.gr...

使用vue-cli构建 webpack打包工具时,生产环境下,每次build时,删除dist目录,并重新生成,以防dist目录文件越来越多。

首先,需要使用webpack的插件CleanWebpackPlugin,安装命令如下:  npm install --save-dev clean-webpack-plugin  其次,需要在生产环境提供的文件:build/webpack.prod.conf.js的plugins节点下添加如下代码:  new CleanWebpackPlugin(  [‘dist‘],  //匹配删除的文件  {      root:path.resolve(__dirname,‘../‘) //根目录    verbose:true, //是否启用控制台输...

Vue 组件与复用【代码】

(1)全局注册<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"/><title>Vue</title></head><body><div id="app"><my-component></my-component></div><script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script><script type="text/javascript">//示例前注册 Vue.component(‘my-component‘, {//DOM结构必须被元素包含 template: ‘<div>组件内容</div>‘})new Vue({el: "#ap...

vue-socket.io 3.0.9 的最新版本不能用

看到issue 反馈要回退到到版本3.0.7 ,但是发现了一个问题,package.json 写的是3.0.7 但是,cnpm install (下载所有的包) 下载在node_modules 里的包依旧是3.0.9一开始以为是缓存的问题,用了一些命令也没有用,后来去研究了 vue-socket.io: ^3.0.9 ,这个^代表的含义~3.0.2 := >=3.0.2 <3.1.0 会匹配到3.0.x的最新版本^3.0.9 := >=3.0.9 <4.0.0 会匹配到3.x.x的最新版本所有 cnpm install 下载的vue-socket.io 匹配到...

Framework7-vue + cordova,从创建项目到发布程序(Android、Web)【图】

环境:NodeJs、Android SDK 、Adb Driver安装:npm install -g cordova   npm i framework7-cli cordova -g 代码编辑器:Vs Code(建议Version:1.42,否则Cordova调试麻烦) 过程:  1、创建一个项目:  2、在项目根路径下打开编辑器,再把项目根路径下的Cordova目录添加到WorkSpace   3、下载Cordova Tools组件,方便调试  4、设置DEBUG AND RUN(调试工具)  注:vs code版本需要1.42,才能选择WorkSpace(见 ht...

Vue内部使用setInterval轮询数据,对象数据重新赋值后再次渲染数据【代码】【图】

var vue = new Vue({el: "#notification",data: {Message: ""}, methods: {getMessage: function () {var self = this;$.ajax({url: "../Manage/Message/GetMessage",type: "get",dataType: "json",async: false,success: function (data) {self.Message = data; }})}},mounted: function() {this.getMessage();setInterval(this.getMessage, 3000);}}) 注:这里有三个关键点:1、在methods里...

Vue(核心思想)【代码】

1.Es6语法普及let和var的区别:var:定义变量时,在全局范围内都有效;所以在变量没有声明之前就能使用,值为undefined, 称为变量提升;let:声明的变量一定要在声明后使用,而且在for循环时,变量都会被重新定义 let不允许在相同的作用域内,重复声明一个变量;// 报错function func() {let a = 10;var a = 1; }// 报错function func() {let a = 10;let a = 1; }所以,在函数内部重新声明参数也报错function func(arg) {let arg; // 报错}func...

Vue.js基础篇实战--一个ToDoList小应用

距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用。主要功能就是把一天要做的事情记录下来,还实现了:标记完成事件删除已完成事件各种排序仅显示未完成的项目本地保存截图看这里用时一周,14次commits,把心中的构想基本实现了。详情请看:这里整个过程下来,收获还是很多的,1.对mvvm有了进一步的理解,2.对css布局有了更多的了解。3.更进一步理解了Vue的事件和组件机制。...

vue 使用 video.js 播放 m3u8 视频流【代码】【图】

vue 使用 video.js 播放 m3u8 视频流首先呢,遇到一个项目,是需要使用播放器在web上播放视频流,项目使用vue开发的,然后就找了一下相应的插件,找到了 video.js,自己用的时候感觉还不错,可以满足自己的需求,记录一下。安装依赖包npm install video.js --save // 视频播放器插件 npm install videojs-contrib-hls --save // 播放hls流插件 npm install @videojs/http-streaming --save 安装的时候直接 npm 安装,但是我安装的...

vue实现简单学生信息管理案例【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>学生信息管理</title><link rel="stylesheet" href="./lib/bootstrap.css"><script src="./lib/vue.js"></script><style type="text/css">#app{margin: 10px;}</style></head><body><div id="app"><form class="form-inline"><div class="form-group"><label>学号:</label><input type="text" class="form-control" v-model="stuNo"></div> <div class="form...

vue中的class和style的使用【图】

v-bind:class的使用1:第一种使用方式v-bind:class='[a,b,c]'形式的用法a b c是data中的数据2:第二种使用方式v-bind:class='{}'形式的用法当然也可以配合着数据一起使用3:第三种使用方式(其实和第二种方式是一样的)v-bind:class='json',引号里可以直接存放一个json类型的变量,其实也就是第二种形式的写法,换了一个地方而已。v-bind:style的使用1:第一种使用方式2:第二种使用方式(其实就是第一种方法的位置换了一个地方)3:第三种用...

Vue中vant使用【代码】【图】

1、安装 vant: npm i vant -S2、main.js引用(可按需引用)//按需引用 import { Button } from ‘vant‘import ‘vant/lib/button/style‘ //引入样式或者下载 vant.min.css,在根目录index.html引用Vue.use(Button)//全部引用 import vant from ‘vant‘ Vue.use(vant )3、使用<van-button type="default">默认按钮</van-button><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-butto...