vue学习1

vue

1.函数

1.Function

定义

function 函数名（参数）{
    //函数体
    return ;//可有可无
}

2.匿名函数

(function(参数){
    return
})

3.箭头函数

() => {
    //函数体
    return;
}

4.函数即对象

• 可以参与赋值

• 有属性有方法

• 可以作为参数传值

• 可以作为方法的返回值

5.let和var的区别以及作用域

let的作用域比var的作用域多

例如：

let a = 10
if(true) {
    let a = 20
    conlse.log(a)
}
conlse.log(a)
结果：先打印20，再打印10。和java语法类似

​
​

如果var变量出现了重名，他俩是同一个作用域中的同一个变量，相当于重新赋值

var a = 10
    if(true) {
       var a = 20
       conlse.log(a)
    }
conlse.log(a)

let与var，更倾向于使用let

2.数组

语法

let arr = [1,2,3];

使用

arr[0]

API

• push ，shift，splice

push:在数组的尾部添加一个元素
shift:在数组的头部移除一个元素
splice:指定删除索引位置的元素 splice(1,2)
 - splice有两个参数，第一个参数指的是删除的索引位置，第二个元素代表删除元素个数

• join

join：把数组的元素链接成一个字符串
let arr = ['a','b','c']
arr.join()
结果：'a,b,c'
默认是按照逗号分隔
arr.join('')
结果: 'abc'

• map，filter，foreach

map

举例：想把数组 【1,2,3】变成【10,20,30】
1.let arr = [1,2,3]
2.定义函数
function a (i){//代表新旧元素的变化规则    
    return i * 10
}
或者
i => i * 10
3.使用map
arr.map(a)
4.结果
[10,20,30]

map的内部实现原理

function map(a) {
     let newArr = []
    for(let i = 0; i < arr.length; i++) }{
        let o = arr[i];//旧元素
        let n = a(o);//新元素
        newArr.push(n)
    }
    return newArr;
}

filter(过滤)

let arr = [1,2,3,6]
a.filter(i => i%2 == 1);//留下奇数

foreach（遍历）

let arr = [1,2,3,4]
arr.foreach(i => conlse.log(i))

总结：以上方法不会改变原有数组的值，结果是产生新数组。、

• 高阶函数：如果一个函数的参数是一个函数或者返回值是一个函数的话，那么这个函数可以称之为高阶函数。

• 回调函数：作为参数的函数叫做回调函数

3.对象

let obj = {
    属性名：值，
    方法：函数
}

例1：

let student = {
    name: '张三',
    age: 18,
    method: function(){
        consle.log(this.name +'不爱上班')
    }
}

例2：

let name = '张三';
let age = 18;
let method = function(){
    console.log(this.name + '不爱上班')
}
let student = {name , age , method}

例3（重点）：

let student = {
    name: '张三',
    age: 18,
    method(){//这种方法的简写方式只能在对象里面这写
        consle.log(this.name +'不爱上班')
    }
}

特色：属性可以随时加减

let stu = {
    name: '张三'
}
stu.name = 18 //追加
delete stu.age
​

4.JSON与对象

1.例子

{
    "name":"张三",
    "age":18
}
{
    name:"张三",
    age: 18    
}

• JSON本质上是一个字符串，是客户端和服务端传递的一种数据格式

• javaScript对象是有属性和方法·的

• json中只能有null,true/false.数字，字符串，对象，数组

2.json字符串与js对象的转换

JSON.parse(json字符串);//返回js对象
JSON.stringify(js对象);//将js对象转换成json字符串

vue的创建方式

1. Vue CLI 项目创建和运行

# 安装 Vue CLI
npm install -g @vue/cli
 
# 创建一个新的 Vue.js 项目
vue create my-vue-app
 
# 进入项目目录
cd my-vue-app
 
# 启动开发服务器
npm run serve
npm create vue@latest
cd <your-project-name>
npm install
npm run dev

修改端口：

• 文档地址：DevServer | webpack

添加代理：

2.vue

vue2组件基础结构

vue2常用组件格式

vue3的组合式API

<script setup>
import { ref, onMounted } from 'vue'
​
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}
// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>