vue学习记录
关注
分享
扫一扫
文章平均质量分 61
从0 - 1 学习前端技术
zmm_mohua
这个作者很懒，什么都没留下…
展开
-
学习之前言
前言在本科的时候写前端还是用 html，css，jsp 这些技术，现在已经有了套成熟的框架 Vue & React 等，因此本菜准备学习一下Vue，涨涨见识，嘿嘿嘿接下来的文章和内容是对自己之前学习的 vue 的相关知识进行一下总结。（ps：当时准备边学边总结，但是emmmmmmm，被搁置了（人的懒惰性呀）。趁着现在有时间，就将他们整理一下吧，以后也好回顾。不能偷懒呀!!!...原创 2022-02-19 13:57:46 · 218 阅读 · 0 评论
-
Vue -- 单文件组件
Vue – 单文件组件代码School.vue<template><!-- 组件的结构 --> <div class="demo"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div></template><script>//组件交互相关的代码（数据、方法等）原创 2022-02-21 11:12:55 · 109 阅读 · 0 评论 -
Vue -- 非单文件组件
Vue – 非单文件组件小结Vue中使用组件的三大步骤： 一、定义组件（创建组件） 二、注册组件 三、使用组件（写组件标签） 一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和 new Vue(options)时传入的哪个options几乎一样，但也有点区别： 1、el不要写，为什么？---最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器 2、data必须写成函数，为什么？ ---避免组件被复用原创 2022-02-21 11:13:18 · 276 阅读 · 0 评论 -
Vue -- 生命周期
Vue – 生命周期小结生命周期： 1、又名：生命周期回调函数、生命周期函数、生命周期钩子 2、是什么：Vue在关键时刻帮我们调用一些特殊名称的函数 3、生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的 4、生命周期函数中的this指向vm 或 组件实例对象 常用的生命周期钩子： 1、mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】 2、beforeDestroy：清除定时器、绑定自定义事件、取消订阅消息原创 2022-02-21 11:13:33 · 92 阅读 · 0 评论 -
Vue -- 自定义指令
Vue – 自定义指令小结需求1、定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍需求2、定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点自定义指令总结： 一、定义语法： 1）局部指令： new Vue({directives:{指令名:配置对象}}) 或 new Vue({directives{指令名:回调函数}}) 2）全局指令： Vue.directi原创 2022-02-21 11:13:41 · 106 阅读 · 0 评论 -
Vue -- 内置指令
Vue – 内置指令小结之前学过的指令： v-bind：单向绑定解析表达式，可简写为 :xxx v-model：双向数据绑定 v-for：遍历数组/对象/字符串 v-on：绑定事件监听，可简写为 @ v-if：条件渲染（动态控制节点是否存在） v-else：条件渲染（动态控制节点是否存在） v-show：条件渲染（动态控制节点是否展示） v-text指令： 1、作用：向其所在的节点中渲染文本内容 2、与插值语法的区别：v-原创 2022-02-21 11:13:48 · 182 阅读 · 0 评论 -
Vue - 过滤器
Vue - 过滤器小结过滤器： 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理） 语法： 1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}} 2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名" 备注： 1、过滤器也可以接收额外的参数、多个过滤器也可以串联 2、并没有改变原本的数据，是产生新的对应的数据代码原创 2022-02-21 11:13:55 · 124 阅读 · 0 评论 -
Vue -- 收集表单数据
Vue – 收集表单数据小结收集表单数据： 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值 若：<input type="checkbox"/> 1、没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） 2、原创 2022-02-21 11:14:03 · 337 阅读 · 0 评论 -
Vue -- 监视数据
Vue – 监视数据小结Vue监视数据的原理： 1、Vue会监视data中所有层次的数据 2、如何检测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据 1）对象中后追加的属性，Vue默认不做响应式处理 2）如需给后添加的属性做响应式，请使用如下API： Vue.set(target,propertyName/index,value) 或 vm.$set(target,prop原创 2022-02-21 11:14:12 · 201 阅读 · 0 评论 -
Vue -- 列表渲染
Vue – 列表渲染小结v-for 指令： 1、用于展示列表 2、语法：v-for="(item,index) in xxx" :key="yyy" 3、可遍历：数组、对象、字符串（用得很少）、指定次数（用得很少）react、Vue中的key有什么作用？（key的内部原理） 1、虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】， 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差原创 2022-02-21 11:14:19 · 280 阅读 · 0 评论 -
Vue -- 条件渲染
Vue – 条件渲染小结条件渲染： 1、v-if 写法： 1）v-if="表达式" 2）v-else-if="表达式" 3）v-else="表达式" 适用于：切换频率较低的场景 特点：不展示的DOM元素直接被移除 注意：v-if 可以和 v-else-if、v-else 一起使用，但要求结构不能被”打断" 2、v-show 写法：v-show="表达式" 适用于：切换原创 2022-02-22 10:39:36 · 127 阅读 · 0 评论 -
Vue -- 绑定样式
Vue – 绑定样式小结绑定样式： 1、class样式 写法：class="xxx" xxx可以是字符串、对象、数组 字符串写法适用于：类名不确定，要动态获取 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用 2、style样式 :style="{fontSize:xxx}"，其中xxx是动态值 :style="[a,b]"，其中a，b是样式对象代码原创 2022-02-22 10:39:51 · 286 阅读 · 0 评论 -
Vue -- 监视属性
Vue – 监视属性小结监视属性watch： 1、当被监视的属性变化时，回调函数自动调用，进行相关操作 2、监视的属性必须存在，才能进行监视 3、监视的两种写法： 1）new Vue 时传入 watch 配置 2）通过 vm.$watch 监视 深度监视： 1）Vue 中的 watch 默认不监测对象内部值的修改（一层） 2）配置 deep:true 可以监测对象内部值的改变（多层） 备注： 1）Vue 自身可以监测对象内部原创 2022-02-19 15:50:28 · 249 阅读 · 0 评论 -
Vue -- 计算属性
Vue – 计算属性小结计算属性： 1、定义：要用的属性不存在，要通过已有属性计算得来 2、原理：底层借助了 Object.defineproperty 方法提供的 getter 和 setter 3、get 函数什么时候执行？ 1）初次读取时会执行一次 2）当依赖的数据发生改变时会被再次调用 4、优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便 5、备注： 1）计算属性最终会出现在 vm上，直接读取使用即可原创 2022-02-19 15:35:07 · 259 阅读 · 0 评论 -
Vue -- 事件处理
Vue – 事件处理小结事件的基本使用： 1、使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名； 2、事件的回调需要配置在 methods 对象中，最终会在 vm 上； 3、methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm，而是 window； 4、methods 中配置的函数，都是被 Vue 管理的函数，this 的指向是 vm 或 组件实例对象； 5、@click="demo" 和 @click="demo($event)原创 2022-02-19 15:12:49 · 285 阅读 · 0 评论 -
Vue -- 数据代理
Vue – 数据代理小结数据代理：通过一个对象代理另外一个对象中属性的操作（读/写）1、Vue 中的数据代理： 通过 vm 对象来代理 data 对象中属性的操作（读/写）2、Vue 中数据代理的好处： 更加方便地操作 data 中的数据3、基本原理： 通过 Object.defineProperty() 把 data 对象中所有属性添加到 vm 上。 为每一个添加到 vm 上的属性，都指定了一个 getter/setter 在 getter/setter 内部去操作原创 2022-02-19 14:55:01 · 157 阅读 · 0 评论 -
Vue 中的 MVVM 模型
Vue 中的 MVVM 模型小结MVVM 模型： M：模型（Model）：对应data中的数据 V：视图（View）：模板 VM：视图模型（ViewModel）：Vue实例对象观察发现： 1、data 中所有的属性，最后都出现在了 vm 身上 2、vm 身上所有的属性 及 Vue原型上所有的属性，在 Vue 模板中都可以直接使用代码<!DOCTYPE html><html> <head>原创 2022-02-19 14:46:24 · 518 阅读 · 0 评论 -
Vue -- el 与 data 的两种写法
Vue – el 与 data 的两种写法小结data 与 el 的两种写法： 1、el 的两种写法： 1）new Vue 时候配置 el 属性 2）先创建 Vue 实例，随后再通过 vm.$mount('#root') 指定 el 的值 2、data 的两种写法： 1）对象式 2）函数式 如何选择：目前哪种写法都可以，以后学到组件时，data必须使用函数式，否则会报错 3、一个重要的原则： 由原创 2022-02-19 14:40:27 · 244 阅读 · 0 评论 -
vue 数据绑定
vue 数据绑定小结v-model 只能应用在表单类元素（输入类元素）上Vue 中有2种数据绑定的方式： 1、单向绑定(v-bind)：数据只能从 data 流向页面 2、双向绑定(v-model)：数据不仅能从 data 流向页面，还可以从页面流向 data 备注： 1、双向绑定一般都应用在表单类元素上（如：input，select 等） 2、v-model:value 可以简写为 v-model，因为 v-model 默原创 2022-02-19 14:34:02 · 167 阅读 · 0 评论 -
vue模板语法
vue 模板语法小结Vue模板语法有两大类：1、插值语法： 功能：用于解析标签体内容 写法：{{xxx}}，xxx是 js 表达式，且可以直接读取到 data 中的所有属性2、指令语法 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。） 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式且可以直接读取到data中的所有属性 备注：Vue中有很多的指令，且形式都是： v-???，这里只是拿 v-bind原创 2022-02-19 14:24:14 · 88 阅读 · 0 评论 -
初识Vue
初始Vueps：第一次见面呀，vue小结想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；new Vue({ el:'#root', //el(element)用于指定当前Vue实例为哪个容器服务，值通常为css选择器 })root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；root容器里的代码被称为【Vue模板】；Vue实例和容器是一一对应的；真实开发中只有一个Vue实例，并且会配合着组件一起使用；{{xxx}}中的xxx要写js表达式，且xxx可以原创 2022-02-19 14:14:49 · 357 阅读 · 0 评论