随笔分类 - Vue
前端框架
摘要：先弄3个tab组件，再导入 可以使用<component :is="activetab">那个，也可以使用下面注释的那个,二选一 选择TabA 第二部分 如何切换之间有input的输入框，来回切换会消失的，所以要使用keep-alive保持活性
阅读全文
摘要：在vue里面使用的话最好不要操作数据，做一些效果就好了 1.首先 npm install jquery --save 2.使用v-on:click。定义一个点击方法，或者其他方法 3.import $ from 'jquery' 4.在方法里面使用
阅读全文
摘要：一 . 安装json-server 01安装 npm install -g json-server https://github.com/typicode/json-server 02,新建一个db.json文件，把上面链接文档的数据放上去 03. json-server --watch db.js
阅读全文
摘要：里面是英文的，可以使用谷歌翻译一下 https://blog.piio.co/posts/how-to-use-images-in-vue-js
阅读全文
摘要：1.安装 npm i vue-lazyload -S 安装成功后 目前使用的版本是vue2.6的 2.引入 3.使用Vue.use(VueLazyLoad) ,svg是加载时候的效果 4.把项目中的src改为v-lazy
阅读全文
摘要：1.先绑定一个类名，用来固定的 2.js求出他的高度 window.addEventListener('scroll', this.initHeight,true)后面要加上true 3.还有一个类名 全文，直接运行肯定报错的，图片看不清楚用的 <template> <div class="nav-
阅读全文
摘要：案例，我目前使用的是vue2版本的2.6，安装vue-awesome-swiper是3.1.3版本的 第一步： 在项目中使用 npm install vue-awesome-swiper --save 如果要指定我的版本就用 npm install vue-awesome-swiper@3.1.3
阅读全文
摘要：Element-UI：一套为开发者、设计师和产品经理准备的基于 Vue 2.0的桌面组件库。 官网地址：https://element.eleme.io/#/zh-CN 1. 基于命令行方式手动安装 安装依赖包 npm i element-ui -S 导入 Element-UI 相关资源 操作： 2
阅读全文
摘要：1. Vue脚手架的基本用法 Vue脚手架用于快速生成 Vue项目基础框架，其官网地址为：https://cli.vuejs.org/zh/ 使用步骤 安装3.x版本的Vue脚手架： 2. 基于3.x版本的脚手架创建Vue项目 3. vue脚手架生成的项目结构分析 4. vue脚手架自定义配置 1.
阅读全文
摘要：效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
阅读全文
摘要：https://v3.cn.vuejs.org/guide/transitions-overview.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- v3.0 --> <script src
阅读全文
摘要：https://v3.cn.vuejs.org/guide/component-custom-events.html 可以通过 emits 选项在组件上定义发出的事件。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></tit
阅读全文
摘要：1. 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 2. 替换数组（生成新的数组） filter() concat() slice() <!DOCTYPE html> <html> <head> <meta
阅读全文
摘要：1. 过滤器的作用是什么？ 格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等。 2. 定义过滤器 3. 过滤器的使用 4. 局部过滤器
阅读全文
摘要：看文档：https://v3.cn.vuejs.org/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter 基本例子 计算属性 <!DOCTYPE html> <html> <head> <meta cha
阅读全文
摘要：文档： https://v3.cn.vuejs.org/guide/template-syntax.html 原始HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue
阅读全文
摘要：文档：https://v3.cn.vuejs.org/guide/introduction.html 声明式渲染 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.min.
阅读全文
摘要：数据与方法 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 <!DOCTYPE html> <html> <head> <meta charset="
阅读全文
摘要：vue官网介绍里面的练习 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"
阅读全文
摘要：国内： https://www.vue365.cn/ https://github.com/opendigg/awesome-github-vue 国外： https://github.com/vuejs/awesome-vue#minus-plus-input https://github.com
阅读全文
