Vue
文章平均质量分 61
Vue
在下,杨江河
有问题可以私信,QQ1016500443
展开
-
Vue53 消息订阅与发布
/ console.log('有人发布了hello消息,hello消息的回调执行了',msgName,data)console.log('我是School组件,收到了数据',data)接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的。最好在beforeDestroy钩子中,用。一种组件间通信的方式,适用于。回调留在A组件自身。原创 2024-08-25 22:20:07 · 423 阅读 · 0 评论 -
Vue52 todolist事件总线
MyHeader.vueMyItem.vueMyList.vueApp.vuemain.js原创 2024-08-18 22:23:36 · 902 阅读 · 0 评论 -
Vue51 全局事件总线
接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的。最好在beforeDestroy钩子中,用$off去解绑。'我是School组件,收到了数据'一种组件间通信的方式,适用于。回调留在A组件自身。原创 2024-08-18 20:07:12 · 696 阅读 · 0 评论 -
Vue50 todolist自定义事件版本
MyHeader.vueMyItem.vueMyList.vueApp.vue原创 2024-08-17 11:30:52 · 1042 阅读 · 0 评论 -
Vue49 组件的自定义事件
子组件 ===> 父组件使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中绑定自定义事件:或......mounted(){若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。this.$emit('atguigu',数据)解绑自定义事件组件上也可以绑定原生DOM事件,需要使用native修饰符。注意:通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时,回调要么配置在methods中。原创 2024-08-17 11:16:36 · 594 阅读 · 0 评论 -
Vue48 TodoList浏览器本地存储版本
/由于todos是MyHeader组件和MyFooter组件都在使用,所以放在App中(状态提升)//勾选or取消勾选一个todo。//清除所有已经完成的todo。//添加一个todo。//删除一个todo。//全选or取消全选。原创 2024-07-08 00:21:00 · 763 阅读 · 0 评论 -
Vue47 浏览器本地存储
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。 该方法接受一个键名作为参数,并把该键名从存储中删除。存储内容大小一般支持5MB左右(不同浏览器可能还不一样) 该方法接受一个键名作为参数,返回键名对应的值。 该方法会清空存储中的所有数据。原创 2024-07-07 23:56:56 · 592 阅读 · 0 评论 -
Vue46 TodoList案例
组件化编码流程: (1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。 (2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用: 1).一个组件在用:放在组件自身即可。 2). 一些组件在用:放在他们共同的父组件上(状态提升 (3).实现交互:从绑定事件开始。props适用于: (1).父组件 ==> 子组件 通信 (2).子组件 ==> 父组件 通信(要求父先给子一个函数)原创 2024-07-07 23:27:41 · 696 阅读 · 0 评论 -
Vue45 scope
App组件的style一般不加scope限制范围,一般写在App组件里的style对所有组件生效。要使用less,需要安装less-loader。限制css的作用范围。原创 2024-06-24 23:38:52 · 559 阅读 · 0 评论 -
Vue44 插件
/全局过滤器})//定义全局指令//指令与元素成功绑定时(一上来)},//指令所在元素被插入页面时},//指令所在的模板被重新解析时})//定义混入data() {return {x:100,y:200},})//给Vue原型上添加一个方法(vm和vc就都能用了)Vue.prototype.hello = ()=>{alert('你好啊')}原创 2024-06-24 22:23:19 · 177 阅读 · 0 评论 -
Vue43 混入
对于钩子函数,组件中的和混入中的都使用,优先调用混入中的。功能:可以把多个组件共用的配置提取成一个混入对象。对于data()中的数据,会使用组件中的数据。//引入一个hunhe。原创 2024-06-23 19:23:40 · 329 阅读 · 0 评论 -
Vue42 props配置
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。//接收的同时对数据:进行类型限制+默认值的指定+必要性的限制。//接收的同时对数据进行类型限制。功能:让组件接收外部传过来的数据。//name的类型是字符串。'我是一个尚硅谷的学生'//name是必要的。原创 2024-06-23 17:51:12 · 353 阅读 · 0 评论 -
Vue41 ref属性
/School组件的实例对象(vc)ref是Vue提供的获取组件的属性。//引入School组件。原创 2024-06-23 16:18:43 · 433 阅读 · 2 评论 -
Vue40 修改默认配置
## 在vue.config.js文件中,修改属性的值。原创 2024-06-23 14:00:26 · 221 阅读 · 0 评论 -
Vue39 使用VsCode在创建好的脚手架里写自己的单文件组件
ctrl+~打开VsCode的终端,原创 2024-06-23 10:41:16 · 345 阅读 · 0 评论 -
Vue38 安装脚手架 vue-cli ,并使用脚手架创建项目
1.‘vue’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。安装node.js并。原创 2024-06-22 21:09:27 · 324 阅读 · 0 评论 -
Vue37 一个重要的内置关系
button @click="showX">点我输出xconsole.log(Demo.prototype) //显示原型属性。console.log(d.__proto__) //隐式原型属性。//程序员通过显示原型属性操作原型对象,追加一个x属性,值为99。学校地址:{{address}}学校名称:{{name}}//阻止 vue 在启动时生成生产提示。//创建一个Demo的实例对象。//定义school组件。//定义一个构造函数。原创 2024-06-20 23:54:03 · 369 阅读 · 0 评论 -
Vue36 VueComponent构造函数
button @click="showName">点我提示学校名学校地址:{{address}}学校名称:{{name}}//定义school组件。//定义hello组件。原创 2024-06-19 00:51:05 · 374 阅读 · 0 评论 -
Vue35 非单一文件组件 组件的嵌套
h2>学校地址:{{address}}学生姓名:{{name}}学校名称:{{name}}学生年龄:{{age}}//阻止 vue 在启动时生成生产提示。//定义student组件。//定义school组件。'欢迎来到尚硅谷学习!//定义hello组件。//注册组件(局部)//注册组件(局部)原创 2024-06-17 21:41:22 · 230 阅读 · 0 评论 -
Vue34 非单文件组件 几个注意点
【代码】Vue34 非单文件组件 几个注意点。原创 2024-06-17 21:08:57 · 184 阅读 · 0 评论 -
Vue33 非单文件组件 基本使用
/ el:'#root', //组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。学生姓名:{{studentName}}学校名称:{{schoolName}}学校地址:{{address}}学生年龄:{{age}}{{name}}//第一步:创建student组件。//第一步:创建school组件。//第一步:创建hello组件。//第二步:全局注册组件。原创 2024-06-17 20:36:44 · 258 阅读 · 0 评论 -
Vue32 生命周期函数 原理图
生命周期函数 原理图原创 2024-06-16 15:52:09 · 103 阅读 · 0 评论 -
Vue31 生命周期
/Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted。//阻止 vue 在启动时生成生产提示。//通过外部的定时器实现(不推荐)原创 2024-03-02 09:50:49 · 249 阅读 · 0 评论 -
Vue30 自定义指令 函数式 对象式
/big函数何时会被调用?1.指令与元素成功绑定时(一上来)。2.指令所在的模板被重新解析时。//指令与元素成功绑定时(一上来)//指令所在的模板被重新解析时。//注意此处的this是window。//指令所在元素被插入页面时。//指令与元素成功绑定时(一上来)//指令所在的模板被重新解析时。//指令所在元素被插入页面时。原创 2024-02-23 17:31:39 · 401 阅读 · 0 评论 -
Vue29 v-pre指令
/阻止 vue 在启动时生成生产提示。原创 2024-02-23 11:43:26 · 250 阅读 · 0 评论 -
Vue28 v-once指令
/阻止 vue 在启动时生成生产提示。原创 2024-02-23 11:37:45 · 205 阅读 · 0 评论 -
Vue27 内置书签 v-cloak
/阻止 vue 在启动时生成生产提示。原创 2024-02-23 11:04:44 · 159 阅读 · 0 评论 -
Vue26 内置标签 v-text v-html
"+document.cookie>兄弟我找到你想要的资源了,快来!//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。原创 2024-02-20 16:12:36 · 574 阅读 · 0 评论 -
Vue25 过滤器
'YYYY年MM月DD日 HH:mm:ss''YYYY年MM月DD日 HH:mm:ss''YYYY年MM月DD日 HH:mm:ss'dayjs.min.js需要去。原创 2024-02-20 14:58:10 · 330 阅读 · 0 评论 -
Vue24 收集表单数据 实例
【代码】Vue24 收集表单数据 实例。原创 2024-02-18 16:14:33 · 444 阅读 · 0 评论 -
Vue23 数据监测总结
/ this.student.hobby.splice(0,1,'开车')// Vue.set(this.student.hobby,0,'开车')// Vue.set(this.student,'sex','男')//阻止 vue 在启动时生成生产提示。原创 2024-02-18 15:12:03 · 477 阅读 · 0 评论 -
Vue22 Vue监测数据改变的原理_数组
直接通过索引改变数组的值不生效,需要使用Vue封装好的以下方法,操作数组。// Vue.set(this.student,'sex','男')//阻止 vue 在启动时生成生产提示。原创 2024-02-18 12:00:15 · 585 阅读 · 0 评论 -
vue21 vue.set()方法
/ Vue.set(this.student,'sex','男')//阻止 vue 在启动时生成生产提示。原创 2024-02-05 16:22:14 · 432 阅读 · 0 评论 -
VUE20 列表排序
计算属性filPerons,当sortType的值改变时,对arr进行排序。//0原顺序 1降序 2升序。//判断一下是否需要排序。原创 2023-12-11 13:49:25 · 437 阅读 · 0 评论 -
Vue19 列表过滤
{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}以下代码使用了两种实现方式,监视属性和计算属性。当能用计算属性实现时,推荐使用计算属性。//用computed实现。//用watch实现。原创 2023-11-24 12:46:10 · 530 阅读 · 0 评论 -
vue2 识别页面参数中的html
vue2 识别页面参数中的html原创 2023-11-22 21:19:42 · 786 阅读 · 0 评论 -
Vue18 v-for指令 展示列表数据
【代码】Vue18 v-for指令 展示列表数据。原创 2023-10-22 10:59:02 · 327 阅读 · 0 评论 -
Vue17 条件判断
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。(2).v-else-if=“表达式”特点:不展示的DOM元素直接被移除。(3).v-else=“表达式”(1).v-if=“表达式”适用于:切换频率较低的场景。原创 2023-10-16 20:57:29 · 148 阅读 · 0 评论 -
Vue16 绑定css样式 style样式
【代码】Vue16 绑定css样式 style样式。原创 2023-10-15 20:57:10 · 288 阅读 · 0 评论 -
Vue15 计算属性VS监视属性(侦听属性)
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。但是如果想要实现当姓改变时,延迟一秒在改变姓名的值,则必须使用监视属性的写法。2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。原创 2023-10-14 16:41:38 · 210 阅读 · 0 评论