- 博客(19)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 Vue学习笔记 组件的插槽slot
插槽slot子组件中加入标签，父组件调用子组件时，双标签的内容，就会复制到slot中app.component('global',{template:`<h3>global子组件开始</h3><slot></slot><h3>global子组件结束</h3>`}); <...
2021-03-17 11:24:31
191
原创 Vue学习笔记 组件间通过事件通讯
子组件调用父组件事件父组件在标签通过@add="父组件方法"添加一个响应事件，子组件通过emits声明引用父组件事件，子组件的方法通过 this.$emit('add') 调用父组件的某个事件（例如add）如果子组件不用emits声明，其实也可以调用，但控制台会打印警告父组件：methods:{addCounter(){this.counter+=1;}}<global:...
2021-03-17 11:23:10
142
原创 Vue学习笔记 单向数据流机制
单向数据流数据从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父组件传递过来的数据。如果要使用父组件传递过来的变量值，需要在组件内的数据项中声明一个变量，把父组件传递过来的变量赋值给内部变量，然后就可以随意修改了。Demo21.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-U...
2021-03-11 10:31:41
257
原创 Vue学习笔记 Non-props属性
Non-porps属性父组件向子组件传递参数的时候，子组件不写任何的接受方法，这个时候父组件就会直接把属性完全复制给子组件，子组件也是可以得到属性值的。注意：Non-porps属性会复制，props属性不会复制如果组件不是一个根节点，复制就会失效。在标签中使用父组件传入的属性通过$attrs可以在组件使用父组件传入的所有属性通过$attrs.style的形式（style是其中一个属性值名）可以使用其中一个属性注意：使用$attrs.style形式调用props属性，无法复制.
2021-03-11 10:24:04
258
原创 Vue学习笔记 -父组件向子组件传值
静态传值使用属性的方式，然后子组件使用props进行接收；静态传递的只能是字符串类型Stringconstapp=Vue.createApp({template:`<div>静态传值</div><globalname="静态传值示例"/><br>`});app.component('global',{...
2021-03-09 09:20:12
105
原创 Vue3.0学习笔记-全局组件和局部组件
根组件Vue.createApp实际是建立一个Vue的实例，也就是相当于第一个根组件全局组件及组件复用性Vue中的组件是页面中的一部分，通过层层拼装，最终形成了一个完整的组件弊端：只要定义了，处处可以使用，性能不高，但是使用起来简单app.component('website',{ template:` <h2>Website组件</h2>`})app.component('describe',{ template:` <h2>D
2021-03-05 08:27:27
1399
1
原创 Vue3.0学习笔记-表单数据双绑定
input数据双向绑定v-model指令<input v-model="name" />textarea数据双向绑定textarea只需写单个标签（当然加上结束标签也没问题）<textarea v-model="name" />checkbox数据双向绑定1、绑定boolean变量 -- 会根据变量进行初始化，如果是字符串变量，操作后会变为boolean；一个变量只能绑定一个checkbox2、绑定数组变量，并使用value属性 -- 会根据数组与
2021-03-04 08:33:29
502
1
原创 Vue3.0学习笔记-绑定事件
方法和参数1、直接使用表达式实现<button @click="count++">直接使用表达式实现</button>2、绑定单个方法；没有参数调用不需要括号；响应事件可以接受一个event参数，调用时不需要传递；methods:{ addCountClick(){ this.count++; }, addCountClick2(event){ this.count++; console.lo
2021-03-03 08:39:18
1763
原创 Vue3.0学习笔记-循环v-for
循环数字 count in 99<span v-for="count in 99">{{count}},</span>循环数组 item in listArraytemplate:` <ul> <li v-for="item in listArray">{{item}}</li> </ul>`template:` <ul> <li v-fo
2021-03-03 08:36:34
1846
原创 Vue3.0学习笔记-样式绑定
通过在data的数据项中定义变量绑定通过普通字符串进行绑定； 通过对象的方式进行绑定； 通过数组的方式进行绑定， true为使用。data(){ return { classString:'red', //字符串方式也可以定义多个样式 classObject:{red:true,background:true}, classArray:['green','background'], }},template:` <h
2021-03-03 08:33:40
468
原创 Vue3.0学习笔记-侦听器Watch
侦听器/监听器 watchwatch 侦听器/监听器 可以监听 data中数据的变化; watch里面的名字就是用数据的名字可以接受两个参数 current(变化后的值),prev(变化之前的值)watch:{count(current,prev){console.log('countchanged');this.newTotal=this.price*current;...
2021-03-03 08:31:23
177
原创 Vue3.0学习笔记-计算属性computed
计算属性computed{{price*count}}显得不够优雅，也没有语义化方法methods：只要页面重新渲染，就会重新执行方法计算属性computed:当计算属性依赖的内容发生变更时，才会重新执行计算;注意 计算属性使用时用的是属性名,不需要括号()Demo12.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">&...
2021-03-03 08:29:46
440
原创 Vue3.0学习笔记-条件判断
条件判断三元运算符 this.message=this.message=='Helloworld'?'GoodBye':'Helloworld';v-ifv-else 注意else只与最近的v-if相关v-show 与v-if的区别是v-show通过css的display:none控制DOM是否显示，页面无需再次渲染；但不能用v-else共用data(){ return{ show:true, }},template:`...
2021-03-03 08:28:47
366
原创 Vue3.0学习笔记-动态属性与事件绑定
模板动态参数v-on简写<h2 v-on:click="hanldClick">{{message}}</h2><h2 @click="hanldClick">{{message}}</h2>v-bind简写<h2 v-bind:title="message">{{message}}</h2><h2 :title="message">{{message}}</h2>动态属性事件动态绑定
2021-03-03 08:27:05
2620
原创 Vue3.0学习笔记-插值表达式和b-bind
插值表达式和v-bind的使用插值表达式v-html 指令v-once指令 -- 只渲染一次插值表达式可以使用 js表达式，如三元运算符；但不能使用js语句，例如ifv-bind指令能设置html标签的属性值，例如设置h2的title<h2 v-on:click="handleItemClick" v-html="message" v-once title="message"> </h2>这跟使用组件时，通过v-bind指令，将属性值传入组件props
2021-03-03 08:01:08
332
原创 Vue3.0学习笔记-vm和生命周期函数
vm和生命周期函数createApp({})mount()根组件vm -- proxy形式的对象mvvm模式 vm -- viewModel生命周期函数 -- 在某个特定时刻自动执行的函数有八个生命周期函数，beforeCreate( ) ：在实例生成之前会自动执行的函数 created( ) : 在实例生成之后会自动执行的函数 beforeMount( ) : 在模板渲染完成之前执行的函数 mounted( ) : 在模板渲染完成之后执行的函数 beforeUpdate
2021-03-03 07:59:38
932
原创 Vue3.0学习笔记-Vue初体验
常见指令和函数template：mount（#app）data（）methods（）mounted{{ }}v-on:click=""v-if=""v-for="(item,index) of list"v-model="" //双向数据绑定组件和动态组件const app=app,mount(#app)app.component()v-bind:list="list"Demo1.html<!DOCTYPEhtml><.
2021-03-03 07:57:22
94
原创 Mac查看python安装版本
1、在 Launchpad 中打开系统信息2、在“软件“-> “应用程序“菜单下，能找到当前 Python 的安装信息
2020-02-05 11:31:56
1488
原创 Mac安装新版本python及修改系统默认配置
1、下载在python的主页https://www.python.org/downloads/，可下载安装最新的版本2、安装找到已下载的安装包，按步骤完成python新版本安装3、修改系统默认python版本3.1 查看Python3 安装路径 打开终端，输入which python3，查看路径/Library/Frameworks/Pyt...
2020-02-05 11:27:52
1038
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人