随笔分类 -  VUE学习

vue路由参数传递
摘要:https://blog.csdn.net/crazywoniu/article/details/80942642 阅读全文

posted @ 2021-07-09 15:50 代码改变世界001 阅读(27) 评论(0) 推荐(0)

vue路由
摘要:1、安装vue-router npm install vue-router --save 2、使用 import Vue from 'vue' import VueRouter from 'vue-router'// 导入路由插件 import Home from '../views/Home.vu 阅读全文

posted @ 2021-07-09 15:40 代码改变世界001 阅读(84) 评论(0) 推荐(0)

前端模块化开发
摘要:1、模块化规范CommonJS、AMD、CMD、Modules(ES6)。 2、CommonJS 导出:module.exports = {} 导入:require() 3、ES6模块化: 导出:export {} 导出:export var name = '' 导出:export function 阅读全文

posted @ 2021-07-08 10:15 代码改变世界001 阅读(65) 评论(0) 推荐(0)

vue中使用slot
摘要:1、作用:使组件具有扩展性。插槽内展示的东西由使用者决定。 2、如何封装:抽取共性,保留不同。 3、<slot></slot> 4、默认值:<slot><button></button></slot>,如果引用的地方传了别的东西就会覆盖掉,没传就是默认值。 5、具名插槽:给插槽起名字,替换的时候根据 阅读全文

posted @ 2021-07-08 08:54 代码改变世界001 阅读(156) 评论(0) 推荐(0)

vue父子组件访问方式
摘要:1、父组件访问子组件:this.$children,拿到所有子组件的集合对象,通过这个对象访问子组件的方法或者属性。用的少。 2、父组件访问子组件:this.$refs,用的多。 要点: 组件上加ref="aaa" this.$refs.aaa 3、子组件访问父组件:this.$parent,基本不 阅读全文

posted @ 2021-07-07 19:07 代码改变世界001 阅读(93) 评论(0) 推荐(0)

vue子组件改变父组件值--写法2
摘要:1、父:要点 正常父传子:msg="oldValue" 正常子接父@iClick="yClick" <template> <div id="app"> <HelloWorld @iClick="yClick" :msg="oldValue"/> </div> </template> <script> 阅读全文

posted @ 2021-07-07 18:56 代码改变世界001 阅读(72) 评论(0) 推荐(0)

vue子组件改变父组件值--写法1
摘要:1、父:要点 正常父传子:msg="oldValue" 正常子接父@iClick="yClick" <template> <div id="app"> <HelloWorld @iClick="yClick" :msg="oldValue"/> </div></template><script>im 阅读全文

posted @ 2021-07-07 18:46 代码改变世界001 阅读(103) 评论(0) 推荐(0)

vue父子组件通信
摘要:1、有一些数据需要从上层传递到下层,这个时候是不会让子组件去发送网络请求的,而是直接让父组件将数据传递给子组件。 2、父组件向子组件传递数据,通过props属性。 父 子 3、子组件向父组件传递数据,通过自定义事件$emit。 子,通过自定义事件触发,事件名iClick。 父,通过@iClick接收 阅读全文

posted @ 2021-07-07 17:18 代码改变世界001 阅读(46) 评论(0) 推荐(0)

VUE组件化思想
摘要:1、它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。 2、任何应用都会被抽成一个组件树。 3、尽可能将页面拆分成一个个小的、可复用的组件,这样我们的代码更加方便组织管理,并且扩展性也更强。 4、组件使用: 创建组件构造器。 注册组件。 使用组件。 5、全局组件和局部组件。 阅读全文

posted @ 2021-07-07 13:55 代码改变世界001 阅读(196) 评论(0) 推荐(0)

vue中v-model的使用
摘要:1、数据双向绑定。其实就是两个指令的集合。v-bind:value=""和v-on:input=""。 2、单选多选时v-model都是绑定同一个变量。 3、值绑定: <label v-for="item in list" :for="item" :key="item"> <input type=" 阅读全文

posted @ 2021-07-07 10:34 代码改变世界001 阅读(576) 评论(0) 推荐(0)

vue数组中哪些方法是响应式的
摘要:push() 在数组最后元素中追加元素。 pop() 删除数组最后一个元素。 shift() 删除数组中第一个元素。 unshift() 在数组前面元素中追加元素。 splice() 删除、插入、替换元素。 sort() 排序。 reverse() 反转。 阅读全文

posted @ 2021-07-07 09:42 代码改变世界001 阅读(153) 评论(0) 推荐(0)

vue中v-for的使用
摘要:1、遍历数组: <li v-for="(item, index) in list" :key="index">{{ index + 1}} -- {{ item }}</li> 2、遍历对象: <li v-for="(value, key) in obj" :key="key">{{ value } 阅读全文

posted @ 2021-07-07 09:30 代码改变世界001 阅读(139) 评论(0) 推荐(0)

vue中v-if与v-show的区别以及使用场景
摘要:区别 1.手段:v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式,block为显示,none为隐藏; 2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切 阅读全文

posted @ 2021-07-07 09:05 代码改变世界001 阅读(567) 评论(1) 推荐(0)

VUE事件监听
摘要:1、使用v-on指令,缩写为@。 2、参数使用: 如果方法需要参数,而调用的时候没有传,就会默认传入浏览器的event对象。 需要event时,入参的时候加上$event就可以。 入参时如果不是基本类型的话,传入的就是一个对象。 3、v-on修饰符: .stop阻止事件冒泡。 .prevent阻止默 阅读全文

posted @ 2021-07-07 09:00 代码改变世界001 阅读(224) 评论(0) 推荐(0)

VUE简单指令
摘要:1、v-once:数据只展示一次,之后改变不展示。(一般不用) 2、v-html:html标签数据会解析好再展示。 3、v-text:展示数据。(一般不用) 4、v-pre:展示数据以原来的格式展示。 5、v-cloak:斗篷,在div中加。在数据加载完后,vue会删除该属性,做隐藏用。 [v-cl 阅读全文

posted @ 2021-07-06 14:56 代码改变世界001 阅读(39) 评论(0) 推荐(0)

VUE的options
摘要:1、options是什么:选项或者构造选项,是在创建vue实例时传入的参数,是一个对象。 2、通过 new Vue(options) 来创建出一个 Vue实例 ,也称为 Vue对象 ,该 Vue实例 封装了操作元素视图的所有操作,可通过 Vue实例 来轻松操作对应区域的视图。 3、options包含 阅读全文

posted @ 2021-07-06 11:30 代码改变世界001 阅读(410) 评论(0) 推荐(0)

理解VUE中的MVVM
摘要:1、M(model):模型对像:指的是构成界面内容的相关数据。 2、V(view):视图对象:指的是给用户或者开发者展示数据的界面。 3、VM(viewmodel):视图模型对象:是view与model之间的桥梁。 4、绑定器:声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆 阅读全文

posted @ 2021-07-06 11:00 代码改变世界001 阅读(509) 评论(0) 推荐(0)

初识VUE
摘要:1、let定义变量、const定义常量。var没有块级作用域,慎用。 2、命令式编程: 3、申明式编程:数据和页面完全分离。 4、创建vue实例,可以传入一些options: {},options可以包含一些属性,el:该属性决定了vue对象挂载到哪一个元素上,data:通常会存储一些数据,这些数据 阅读全文

posted @ 2021-07-06 10:48 代码改变世界001 阅读(40) 评论(0) 推荐(0)

导航