爱前端的小魏

天气案例（点击按钮可切换其他页面）

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

posted @ 2022-10-31 09:39 爱前端的小魏阅读(51) 评论(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 爱前端的小魏阅读(65) 评论(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 爱前端的小魏阅读(304) 评论(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 爱前端的小魏阅读(198) 评论(0) 推荐(0) 编辑

键盘事件

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

posted @ 2022-10-31 09:35 爱前端的小魏阅读(79) 评论(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 爱前端的小魏阅读(37) 评论(0) 推荐(0) 编辑

Vue---数据绑定（v-model）

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

posted @ 2022-09-21 19:24 爱前端的小魏阅读(85) 评论(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 爱前端的小魏阅读(94) 评论(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 爱前端的小魏阅读(37) 评论(0) 推荐(0) 编辑

触发点击事件方法，解除绑定事件，事件冒泡/捕获，阻止默认事件，事件委托

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box1 { width: 300px; height: 300px; background-color: red; } .box2 { wid 阅读全文

posted @ 2022-09-01 20:45 爱前端的小魏阅读(58) 评论(0) 推荐(0) 编辑

编码1