前端基础 - ES6新特性，vue2.x基础

焕星

已于 2022-05-27 15:38:00 修改

阅读量454

点赞数 1

文章标签：前端 javascript vue.js

于 2022-05-27 15:32:35 首次发布

本文链接：https://blog.csdn.net/weixin_42979858/article/details/125004966

版权

ES6

1、声明语法

1.1、let

1.1.2、let和var的区别

1、let有块作用域
2、let不能重复声明同名变量
3、let不存在变量提升

1.2、const

1、定义常量

2、解构表达式

2.1、数组解构

let arr=[1,2,3];
let [a,b,c]=arr;
console.log(a,b,c);

2.2、对象解构

const person={
	name:"chx"
	age:"24"
}
const {name,age}=person;
console.log(name,age);

3、字符串拓展

3.1、语法拓展

1、str.startWith("")
2、str.endWith("")
3、str.includes("")

3.2、字符串模板

const str="abc";
console.log(`${str}1213213`);

插值表达式可以用在运算和函数

4、函数优化

//函数参数默认值
const add = (a, b) => {
   b = b || 1; //如果b为空则默认1
   return a + b;
};
console.log(add(10, 1));

const add1 = (a, b = 1) => {
  return a + b;
};
console.log(add1(10, 1));

//不定参数
const func = (...values) => {
  console.log(values.length);
};
func(1, 2, 3, 4, 5);

5、对象优化

const person = {
  name: "chx",
  age: "24",
};
//新增的api
console.log(Object.keys(person));// ['name', 'age']
console.log(Object.values(person));// ['chx', '24']
console.log(Object.entries(person));//[Array(2), Array(2)]

const target={a:1};
const source1={b:2};
const source2={c:3};
Object.assign(target,source1,source2);
console.log(target);//{a: 1, b: 2, c: 3}

//对象的函数属性简写
let person3={
	name:"jack",
	eat:function(food){
		console.log(this.name);
	},
	//箭头函数获取不到this
	eat2:food=>console.log(this.name),
	eat3(food){
		console.log(this.name)
	}
}
person3.eat("香蕉");
person3.eat2("香蕉");
person3.eat3("香蕉");

//对象的拓展运算符
//1、拷贝对象
{...p1}
//2、合并对象
{...p1,...p2}

6、map和reduce

let arr=[1,2,3,4,5];
let arr1=arr.map(item=>{
    return item*2;
})
console.log(arr1);
let sum=arr1.reduce((pre,cur,index,arr)=>{
    console.log(index);
    console.log(arr);
    return pre+cur;
},100)
console.log(sum);

7、promise

封装异步操作

function get(url,data){
	return new Promise((resolve,reject)=>{
		$.ajax({
			url:url,
			data:data,
			success:function(data){
				resolve(data);
			},errot:function(err){
				reject(err);
			}
		})
	})
}

get("mock/user.json")
.then((data)=>{
	return get(`mock/user_corse_${data.id}.json`);
}).then((data)=>{
	return get(`mock/corse_score_${data.id}.json`)
}).then((data)=>{
	console.log("课程成绩查询成功：",data)
}).catch((err)=>{
	console.log("查询出现异常"，err)
})

8、模块化

var name="jack"
var age=12
export {name,age}

export defalut暴露时，import时可以自定义模块名

vue

初始化工程

npm init -y
npm install vue@2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <span>helloword,{{userName}}</span>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el:"#app",
            data:{
                userName:"chx"
            }
        })
    </script>
</body>
</html>

1、MVVM思想

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yQ10tOE9-1653636613403)(C:\Users\chuanx\AppData\Roaming\Typora\typora-user-images\image-20220525222148142.png)]

model，view

2、vue语法

2.1、指令

2.1.1、v-text,v-html

可以解决插值闪烁的问题

<div id="app" >
    {{msg}}
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            msg:"<span>3123123</span>"
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-njYzDVGf-1653636613404)(C:\Users\chuanx\AppData\Roaming\Typora\typora-user-images\image-20220526095603933.png)]

2.1.2、v-bind

给html标签的属性绑定

<div id="app">

   <!-- 普通用法 -->
   <a :href="link">跳转</a>
   
   <!-- class，style -->
   <div :class="{active:isActive,isDanger:hasError}">111</div>
   <div :style="{fontSize:fontSize,color:color}">111</div>
   
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            link:"http://www.baidu.com",
            isActive:true,
            hasError:true,
            fontSize:"18px",
            color:"red"
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9RTvFaXd-1653636613405)(C:\Users\chuanx\AppData\Roaming\Typora\typora-user-images\image-20220526101858388.png)]

2.1.3、v-model

实现双向绑定

<div id="app" >
    <input type="checkbox" v-model="language" value="c">c</input>
    <input type="checkbox" v-model="language" value="java">java</input>
    <input type="checkbox" v-model="language" value="script">script</input>
    {{language}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            language:[]
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hrFv5At4-1653636613406)(C:\Users\chuanx\AppData\Roaming\Typora\typora-user-images\image-20220526104424042.png)]

2.1.4、v-on

绑定事件

简写@，阻止事件冒泡stop，阻止默认事件prevent，只触发一次once

<div id="app" >
    {{num}}
    <div @click="test">
       <a href="http://www.baidu.com" @click.prevent.stop="add">+</a>
    </div>
    <a @click="minus">-</a>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            add(){
                this.num++;
            },minus(){
                this.num--;
            },test(){
                alert("1111");
            }
        }
    })
