vue
Weightlessly
坚持输出
展开
-
自留课题组的图片(禁二传二改)
原创 2021-03-09 16:56:53 · 348 阅读 · 0 评论 -
vuecli3中如何加入富文本框并对接
安装wangEditornpm install wangeditor --save创建文件夹在components文件夹下,创建wangEditor文件夹,在wangEditor文件夹下,创建indexdemo.vue。在vue文件里写下如下内容:<template> <div class="editor"> <div id="e" > </div> </div></template>&l.原创 2021-03-02 16:39:55 · 537 阅读 · 1 评论 -
elment-ui vuecli3按需加载
安装babel-plugin-componentnpm install babel-plugin-component -D安装@babel/preset-envnpm install @babel/preset-env -D在package.json同一级文件夹创建babel.config.js(如果已经存在则直接打开),写入以下:module.exports = { presets: [ '@vue/app', ["@babel/preset-env", { .原创 2021-03-02 16:15:40 · 116 阅读 · 0 评论 -
如何解决vue中判断是否登录的路由跳转和刷新关闭浏览器是否保存登录状态的问题
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。vue实现了全局变量的共享,然而vuex也不是万能的,他在刷新页面的时候就会消失,回到初始化设置,这对于广大前端来说是一件非常头疼的事情,那么怎么解决这个问题呢?在App.vue中crea原创 2021-02-26 19:39:23 · 1131 阅读 · 3 评论 -
有关Vuex的初步学习
一、vuex是做什么的?官方解释: Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。1、何为状态管理?可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。2、如果是共享变量的话为什么不能自己封装一个对象来管理呢?vueJS带给我们最大的便利就是响应式。Vuex就是为了提供这样一个在多个组件间共享状态的插件。3、能够管原创 2021-01-24 23:14:35 · 189 阅读 · 1 评论 -
axios使用及封装
axios跨域及封装1、安装npm install axios --save2、main.js引用import axios from 'axios';3、axios基本用法function get(){ //axios.get('http://localhost:3000/post?id=1') axios({ url:'/posts', param:{ id:1 } }) .then(r原创 2020-12-27 22:00:07 · 1845 阅读 · 0 评论 -
vuecli3有关i18n中英文切换问题
1、npm安装 npm install vue-i18n2、main.js配置import VueI18n from 'vue-i18n';Vue.use(VueI18n);//有关i18nconst i18n = new VueI18n({ locale: 'zh',//表示默认的语言 修改全局locale值可以导入message中不同的包 messages: { 'zh': require('./lang/zh'), // 中文语言包 'en': require(原创 2020-12-20 11:00:32 · 1138 阅读 · 1 评论 -
有关vuecli的一些知识汇总
Vuecli如果在开发大型项目时,是我们需要考虑代码目录结构,项目结构和部署,热加载,代码单元测试等事情。如果每个项目都要手动完成这些工作,那么无疑效率会很低,所以我们通常会使用一些脚手架工具来帮助完成这些事情。使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置vuecli前提:安装Node官网:http://nodejs.cn/download/检测安装版本:命令行 node -vNPMnode package manager是一个NodeJS包管理和分发工具,以及成为原创 2020-07-30 20:47:33 · 160 阅读 · 0 评论 -
ES6模块化的导入和导出
ES6模块化的导入和导出导出export// 导出方式一export { flag,sum,}// 导出方式二export var num = 1000;export var height = 1.88;//导出方式三export function mul(num1,num2){ return num1+num2}export class Person(){ run(){ console.log('runnnnnn'); }}导入impo原创 2020-07-28 21:05:57 · 382 阅读 · 0 评论 -
vue组件化(三)父子之间的访问和slot插槽相关知识
$children和$ref父组件访问子组件使用$children或$refthis.$children时一个数组类型,它包含所有子组件对象。我们通过遍历可以取出所有子组件的状态。不常用。$ref比较像getElemengtById 可以直接访问<body> <div id="app"> <cpn></cpn> <cpn ref="bbb"></cpn> <cpn ref="aaa">原创 2020-07-27 20:59:11 · 784 阅读 · 0 评论 -
vue组件化(二)-有关父子组件的通信
父到子组件的通信子组件是不能引用父组件或者vue实例的数据的。但是在开发中,往往一些数据确实需要从上层传递到下层,比如在一个页面中,我们从服务器请求到了很多的数据。其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。这个时候,我们并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)如何进行父子组件之间的通信呢?①通过props向子组件传递数据②通过事件向父组件发送消息<body> <div id="app"&原创 2020-07-26 22:47:45 · 97 阅读 · 0 评论 -
vue-组件化(一)
组件化如果我们将一个页面所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但如果我们讲一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。降低代码耦合度。vue组件化思想组件使用分成三个步骤①调用Vue.extend()方法创建组件构造器(ES6中继承)通常在创建组件构造器时,传入template代表我们自定义组件的模板(是以对象的形式),该模板就是在使用到组件的地方,要显示的HTML代码。②调用原创 2020-07-25 22:03:53 · 248 阅读 · 0 评论 -
vue中有关v-model的知识总结
编程范式:命令式编程/声明式编程当接口越是在表达“要什么”,就是越声明式;越是在表达“要怎样”,就是越命令式。SQL就是在表达要什么(数据),而不是表达怎么弄出我要的数据,所以它就很“声明式”。C++就比C更声明式,因为面向对象本身就是一种声明式的体现。HTML也很声明式,它只描述我要一张什么样的表,并不表达怎么弄出一张表。简单的说,接口的表述方式越接近人类语言——词汇的串行连接(一个词汇实际上是一个概念)——就越“声明式”;越接近计算机语言——“顺序+分支+循环”的操作流程——就越“命令式”。越是声原创 2020-07-24 22:02:18 · 574 阅读 · 0 评论 -
vue中有关v-show和v-for的知识和实例
登录转换小案例<body><div id="app"> <div v-if="isShow"> <span>用户账户:</span> <input type="text" placeholder="用户账号"> </div> <div v-else> <span>邮箱地址</span> <input type="email" place原创 2020-07-24 00:19:48 · 706 阅读 · 0 评论 -
vue中有关v-on和v-if的使用
v-on 监听<button v-on:click="add">+</button><button v-on:click="counter++">+</button><button @click="add">+</button>语法糖:@当通过methods中定义方法,以供@click调用时,需要注意参数问题:情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。但是注意如果方法本身中有一个参数,那么会默认将原生事原创 2020-07-22 21:06:04 · 602 阅读 · 0 评论 -
有关ES5/ES6的小补充
let/var<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body><button>按原创 2020-07-21 21:44:54 · 170 阅读 · 0 评论 -
有关vue的插值操作与绑定属性
插值操作与绑定属性vue实例<body> <div id="app"> <h2>当前计数:{{counter}}</h2> <!-- <button v-on:click="counter++">+</button> --> <!-- <button v-on:click="counter--">-</button> -->原创 2020-07-20 21:48:35 · 450 阅读 · 0 评论