视频资源来自:b站coderwhy王红元老师——最全最新Vue、Vuejs教程,从入门到精通
文件仅为个人观看视频后的学习心得笔记,用于个人查看和记录保存。文中定有疏漏错误之处,恳请指正。
Vue基础语法
插值操作
Mustache
[胡须]双大括号
{{firstName + ' ' + lastName}}
mustache语法中,不仅可以直接写变量,也可以写简单的表达式
{{counter * 2}}
v-once
只用一次,后台数据变了,{{}}里的不变
v-html
新的超链接写法
v-text
,YY
运行后,原本标签里的文字(,YY)会被覆盖
v-pre
{{message}}
表示直接显示大括号(转义)
v-cloak
防止闪烁
在vue解析之前,div中有一个属性v-cloak
在vue解析之后,div中没有一个属性v-cloak
Title
{{message}}
↑设置了延时
动态绑定属性v-bind
动态决定某些属性
语法糖 :
v-bind动态绑定class
用:class时,都是整合叠加,不是覆盖
对象语法:
{{message}}
{{message}}
{{message}}
数组语法:
{{message}}
{{message}}
{{message}}
v-bind绑定style
对象语法:
如:
在css中,50px不用加单引号、字符串也不用。但在vue语法中,不加单引号会把50px当作一个变量。
其中,frontSize: '100',是个变量
数组语法:
{{message}}
计算属性
总价格:{{totalPrice}}
因为在computed计算属性中,调用函数时后面不用加括号()
计算属性的setter和getter
计算属性一般没有set方法,只读属性
get这一行也可以删
字符串分割
computed 效率比methods高
ES6补充
块级作用域:ES5之前,因为if和for都没有块级作用域的概念,所以在很多时候,我们必须借助function的作用域来解决应用外面变量的问题
ES6语法:let/var ←全局变量,不受限制 会造成变量污染
1.块级作用域:变量在十米范围内是可用的
2.没有块级作用域引起的问题:if的块级
3.没有块级作用域引起的问题:for的块级
const的使用:在ES6开发中,优先使用const,只有需要改变某一个标识符的时候才使用let
1.注意一:一旦给const修饰的标识符被赋值之后,不能修改
2.注意二:在使用const定义修饰符,必须进行赋值
3.注意三:常量的含义是指向的对象(保存的是对象的内存地址,const不能变,地址里的内容可以变)不能修改,但是可以改变对象内部的属性
对象字面量增强写法
1.属性的增强写法
2.函数的增强写法
事件监听
v-on的基本使用和语法糖
事件监听
语法糖 v-on: @
click 鼠标点
keyup 键盘弹起
v-on的参数传递问题
①事件调用的方法没有参数
情况一:如果方法不需要额外参数,那么方法后的()可以不添加
②在事件定义时,写出函数时省略了小括号,但是方法本身是需要一个参数的,这个时候,Vue会默认将浏览器产生的event事件对象作为参数传入方法
(如果函数需要参数,但没有传,那么形参为undefine)
情况三:③方法定义时,我们需要event对象,又需要传参数
btnClick(123,,不然会把它当成变量/方法
在调用方法时,手动获取到浏览器的event对象:$event
v-on修饰符使用
1 .stop修饰符的使用 - 调用 event.stopPropagation()。
aaa
2 .prevent - 调用 event.preventDefault()。
阻止自动向服务器提交,自己提交
3 .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
监听某个键盘 键的点击
4 .native - 监听组件根元素的原生事件。
5 .once - 只触发一次回调。
条件判断
v-if 和 v-else-if 和 v-else 的使用
优秀
良好
及格
不及格
登陆切换小案例——key
for的作用:单记label文字,也能在userName文本框里出光标,相当于单击文本框
vue中,切换时,要进行对比后再修改。↑上述 可能造成单击切换后不显示的问题,可以增加一个key属性。key = "uerName"
,key不一样时,就不会复用
v-show
{{message}}
v-if当条件为false时,压根不会有对应的元素在DOM中。
v-show当条件为false时,仅仅是将元素的display属性设置为none而已。
当需要在显示和隐藏之间切换很频繁时,用v-show,不频繁用v-if
循环遍历
v-for遍历数组和对象
{{index}}.{{item}}
在编历过程中,如果只是获取一个值,那么获取到的是value
{{m}}-{{key}}-{{index}}
v-for绑定和非绑定key的区别
app.letters.splice(2,3)
//letters是数组。从低2个位置开始,删除第3个元素
app.letters.splice(2,0,'F')
//从第2个位置后面插入一个'F'
没有key绑定时,在中间插入元素时间复杂度为O(n)
:key = 'm'
其中元素字符串需要唯一, 时,时间复杂度为O(1)
掌握数组中哪些方法是响应式的
1.push方法
this.letters.push('Y','PP','CC')
2.pop() 删除数组中最后一个元素
3.shift() 删除数组中第一个元素
4.unshift() 在数组最前面添加元素
this.letters.unshift('YY','PP')
function sum(...num){
console.log.(num);
}
sum(20,30,40,50,60,33)
...表示可以传入多个值
5.splice() 删除元素/插入元素/替换元素
删除元素:第二个参数表示删除几个元素(如果不写,就删除参数一后面所有元素)
splice(1,3,'m','n','1')
←替换
删1后面3个元素,再在这加3个元素
6.reserve() 反转数组内容
*7.set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters,0,'Y')
非响应式:
通过索引值修改数组中的元素
this.letters[0]='YY'
=== 三个等于,既比较值又比较类型
购物车案例
过滤器
总价格:{{totalPrice|finalPrice}}
在js中
filters: {
finalPrice(price){
return '¥'+price.toFixed(2);
}
},
把所有元素都经过一遍filters,得到固定2位小数的 价格。
按钮有个属性为disabled
1.for循环
for(let i=0;i
JavaScript高阶函数的使用
编程范式:命令式编程/声明式编程
编程范式:面向对象编程/函数式编程
第一公民: 对象 函数
1.filter函数的使用
filter中的回调函数必须返回一个boolean值
true:函数内部会自动将这次回调的n加入到新的数组中
false:函数内部过滤掉这次的n
let newNums = nums.filter(function(n){
return n<100
})
2.map函数的使用
let newNums = nums.map(function(n){
return n*2
})
3.reduce的使用 对数组中所有的内容进行汇总
let total = newNums.reduce(function(preValue,n){
return preValue + n
},0)
连着写
let total = nums.filter(function(n){
return n<100
}).map(function(n){
return n*2
}).reduce(function(preValue,n){
return preValue + n
},0)
let total = nums.filter(n => n<100
}).map(n => n*2
}).reduce((preValue,n) => preValue + n
},0)
v-model
v-model原理
input和message双向绑定,修改文本框中的数据后,message也会改变
{{message}}
input 输入事件
v-model:radio
↑相同name,只能提交一个,实现互斥
↓不用name,用v-model也能实现互斥
您选择的性别是:{{sex}}
sex 开始默认选男。如果为空'',默认不选
v-model:checkbox
单选框
您选择的是:{{isAgree}}
多选框,绑定数组
篮球
乒乓球
羽毛球
您选择的是:{{hobbies}}
v-model:select
您选择的是:{{fruit}}
您选择的是:{{fruits}}
input中的值绑定
v-model修饰符的使用
1 .lazy懒加载
v-model.lazy
只在失去焦点,或回车时改
2 .number
{{typeof age}}
默认绑定的是String类型,加了.number之后,变成了number型
3 .trim
v-model.trim 去除前后空格
总目录:
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战