随笔分类 - Vue
前端技术
摘要：Vue2入门之超详细教程十四-自定义指令 1、简介 定义语法 分为局部自定义指令和全局自定义指令 配置对象中常用的3个回调 bind：指令与蒜素被插入成功时调用 inserted：指令所在元素被插入页面时被调用 update：指令所在模板结构被重新解析时调用 备注： 指令定义时不加v-，但使用时要加
阅读全文
摘要：Vue2入门之超详细教程十四-常用内置指令集合 1、简介 常用内置指令集合 v-bind：单向绑定解析表达式，可简写为:xxx v-model：双向数据绑定 v-for：遍历数组/对象/字符串 v-on：绑定时间监听，可简写为@ v-if：条件渲染（动态控制节点是否存在） v-else：条件渲染（动
阅读全文
摘要：Vue2入门之超详细教程十六-过滤器 1、简介 过滤器 定义：对要显示的数据进行特点格式化后再显示（适用于一些简单逻辑的处理） 语法： 1.注册过滤器：Vue.filter(name,callback)或 new Vue(filters:{}) 2.使用过滤器：{{ xxx | 郭琪琪名}} 或 v
阅读全文
摘要：Vue2入门之超详细教程十五-收集表单数据 1、简介 收集表单数据 若：，则v-model收集的是value值，用户输入的就是value值。 若：，则v-model收集的是value值，且要给标签配置value值。 若： 1.没有配置input的value属性，name收集的就是checked（勾选
阅读全文
摘要：Vue2入门之超详细教程十四-列表的过滤和排序 1、简介 学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。 2、列表操作 1. 列表过滤 persons:[ {id:'001',name:'马冬梅',age:19,sex:'女'}, {id:'0
阅读全文
摘要：Vue2入门之超详细教程十三-key的作用与原理 1、简介 React、Vue中的key有什么作用？ 1.虚拟DOM中key的作用： key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM]，随后Vue进行[新虚拟DOM]的差异比较，比较规则如下：
阅读全文
摘要：1、简介 V-for指令: 1. 用于展示列表数据 2. 语法：v-for=”(item,index) in xxx ”:key=”yyy” 3. 可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少) 学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知
阅读全文
摘要：1、简介 条件渲染： 1. v-if 写法： (1) v-if=”表达式” (2) v-else-if=”表达式” (1) v-else=”表达式” 适用于：切换频率较低的场景 特点：不展示的DOM元素直接被移除 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被”打断
阅读全文
摘要：1、简介 绑定样式： 1. class样式 写法：class=”xxx” xxx可以是字符串、对象、数组 字符串写法适用于：类名不确定，要动态获取 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用 2. Style样式 :
阅读全文
摘要：1、简介 监视属性watch： 1.当被监视的属性变化时，回调函数自动调用，进行相关操作 2.监视的属性必须存在，才能进行监视！！ 3.监视的两种写法： (1) new Vue时传入watch配置 (2) 通过vm.$watch监视 深度监测： (1) Vue中的watch默认不监测对象内部值的改变
阅读全文
摘要：1、简介 计算属性： 1.定义：要用的属性不存在，要通过已有的属性计算得来 2.原理：底层借助Object.defineproperty方法提供的getter和setter 3.Get函数什么时候执行？ (1) 初次读取时会执行一次 (2) 当依赖的数据发生改变时会被再次调用 4.优势：与metho
阅读全文
摘要：1、简介 事件的基本使用： （1）使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名 （2）事件的回调需要配置在methods对象中，最终会在vm上 （3）methods中配置的函数，不要用箭头函数！否则this就不是vm了 （4）methods中配置的函数，都是被Vue所管理的函数，th
阅读全文
摘要：1、简介 这章有点长，希望大家可以耐心看完。在了解数据代理之前需要先了解Object.defineProperty,Object.defineProperty就是给一个对象添加属性用的。数据代理，通过一个对象代理对另一个对象中数据的操作（读/写）。 Vue中的数据代理： 通过vm对象来代理data对
阅读全文
摘要：1、简介 Data与el的2中写法： el有两种写法 (1) new Vue时配置el属性 (2) 先创建Vue实例，随后在通过vm.$mount(‘#root’)指定el的值 Data也有两种写法 (1) 对象式 (2) 函数式，搭配组件时，data必须使用函数式 一个重要的原则 由Vue管理的函
阅读全文
摘要：1、简介 数据绑定分为单向数据绑定和双向数据绑定，上一章节中出现的v-bind就属于单向数据绑定。 单向绑定(v-bind)：数据只能从data流向页面 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data 备注：双向绑定一般用在表单类元素上（如：input、selec
阅读全文
摘要：1、简介 模板语法就是按照固定的模板去书写代码，分为插值语法和指令语法。 差值语法： 功能：用于解析标签体内容 写法：{{xxxx}},xxx是js表达式，且可以读取到data中的所有属性。 指令语法： 功能：用于解析标签(包括：标签属性、标签体内容、绑定事件) 写法：v-bind:href=”xx
阅读全文
摘要：1、简介 话说盘古开天~，咳咳 放错片了，学习任何语言都要有这么一个仪式，那就是hello world，我们从hello vue开始认识vue是怎么工作的。 学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。 2、Hello Vue 1. 单纯的H
阅读全文
摘要：1、简介 Vue.js（通常被简称为 Vue）是一个用于构建用户界面的渐进式JavaScript框架。它被设计为易于逐步采用，因此可以逐渐应用到现有项目中，也可以作为新项目的基础。Vue具有响应式数据绑定和组件化的架构，使开发者可以更加高效地构建交互式和可重用的Web界面。Vue还拥有一些特性，例如
阅读全文
