Vue
文章平均质量分 77
吃不胖的猫o(=^ェ^=)m
这个作者很懒,什么都没留下…
展开
-
vue vue-pdf、pdfobject 展示pdf
npm install --save vue-pdf<template> <div v-show="fileType === 'pdf'" class="pdf"> <p class="arrow"> <span :class="{grey: currentPage==1}" class="turn" @click="changePdfPage(0)">Preview </span>原创 2021-08-14 13:34:22 · 1119 阅读 · 1 评论 -
基于vue,结合el-button的vue-router配置
文章目录1.安装路由2.创建路由配置文件3.定义路由组件4.配置路由规则并创建路由实例,导出5.添加路由链接 添加路由填充位6.运行 查看效果1.安装路由在终端运行npm install vue-router --save2.创建路由配置文件在main.js文件夹下添加以下代码//添加路由import router from './router'new Vue({ router, render: h => h(App)}).$mount('#app')用图形化方式创建的v原创 2021-01-12 08:53:26 · 1805 阅读 · 0 评论 -
vue lic Echarts的插入及基于ASP.NET Core3.1 signalR实现前后端分离式数据传输
文章目录在vue中插入Echarts基于ASP.NET Core3.1 signalR实现前后端分离后端代码:前端配置1.用图形化方式创建的脚手架项目中,在依赖中添加添加`@microsoft/signalr`2. 用以下代码创建hub.js3. 配置`BarChart.vue`在vue中插入Echarts获取echarts用图形化方式创建的脚手架项目,在依赖中添加echarts 4.9.0或者 通过npm 获取echarts:npm install echarts --save安装完后,在项原创 2020-12-26 15:18:30 · 621 阅读 · 1 评论 -
Vue CLI基于图形化方式创建Vue项目
文章目录npm换源成淘宝镜像图形化方式创建Vue项目基于图形化界面的方式,创建Vue项目Vue脚手架生成的项目结构分析Vue脚手架的自定式配置1.(不推荐)通过package.json配置项目2.(推荐)通过单独的配置文件配置项目npm换源成淘宝镜像由于node下载第三方依赖包是从国外服务器下载,虽然没有被墙,但是下载的速度是非常的缓慢且有可能会出现异常。在创建项目之前,建议把npm的镜像源替换成淘宝的镜像源打开默认的npm(win+r),输入以下代码npm install -g cnpm --原创 2020-12-07 15:27:50 · 380 阅读 · 0 评论 -
Vue路由的基本概念与原理,Vue-router的使用
文章目录1. 路由的基本概念与原理路由的本质(1)后端路由(2)SPA(3)前端路由2. 路由的使用(1)Vue-router的基本使用(2)路由重定向(默认路径)(3)Vue-router的嵌套路由`children`(4)Vue-router的动态路由匹配(5)路由组件传递参数props①props的值为布尔类型②props的值为对象类型③props的值为函数类型(6)Vue-router的命名路由(7)Vue-router的编程式导航1. 路由的基本概念与原理路由的本质 路由的本质就是对应关系原创 2020-11-28 16:28:54 · 440 阅读 · 0 评论 -
Vue渲染函数
节点、树以及虚拟 DOM1. 浏览器的工作原理<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --></div>上述 HTML 对应的 DOM 节点树如下图所示:每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。2原创 2020-11-26 16:47:48 · 829 阅读 · 0 评论 -
Vue自定义指令
自定义指令简介1.自动聚焦输入框自定义指令&&全局————不带参数<div id="app"> <input type="text" v-focus></div><script> Vue.directive('focus', { inserted: function(el){ el.focus() } }); var vm = new Vu原创 2020-11-26 14:29:44 · 141 阅读 · 0 评论 -
Vue混入
混入基础一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项<script> var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } var Component =原创 2020-11-26 13:40:02 · 119 阅读 · 0 评论 -
Vue边界处理情况
一.访问根实例$rootVue 子组件可以通过 $root 属性访问父组件实例的属性和方法写入根组件的数据<div id="app"> {{msg}} <root-obj></root-obj> </div> <script> Vue.component("root-obj",{ data () { return { } }, templ原创 2020-11-26 11:55:56 · 218 阅读 · 0 评论 -
Vue组件简易模拟购物车练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></scr.原创 2020-11-20 20:33:19 · 276 阅读 · 0 评论 -
Vue组件化开发
组件注册1 全局组件注册语法Vue.component("button-counter", { data: function(){ return{ count: 0 } }, template: "<button @click='handle'>点击了{{count}}次</button>", methods:{ handle:function(){ this.count+=2; } }});var原创 2020-11-18 16:33:17 · 183 阅读 · 0 评论 -
Vue数组响应式变化
1.变异方法(修改原有数据,会影响原有数组数据)都会被Vue处理成响应式的方式,只要调用这些方法,都会影响到页面中模板内容的变化this.list.push(this.fname)push()数组末尾添加一个或多个元素pop()删除数组的最后一个元素shit()删除数组的第一个元素unshit()向数组开头添加一个或多个元素splice()删除数组中指定元素sort()对数组中的元素进行排序reverse()反转数组,颠倒顺序2.替换数组(生成新的数组,不会对原数组产生影响)调用完原创 2020-11-18 10:08:35 · 632 阅读 · 1 评论 -
Vue生命周期
1. 主要阶段挂载(初始化相关属性)(1)baforeCreate在实例初始化之后,数据观测和事件配置之前被调用(2)created在实例创建完成后立即被调用(3)beforeMount在挂载之前被调用*(4)mountedel被新创建的wm.$el替换,并挂载到实例上去之后调用该钩子更新(元素或组件的变更操作)(1)beforeUpdate数据更新时调用,发生在虚拟Dom打补丁之前(2)updated由于数据更改导致的虚拟Dom重新渲染和打补丁,在这之后会调用该钩子销毁(销毁原创 2020-11-18 08:21:31 · 116 阅读 · 0 评论 -
Vue过滤器的使用(格式化日期)
过滤器的作用格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等自定义过滤器Vue.filter("lower",function(val){ return val.charAt(0).toLowerCase() + val.slice(1)})过滤器的使用级联操作<div>{{msg | upper}}</div><div>{{msg | upper | lower}}</div>属性绑定<div :abc原创 2020-11-17 16:26:08 · 455 阅读 · 0 评论 -
Vue侦听器的用法即应用场景
侦听器的应用场景数据变化时执行异步或开销较大的数据侦听器的用法<body> <div id="app"> <div> <span>名:</span> <span> <input type="text" v-model="firstName"> </span> </div> <d原创 2020-11-17 15:19:47 · 938 阅读 · 0 评论 -
Vue 计算属性 computed
一:Vue计算属性1.为何需要计算属性?表达式 的计算逻辑可能比较复杂,使用计算属性可以使模板内容更加简洁2.计算属性的用法computed: { reverseString: function(){ //基于data中的数据来做处理 return this.msg.split('').reverse().join(''); }}直接调用<div>{{reverseString}}</div>计算属性与方法的区别计算属性是基于他们的依赖进行原创 2020-11-17 14:27:11 · 119 阅读 · 0 评论 -
新版vs code + Vue高亮、语法自动补全插件
vs code 版本或及以上1.安装以下三个插件插件VeturESLintPrettier2.左下角设置3.进行配置旧版配置:{ "editor.fontSize": 20, "window.zoomLevel": 1, "workbench.iconTheme": "ayu", "files.autoSaveDelay": 500, "files.autoGuessEncoding": true, "files.autoSave": "a转载 2020-11-17 09:53:40 · 26919 阅读 · 1 评论 -
基于Vue的表单操作
基于Vue的表单操作input单行文本textarea多行文本select下拉多选radio单选框checkbox多选框示例效果如下:input单行文本与 textarea多行文本类似,使用v-model数据绑定select下拉(1)单个下拉选项在每个option中添加<option value="0"></option>,不同的value值,select 中添加<select v-model="occupation" >,data中原创 2020-11-16 15:38:35 · 242 阅读 · 0 评论 -
Vue的Tab选项卡(点击切换图片)
效果:点击相对应的图片编号显示该图片,随机切换css:1.list-style: none;//去除列表默认小点2.display: none;//图片初始都为隐藏3.添加选中的名字的样式active4.添加当前选中图片显示display: block;js:1.利用遍历数组的对象添加相应名称和图片<li :key="item.id" v-for="(item,index) in list">{{item.title}}</li><div :key="i原创 2020-11-16 14:09:08 · 2069 阅读 · 0 评论 -
Vue模板语法概述(指令,事件、属性、样式绑定,分支、循环结构)
Vue模板语法如何理解前端渲染把数据填充到html中(模板+数据=前端渲染(静态html内容))前端渲染方式原生js拼接字符串使用前端模板引擎使用Vue特有的模板语法模板语法概述插值表达式指令事件绑定属性绑定样式绑定分支循环结构v-cloak指令语法插值表达式存在的问题:闪动如何解决该问题:使用v-cloak指令解决该问题的原理,先通过样式隐藏内容,然后在内存中进行值的替换,替换好了之后再显示最终的结果提供样式,再在插值表达式所在的标签中添加v-cloak原创 2020-11-14 16:53:30 · 304 阅读 · 0 评论 -
Vue概述及入门
Vue渐进式Javascript框架声明式渲染–>组件系统–>客户端路由–>集中式状态管理–>项目构建Vue的基本使用步骤需要提供标签用于填充数据引入vue.js库文件可以使用Vue的语法做功能把Vue提供的数据填充到标签<body> <div id="app"> <div>{{msg}}</div> </div> <script> var原创 2020-11-13 10:11:38 · 138 阅读 · 0 评论