vue
文章平均质量分 53
这次又写信给哪位
这个作者很懒,什么都没留下…
展开
-
取消Fixed的横向固定
需要取消横向固定的元素<el-menu :style="{left:leftSize+'px}"> data() { return { //aside动态左移,取消fixed横向固定 leftSize: 110 } }, mounted() { window.addEventListener('scroll', this.leftStyle, true) }, methods: { leftStyle() { this.lef原创 2021-02-26 16:22:26 · 276 阅读 · 0 评论 -
axios
一、了解方式一:传统的Ajax是基于XMLHttpRequest(XHR)但是由于配置和调试方式非常混乱; 编码蛋疼方式二:jQuery-Ajax相对传统Ajax非常好用,但是jQuery的代码1w+行,Vue的代码1W+行,为了在Vue中使用ajax,而引入JQuery,得不偿失。方式三:Vue-resource官方在Vue1.x推出Vue-Resource插件,它的体积相对于jQuery小很多,并且是官方推出的,但是在Vue2.x推出后,Vue-Re...原创 2021-02-10 01:49:20 · 102 阅读 · 0 评论 -
Vuex
一、概念和作用解析官方文档:https://vuex.vuejs.org/zh/Vuex:Vuex是一个专门为vue.js开发的状态管理模式 采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生改变;状态管理:把需要多个组件共享的变量全部存储在一个对象里; 这个对象放在顶层的Vue实例中,让其他组件可以使用;一般需要管的状态:用户的登录状态、头像、地理位置等等 商品的收藏、购物车的物品等等二、基本使用npm instal...原创 2021-02-09 19:08:26 · 129 阅读 · 0 评论 -
Promise
一、介绍和基本使用是ES6的新特性; 是异步编程的解决方案 避免ajax异步请求导致回调函数嵌套太深,陷入回调地狱原创 2021-02-07 23:35:10 · 94 阅读 · 0 评论 -
Vue-Router
目录安装使用在main.js中挂载路由配置路由的默认路径修改为history模式router-link的其他属性补充在代码中跳转路由Vue-Router动态路由的使用打包文件的解析路由懒加载的使用路由的嵌套使用是Vue.js官方的路由插件,是和vue深度集成的,适用于构建单页面应用。安装npm install vue-router --save使用导入路由对象 创建路由实例 在Vue实例中挂载路由实例在src下创建router文件原创 2021-02-07 16:56:38 · 127 阅读 · 0 评论 -
Vue-CLI脚手架
一、介绍和安装CLI:Command-Line-Interface(命令行界面),俗称脚手架。Vue CLI是一个官方发布的vue.js项目脚手架。使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。API文档:https://cli.vuejs.org/zh/guide/installation.html使用前提:Node,所以需要提前安装node.js(8.9以上版本)全局安装:npm install -g @vue/cli# ORy...原创 2021-02-04 17:01:42 · 103 阅读 · 0 评论 -
webpack
一、webpack的安装原创 2021-02-03 23:45:17 · 654 阅读 · 2 评论 -
Vue模块化
一、模块化的必要性不模块化可能出现的问题:全局变量命名冲突的问题(多人开发,多个js文件); js文件的引用顺序会造成影响;模块化的雏形://小明;var moduleA = (function () { const name = '小明'; const age = 20; var obj = {}; function sum(num1, num2) { return num1 + num2; } let...原创 2021-02-02 18:33:51 · 103 阅读 · 0 评论 -
Vue组件化开发入门
1、组件化思想组件化是Vue.js中的重要思想。 它提供了一种抽象,让我们可以开发出一个个独立的可复用的小组件来构造我们的应用。 任何的应用都会被抽象成一颗组件树。 2、组件的使用创建组件构造器:Vue.extend() 注册组件:Vue.component(); 使用组件<div id="demo"> <my-cpn></my-cpn> <my-cpn></my-cpn>...原创 2021-02-02 17:17:30 · 123 阅读 · 0 评论 -
v-model表单绑定
Vue中使用v-model指令来实现表单元素和数据的双向绑定。1、基本使用<div id="demo"> <label> <input type="text" v-model="message" @focusout="focusOut"> {{message}} </label></div><script> let vm = new Vue({ ...原创 2021-01-30 17:26:15 · 172 阅读 · 0 评论 -
js高阶函数的使用
1、fori拿到索引值 fori1() { /*i是索引值*/ for (let i in this.books) { console.log(i) console.log(this.books[i]) } },直接拿到数组的元素 fori2...原创 2021-01-29 21:55:28 · 133 阅读 · 0 评论 -
数组中的响应式的方法
<div id="demo"> <ul> <li v-for="(item,index) in letters":key="index">{{item}}</li> </ul> <!-- 是响应式的 --> <button @click="btn1">push添加元素</button> <br> <!-- 不是响应式的 -->.原创 2021-01-29 17:21:21 · 130 阅读 · 0 评论 -
v-for
1、v-for遍历数组<div id="demo"> <ul> <li v-for="i in names">{{i}}</li> </ul> <!-- 使用下标值(索引值) --> <ul> <li v-for="(item,index) in names">{{index+1}} : {{item}}</li> &...原创 2021-01-29 16:43:42 · 251 阅读 · 1 评论 -
Vue入门
1、Vue的安装<!-- 开发环境版本,包含了用帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本,优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>...原创 2021-01-29 16:12:10 · 85 阅读 · 0 评论 -
v-if、v-else-if、v-else
可以根据表达式的值,在DOM中渲染或销毁元素或组件。<div id="demo"> <h2 v-if="score>90">{{ message1 }}</h2> <h2 v-if="isShow()">{{ message2 }}</h2></div><script> let vm = new Vue({ el: '#demo', data: {原创 2021-01-29 16:10:55 · 87 阅读 · 0 评论 -
v-show的使用
v-show和v-if的用法十分相似,也是用于一个元素是否渲染。1、对比v-if为false时,压根不会有对应的元素在DOM中,而v-show为false时,仅仅是将元素的display属性设置为none而已。2、选择需要在显示与隐藏之间切换的很频繁的元素使用v-show,仅仅有一次切换的,或者切换很少的,使用v-if...原创 2021-01-29 16:04:26 · 1409 阅读 · 0 评论 -
v-on事件监听
目录一、时间监听二、基本使用三、参数传递问题四、v-on的修饰符作用一、时间监听作用:绑定事件监听器 缩写:@ 预期:Function | Inline Statement | Object 参数:event二、基本使用<div id="demo"> <h2>{{ counter }}</h2> <button v-on:click="counter++">+</button> .原创 2021-01-28 23:15:26 · 283 阅读 · 0 评论 -
对象字面量的增强写法
1、属性的增强写法<script> //属性的增强写法 const name1 = 'rocke'; const age1 = '22'; //ES5的写法 const obj = { name:name1, age:age1, } console.log(obj); //ES6的写法 const obj2 = { name1, age1, ...原创 2021-01-28 18:43:52 · 76 阅读 · 0 评论 -
const的使用和注意
一、使用1、使用const修饰的标识符为常量。2、当我们修饰的标识符不会被再次赋值的时候,我们可以使用const来保证数据的安全性。3、开发中优先使用const,只有需要改变某一个标识符的使用才使用let。二、注意事项1、const修饰的标识符被赋值后,不可以再次修改。2、在使用const定义标识符时,必须进行赋值。3、常量的含义是指向的对象(地址)不能修改,但可以改变对象的内部属性。...原创 2021-01-28 18:24:51 · 173 阅读 · 0 评论 -
块级作用域let和var
1、作用域(1)变量作用域:变量在什么范围内是可用的。(2)没有块级作用域引起的问题:if的块级:<script> { if (true) { var name = 'rocke'; } fuc = function () { console.log(name); } } name='cobe' fuc()</script&原创 2021-01-28 18:15:28 · 109 阅读 · 0 评论 -
computed-计算属性
1、computed基本使用<div id="demo"> <!--其他方法 --> <h2>{{ firstName + ' ' + lastName }}</h2> <h2>{{ firstName }} {{ lastName }}</h2> <h2>{{ getName() }}</h2> <!--使用计算属性 --> ...原创 2021-01-28 17:16:23 · 114 阅读 · 0 评论 -
v-bind-动态绑定
1、基本使用动态绑定属性<div id="demo"> <img v-bind:src="url" alt=""> <a v-bind:href="url2">百度一下</a></div><script> let vm = new Vue({ el: '#demo', data: { url2:'http://www.baidu....原创 2021-01-27 23:30:07 · 111 阅读 · 0 评论