随笔分类 -  VUE

模拟数据监控(get和set)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 1.自动生成get和set好处 1.可以永远给下一层级找到get和set 2.更加简洁(自己写的get和set,修改值比较麻烦:vm.__data.na 阅读全文

posted @ 2022-12-07 20:44 爱前端的小魏 阅读(65) 评论(0) 推荐(0)

列表排序(监视和计算属性)
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 实现需求:模糊检索下列数据 1.收集用户的输入框的内容 2. 使用watch监视属性去监视keyWord的值(监视) 3.使用computed计算属性去实 阅读全文

posted @ 2022-12-05 21:23 爱前端的小魏 阅读(34) 评论(0) 推荐(0)

模糊查询(监视属性和计算属性实现)
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 实现需求:模糊检索下列数据 1.收集用户的输入框的内容 2. 使用watch监视属性去监视keyWord的值(监视) 3.使用computed计算属性去实 阅读全文

posted @ 2022-12-05 21:22 爱前端的小魏 阅读(76) 评论(0) 推荐(0)

过滤器的使用(filter)
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 过滤器: 定义:对要显示的数据进行特定格式化后在现实 语法: 1.注册过滤器:Vue.filter(name,callback)或new Vue{filt 阅读全文

posted @ 2022-12-05 21:21 爱前端的小魏 阅读(151) 评论(0) 推荐(0)

自定义命令(directive)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js"></script> </head> <body> <div id="root"> <!-- 1.定义一个v-big 阅读全文

posted @ 2022-12-05 21:20 爱前端的小魏 阅读(125) 评论(0) 推荐(0)

事件使用·
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../vue/vue.js"> </script> <div id="root"> <button v-on:click="showInf 阅读全文

posted @ 2022-10-31 09:41 爱前端的小魏 阅读(26) 评论(0) 推荐(0)

事件修饰符
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #passive{ width: 100px; height: 100px; background-color: #00FFFF; overflow 阅读全文

posted @ 2022-10-31 09:40 爱前端的小魏 阅读(82) 评论(0) 推荐(0)

数据绑定
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 一。单向双向数据绑定 1.单向数据绑定:页面上输入内容(页面上展示数据) 不出传入到Vue控件里。 2.双向数据绑定:页面上输入内容(页面上展示数据,) 阅读全文

posted @ 2022-10-31 09:40 爱前端的小魏 阅读(109) 评论(0) 推荐(0)

数据代理
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 数据代理:可以使用其他属性的属性值(通过vm来代理data对象中属性操作) 2.好处:方便操作data中数据 3.原理:通过Obj.definePrope 阅读全文

posted @ 2022-10-31 09:39 爱前端的小魏 阅读(45) 评论(0) 推荐(0)

天气案例(点击按钮可切换其他页面)
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 1.需求:点击button标签,可以来回切换“炎热”,“寒冬” 两种写法: 插值 <h1>今日天气{{inhot ? '炎热' : '寒冬'}}</h1> 阅读全文

posted @ 2022-10-31 09:39 爱前端的小魏 阅读(60) 评论(0) 推荐(0)

姓名案例(插值语法)
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- slice 截取长度(从第几位,到第几位) 第一种方法 插值语法:姓名:{{surname.slice(0,5 ) + '-' + lasname}} m 阅读全文

posted @ 2022-10-31 09:38 爱前端的小魏 阅读(70) 评论(0) 推荐(0)

深度监视(watch)
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 1.深度监视: 1.vue中的watch默认不检测对象内部值的改变 2.配置deep:true可以监测对象内部值的改变 备注: 1.vue自身可以监测对象 阅读全文

posted @ 2022-10-31 09:38 爱前端的小魏 阅读(311) 评论(0) 推荐(0)

计算属性(computed)以及getset使用
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./vue.js"></script> <!-- 计算属性(computed) 定义:要用的 阅读全文

posted @ 2022-10-31 09:36 爱前端的小魏 阅读(204) 评论(0) 推荐(0)

键盘事件
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 键盘事件 1.常用按键: 回车-enter, 删除-delete(捕获 删除 、 退格) 退出-esc(不能使用) 空格-space 换行-tab(只能配 阅读全文

posted @ 2022-10-31 09:35 爱前端的小魏 阅读(84) 评论(0) 推荐(0)

Object.defineProperty()方法
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 1.Object_defineProperty()的使用 Object.defineProperty(对象名称,属性名称,添加的属性) 增删改查Obje 阅读全文

posted @ 2022-09-21 19:25 爱前端的小魏 阅读(42) 评论(0) 推荐(0)

Vue---数据绑定(v-model)
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 一。单向双向数据绑定 1.单向数据绑定:页面上输入内容(页面上展示数据) 不出传入到Vue控件里。 2.双向数据绑定:页面上输入内容(页面上展示数据,) 阅读全文

posted @ 2022-09-21 19:24 爱前端的小魏 阅读(94) 评论(0) 推荐(0)

JS---初步使用Vue
摘要:二。使用vue 1.想使用vue,必须创建一个vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html中规范 3.root容器里的代码被称为【vue模板】 --> <body> <div id="root"> <h1>hello,{{name}}</h1> </div> <a hr 阅读全文

posted @ 2022-09-19 19:09 爱前端的小魏 阅读(102) 评论(0) 推荐(0)

JS---环境搭建
摘要:一.下载vue 链接:https://pan.baidu.com/s/1zi8_qdKluMhaGBknPvircA?pwd=8250 提取码:8250 二.正常运行后,控制台报出提示语 1.下载包 vue.js(开发) vue.min.js(生产) 解决控制台提示: 解决方法:Vue.config 阅读全文

posted @ 2022-09-19 19:07 爱前端的小魏 阅读(42) 评论(0) 推荐(0)

导航