Vue ES6 学习

目录

学习网站

es6学习：https://es6.ruanyifeng.com/#README

vue学习：https://www.runoob.com/vue2/vue-template-syntax.html

ES6中的let与var的区别

vue学习

指令

缩写

==与===的区别

Vue scoped属性的作用

vue 关于组件那些事

---

学习网站

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> ：插槽的内容或是否显示有父组件控制