</script>

2.1.5、v-for

<div id="app" >
        <ul>
            <li v-for="(user,index) in users">
                遍历数组
                {{user.userName}}==>{{user.age}}<br/>
                <span v-for="(v,k,i) in user">
                    遍历对象{{v}}==>{{k}}==>{{i}}
                </span>
            </li>
        </ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            users:[
                {userName:"chx",age:24},
                {userName:"dsa",age:21}
            ]
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fEtTFhj3-1653636613406)(C:\Users\chuanx\AppData\Roaming\Typora\typora-user-images\image-20220526130830748.png)]

2.1.6、v-if和v-show

v-if=false 不会渲染元素，v-show=false是通过display:none实现的

2.1.7、v-else-if,v-else

<div id="app">
  <button @click="random=Math.random()">点击</button>
  <div v-if="random<0.2">小于0.2</div>
  <div v-else-if="0.8>random>0.2">大于0.2小于0.8</div>
  <div v-else>其他</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      random: 0.2,
    },
  });
</script>

2.2、计算属性和侦听器

2.2.1、计算属性computed和侦听器watch

<div id="app">
      <span>书名：西游记 价格：{{xyjprice}}</span> 
      数量：<input type="number" v-model="xyjnum"/><br />
      <span>书名：水浒传 价格：{{shzprice}}</span> 
      数量：<input type="number" v-model="shznum"/><br />
      <span>总价：{{totalprice}}</span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      xyjprice: 20,
      shzprice: 30,
      xyjnum: 0,
      shznum: 0,
    },
    computed: {
      totalprice() {
        return this.xyjprice * this.xyjnum + this.shzprice * this.shznum;
      },
    },
    watch: {
      xyjnum(cur, pre) {
        this.xyjnum = cur > 3 ? 3 : cur;
      },
    },
  });
</script>

2.2.2、过滤器

filters

<div id="app">
   <ul>
     <li v-for="(user,index) in users">
       {{user.userName}}==>{{user.age}}==>{{user.sex|sexFilter}}<br />
     </li>
   </ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      users: [
        { userName: "chx", age: 24, sex: 1 },
        { userName: "dsa", age: 21, sex: 0 },
      ],
    },
    filters: {
      sexFilter(sex) {
        return sex == 1 ? "男" : "女";
      },
    },
  });
</script>

2.3 、组件化

1、封装vue组件时，data应该封装成函数，返回对应的值，避免每个vue实例共享一份data

2、组件采用全小写+“-”的形式命名

<<div id="app">
   <cus-buttom></cus-buttom>
   <cus-buttom1></cus-buttom1>
   {{count}}
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  //全局注册
  Vue.component("cus-buttom", {
    template: `<button @click="count++">+1,{{count}}</button>`,
    data() {
      return {
        count: 0,
      };
    },
  });
  let cusbuttom1={
      template:`<button @click="count++">+1,{{count}}</button>`,
      data(){
          return {
              count:0
          }
      }
  };
  let vm = new Vue({
    el: "#app",
    data: {
        count:0
    },
    //局部注册
    components:{
       "cus-buttom1":cusbuttom1
    }
  });
</script>

2.4、生命周期

<div id="app">
      <span id="num">{{name}}有{{num}}个赞</span><br />
      <button @click="num++">点赞</button>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      name: "张三",
      num: 0,
    },
    methods: {
      show() {
        return this.name;
      },
      add() {
        this.num++;
      },
    },
    beforeCreate() {
      console.log("------beforeCreate------");
      //{{name}}有{{num}}个赞
      console.log("html模板未加载插值表达式",document.getElementById("num").innerText);
      //数据模型 undefined undefined
      console.log("数据模型未加载", this.name, this.num);
      //vue.js:1906 TypeError: this.show is not a function
      console.log("方法未加载", this.show());
    },
    created() {
      console.log("------create------");
      //{{name}}有{{num}}个赞
      console.log("html模板未加载插值表达式",document.getElementById("num").innerText);
      //数据模型已加载 张三 0
      console.log("数据模型已加载", this.name, this.num);
      //方法已加载 张三
      console.log("方法已加载", this.show());
    },
    beforeMount() {
      console.log("------beforeMount------");
      //{{name}}有{{num}}个赞
      console.log("html模板未加载插值表达式",document.getElementById("num").innerText);
      //数据模型已加载 张三 0
      console.log("数据模型已加载", this.name, this.num);
      //方法已加载 张三
      console.log("方法已加载", this.show());
    },
    mounted() {
      console.log("------mounted------");
      //张三有0个赞
      console.log("html模板已加载插值表达式",document.getElementById("num").innerText);
      //数据模型已加载 张三 0
      console.log("数据模型已加载", this.name, this.num);
      //方法已加载 张三
      console.log("方法已加载", this.show());
    },
    beforeUpdate() {
      console.log("------beforeUpdate------");
      //张三有0个赞
      console.log("html模板未更新",document.getElementById("num").innerText);
      //数据模型已更新 张三 1
      console.log("数据模型已更新", this.num);
    },
    updated() {
      console.log("------update------");
      //张三有1个赞
      console.log("html模板已更新",document.getElementById("num").innerText);
      //数据模型已更新 张三 1
      console.log("数据模型已更新", this.num);
    },
  });
</script>