vue和es6的学习笔记

最新推荐文章于 2021-10-29 17:36:52 发布

cccc0906

最新推荐文章于 2021-10-29 17:36:52 发布

阅读量511

点赞数

文章标签： vue es6/es7

本文链接：https://blog.csdn.net/cccc0906/article/details/107727521

版权

vue

基础

显示数据

文本显示数据用{{}}，html代码显示数据用v-html指令；

使用js表达式

{{a+1}}
{{ok?‘yes’:‘no’}}如果满足ok就显示yes不满足就显示no

指令

v-if控制显示隐藏: 满足条件就显示，不满足就不显示

v-bind响应式更新

v-on:click点击时间

动态参数：可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

组件

组件的复用
一个组件的date选项必须是一个函数，所以每个实例可以维护一份呗返回对象的独立拷贝
props的类型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise
}
通过prop向子组件传递数据

父组件：
data: {
posts: [
{ id: 1, title: ‘My journey with Vue’ },
{ id: 2, title: ‘Blogging with Vue’ },
{ id: 3, title: ‘Why Vue is so fun’ }
]
}
引用子组件：

监听子组件事件

混入

混入提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

钩子函数合并

<body>
    <div id="app"></div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    var Mixins = {
        created() {
            console.log('Mixins Created')
        }
    }
    new Vue({
        el: '#app',
        mixins: [Mixins],
        created() {
            console.log('#app Created')
        }
    })
    
    //  Mixins Created
    //  #app Created
</script>

数据对象合并
普通方法合并

jsx

jsx怎么用v-if,v-for

v-if:

this.showModal ? <div class="mask" >11111</div> : null

v-for:

 data(){
        return{
          show:false,
          list:[1,2,3,4]
        }
      },
      render(){
        return (
          <div>
            {this.list.map((v)=>{
              return <p>{v}</p>
            })}
          </div>
        )
      }

ES6

let和const

let 用来声明变量，用法类似于var，但只在当前let命令所在的代码块内有效
块级作用域：
es6 如果外层和内层都声明了同一个变量，那外层代码块不会受内层代码块的影响
const命令
const声明一个只读的常量。一旦声明，常量的值都就不能改变（只声明不赋值会报错）
let和const的相同之处

只在声明所在的作用域内有效
只能先声明后使用
不允许重复声明一个变量，因此不能在函数内部重新声明参数

变量的解构赋值

基本用法
从数组和对象中提取值，对变量进行赋值，这被称为解构
let [a, b, c] = [1, 2, 3];

字符串的新增方法

includes() 返回布尔值，表示是否找到了参数字符串。
startsWith() 返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith() 返回布尔值，表示参数字符串是否在原字符串的尾部。
repeat() 方法返回一个新字符串，表示将原字符串重复n次。
trimStart()，trimEnd() 消除字符串头部（尾部）的空格

数组的扩展

复制数组
const a1 = [1, 2];
// 写法一
const a2 = […a1];
// 写法二
const […a2] = a1;

function a(...rest){
    return [...rest]
}
a(1,2,3,4,5,6,7,8)
(8) [1, 2, 3, 4, 5, 6, 7, 8]

合并数组
const a3 = a1.concat(a2);
与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

将字符串转为数组
const [first, …rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
find() 和 findIndex()

let b=[{a:1,c:4},{a:2,c:2},{a:3,c:1}]
b.find(e=>{
    if(e&&e.c&&e.c==4){
        return e.c
    }
})

find()的参数是一个回调函数，所有数组成员依次执行该回调函数，知道找出第一个返回值为true的成员，然后返回该成员，如果不符合，则返回undifined。
findIndex()方法的用法钰find方法非常类似，返回一个符合条件的数组成员的位置，所有的成员都不符合就返回-1

includes() 方法返回一个布尔值，表示是否包含某个数值
Array.prototype.sort()的排序稳定性

const arr = [
‘peach’,
‘straw’,
‘apple’,
‘spork’
];
const stableSorting = (s1, s2) => {
if (s1[0] < s2[0]) return -1;
return 1;
};
arr.sort(stableSorting)
// [“apple”, “peach”, “straw”, “spork”]

Promise

是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大
特点：

对象的状态不受外界影响。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

new Promise(resolve => {
  setTimeout(() => {
    resolve('hello')
  }, 2000)
}).then(res => {
  console.log(res)
})

cccc0906

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue和es6的学习笔记

vue基础显示数据文本显示数据用{{}}，html代码显示数据用v-html指令；使用js表达式{{a+1}}{{ok?‘yes’:‘no’}}如果满足ok就显示yes不满足就显示no指令v-if控制显示隐藏: 满足条件就显示，不满足就不显示v-bind响应式更新 v-on:click点击时间动态参数：可以用方括号括起来的 JavaScript 表达式作为一个指令的参数组件组件的复用一个组件的date选项必须是一
复制链接

扫一扫