目录
es6学习:https://es6.ruanyifeng.com/#README
vue学习:https://www.runoob.com/vue2/vue-template-syntax.html
学习网站
es6学习:https://es6.ruanyifeng.com/#README
vue学习:https://www.runoob.com/vue2/vue-template-syntax.html
ES6中的let与var的区别
1. 作用域不同:
全局中var声明的变量的作用域是全局,而函数内部用var声明的变量的作用域是该函数内部;
let声明的变量的作用域在块级或子块中(一般情况下是被{}包裹起来的区域)
if(1==1)
{
var num = 10;
let sum = 20;
console.log(sum); //20
}
console.log(num); //10
console.log(sum); //报错
2. 变量提升(未重现)
在全局作用域及函数作用域中用var声明的变量,都会被提升到作用域的顶部;
用let声明的变量,不会提升到作用域的顶部,只能在变量声明后才能使用;
console.log(num); //undefined
var num = 10;
console.log(sum); //报错
let sum = 20;
3. 相同的作用域内不能重复声明一个变量
if(1 == 1){
let num = 10; //报错
let num = 20; //报错
console.log(num);
}
if(1 == 1){
var num = 10;
var num = 20;
console.log(num); // 20
}
4.let解决了闭包的问题
for(var i=0;i<10;i++){
arr[i]=function(){
return i;
}
}
console.log(arr[3]());//10
显然这段代码输出10,并没有向我们期望的返回3,原因也很简单(js的变量提升)函数在调用时候访问的是一个全局作用域的i,此时for循环已经执行完毕,全局变量i=10;
let解决闭包 就像下面这样:
let arr=[];
for(let i=0;i<10;i++){
arr[i]=function(){
return i;
}
}
console.log(arr[3]());//3
来自:
https://www.cnblogs.com/yifeng555/p/8455414.html
https://blog.csdn.net/huangqqdy/article/details/83413219
vue学习
{{...}}
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值
指令
指令是带有 v- 前缀的特殊属性。
v-model
用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
v-on
监听事件
v-html
用于输出 html 代码
v-bind
被用来响应地更新 HTML 属性
<div v-bind:id="'list-' + id">菜鸟教程</div>
为什么vue组件的属性,有点需要加冒号: 有的不用?
需要加冒号:后面是一个变量或者表达式,或者boolean或者number
不需要加冒号: 后面是字符串变量
v-if
将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
v-if:每次都会重新删除活创建元素,有较高的切换性能消耗
v-show:每次不会重新进行DOM的删除和创建操作,只会切换元素的 display:none样式,有较高的初始渲染消耗
缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
==与===的区别
- =是赋值的意思,是让左边的值等于右边的值,比如:var a=1;那么现在alert(a)就是1,当然右边可以是变量,如:var a=1; var b也是1;
- ==是判断等于的意思,返回的是一个布尔值,如:alert(1==1);将返回true,因为1等于1,如果 alert(1=='1');也返回true,虽说后面的1是字符串类型,但是==是不判断类型的,所以还是true,如果:alert(1=='2')就是false了,因为1不等于2;
- ===也是判断的,但是它要比==判断的严谨一点,它的判断必须什么都相等,比如说类型,值;如: alert(1===1);将返回true,因为它们都是1,而且都是数字类型,如果:alert(1==='1');将返回false,因为前面的1是数字类型,后面的1是字符串类型。https://xuexb.com/post/142.html
Vue scoped属性的作用
实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。使用 scoped
后,父组件的样式将不会渗透到子组件中。
效果:
打开F12,观察DOM结构发现:vue在DOM结构及css样式上加上唯一的标记,达到样式私有化,来保证不会被污染全局的作用。
scoped
设计的初衷:就是让样式变得不可修改
vue 关于组件那些事
1. vue中的prop
定义:prop 是父子交流的组件,但是是数据单项传递,父影响子,子不影响父
常用用法:props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
大小写不敏感,camelCase (驼峰命名法) 的 prop 名使用其等价的 kebab-case (短横线分隔命名) 命名都能接受
2. 自定义事件
this.$emit('myEvent')
<!-- 没有效果 --> <my-component v-on:my-event="doSomething"></my-component>
命名敏感,必须全匹配
3. <keep-alive><keep-alive/>:
把你的组件给缓存下来了,不让组件重新渲染,节省性能
keep-alive有2个钩子函数:activated、deactivated
一般可用activated函数来初始化数据
created mounted activated区别
created()在创建vue对象时,在html渲染之前就触发,此时初始化了data和methods
mounted()在html渲染完成之后才会执行的
activated()进入当前存在activated()函数的页面时,一进入页面就触发;
vue slot组件:
插槽(Slot)
<slot name="test"></slot> : 插槽的显示的位置由子组件控制
<p slot="test">显示的内容有我父组件控制</p> :插槽的内容或是否显示有父组件控制